fix: lighter placeholders and regular-weight sidebar links
Placeholders use the outline color, so an empty field no longer looks filled. Sidebar link lists (queries, versions, wiki index, admin menu) use regular body text; only the section titles stay bold. Each item gets 8px vertical padding and a 2px gap, so wrapped names stay apart. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -100,7 +100,7 @@ input.autocomplete {
|
||||
:where(:root[data-mode="dark"]) input.autocomplete { background-image: url(../images/search-dark.svg); }
|
||||
@media (prefers-color-scheme: dark) { :where(:root:not([data-mode="light"])) input.autocomplete { background-image: url(../images/search-dark.svg); } }
|
||||
select[multiple] { background-image: none; padding-inline-end: 12px; }
|
||||
input::placeholder, textarea::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
|
||||
input::placeholder, textarea::placeholder { color: var(--md-sys-color-outline); opacity: 1; } /* lighter than typed text, so an empty field does not look filled */
|
||||
input[type="checkbox"], input[type="radio"] { accent-color: var(--md-sys-color-primary); }
|
||||
input[type="file"] { color: var(--md-sys-color-on-surface-variant); }
|
||||
input[type="file"]::file-selector-button {
|
||||
|
||||
@@ -295,23 +295,24 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-block-size: 36px;
|
||||
padding-block: 8px; /* long names wrap: keep the items apart */
|
||||
padding-inline: 12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--md-sys-shape-corner-full);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
font: var(--md-sys-typescale-label-large);
|
||||
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
||||
font: var(--md-sys-typescale-body-medium); /* regular weight: only the section titles are bold */
|
||||
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
||||
transition: var(--nm-transition);
|
||||
}
|
||||
#sidebar li > a:is(:only-child, .query):hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; }
|
||||
#sidebar li > a.selected:is(:only-child, .query), #admin-menu li a.selected {
|
||||
margin-inline-start: 0; /* core: -6px, inset marker bar */
|
||||
padding-block: 0;
|
||||
padding-block: 8px;
|
||||
box-shadow: none;
|
||||
line-height: normal;
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
#admin-menu li { padding-block-end: 2px; }
|
||||
#admin-menu li, #sidebar li:has(> a:is(:only-child, .query)) { padding-block-end: 2px; }
|
||||
/* The selected query also holds its "clear" icon: it sits at the end, inside the pill */
|
||||
#sidebar li:has(> .icon-clear-query) { display: grid; align-items: center; }
|
||||
#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; }
|
||||
|
||||
Reference in New Issue
Block a user