diff --git a/tonalmine/stylesheets/components.css b/tonalmine/stylesheets/components.css index 90769b0..31cea75 100644 --- a/tonalmine/stylesheets/components.css +++ b/tonalmine/stylesheets/components.css @@ -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 { diff --git a/tonalmine/stylesheets/layout.css b/tonalmine/stylesheets/layout.css index ebf7f7d..0c95a62 100644 --- a/tonalmine/stylesheets/layout.css +++ b/tonalmine/stylesheets/layout.css @@ -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; }