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); }
|
: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); } }
|
@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; }
|
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="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"] { color: var(--md-sys-color-on-surface-variant); }
|
||||||
input[type="file"]::file-selector-button {
|
input[type="file"]::file-selector-button {
|
||||||
|
|||||||
@@ -295,23 +295,24 @@ div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { borde
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-block-size: 36px;
|
min-block-size: 36px;
|
||||||
|
padding-block: 8px; /* long names wrap: keep the items apart */
|
||||||
padding-inline: 12px;
|
padding-inline: 12px;
|
||||||
|
box-sizing: border-box;
|
||||||
border-radius: var(--md-sys-shape-corner-full);
|
border-radius: var(--md-sys-shape-corner-full);
|
||||||
color: var(--md-sys-color-on-surface-variant);
|
color: var(--md-sys-color-on-surface-variant);
|
||||||
font: var(--md-sys-typescale-label-large);
|
font: var(--md-sys-typescale-body-medium); /* regular weight: only the section titles are bold */
|
||||||
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
||||||
transition: var(--nm-transition);
|
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: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 {
|
#sidebar li > a.selected:is(:only-child, .query), #admin-menu li a.selected {
|
||||||
margin-inline-start: 0; /* core: -6px, inset marker bar */
|
margin-inline-start: 0; /* core: -6px, inset marker bar */
|
||||||
padding-block: 0;
|
padding-block: 8px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
line-height: normal;
|
|
||||||
background-color: var(--md-sys-color-secondary-container);
|
background-color: var(--md-sys-color-secondary-container);
|
||||||
color: var(--md-sys-color-on-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 */
|
/* 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) { display: grid; align-items: center; }
|
||||||
#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; }
|
#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; }
|
||||||
|
|||||||
Reference in New Issue
Block a user