mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +00:00
Psychotoxical
98bdf310d6
* chore(themes): drop the dead installs field from RegistryTheme The store no longer reads install counts (the themes registry stopped emitting them), so this optional field on RegistryTheme was unused. * fix(themes): give dropdown border/shadow tokens a cascade default --border-dropdown and --shadow-dropdown were set by only two themes and had no base fallback, so dropdown/popover borders rendered without a themed value in every other theme. Default them in the semantic cascade next to the other menu tokens; themes that set them explicitly still override. * fix(themes): unify input focus rings, drop the double border Text inputs draw their own border + box-shadow focus ring, but the global :focus-visible outline stacked a second ring outside it — a double border on every field. Suppress the outline for text inputs centrally; the specificity (0,1,1) beats the global ring but loses to the colour-blind-safe themes' [data-theme] *:focus-visible (0,2,0), so those keep their stronger AAA ring on every field by design — the header search now carries that ring on its cluster there too. Align the few input classes that had a weaker or missing ring to the shared border + 3px accent-dim standard. * docs(changelog): add #1052 input/dropdown focus border fixes
41 lines
1.9 KiB
CSS
41 lines
1.9 KiB
CSS
/* ─── Focus ─── */
|
|
/* Single source of truth for keyboard focus rings. Inset (negative offset) so the
|
|
ring is drawn INSIDE the element and is never clipped by an ancestor's
|
|
overflow:hidden / scroll container (cards, rails, player bar, queue strip).
|
|
Outline (not box-shadow) keeps it visible in forced-colors / high-contrast mode.
|
|
The outline follows each element's own border-radius natively. */
|
|
:root {
|
|
--focus-ring-width: 2px;
|
|
--focus-ring-color: var(--accent);
|
|
--focus-ring-offset: -2px;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
/* Text inputs draw their OWN focus ring (border + box-shadow), so the global
|
|
outline above stacks a second ring outside it — the "double border". Drop it
|
|
for them. Specificity is deliberate: `input…:focus-visible` is (0,1,1), which
|
|
beats the global :focus-visible (0,1,0) but LOSES to the colour-blind-safe
|
|
themes' `[data-theme] *:focus-visible` (0,2,0) — so those themes keep their
|
|
stronger AAA ring on every field (incl. inputs) by design. The `:where()`
|
|
type-exclusion stays weightless so non-text controls (range/checkbox/…) keep
|
|
the outline everywhere. */
|
|
input:not(:where([type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='image'])):focus-visible,
|
|
textarea:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
/* Under forced-colors the OS drops the box-shadow ring, so restore an outline
|
|
as the focus indicator for those same text inputs. */
|
|
@media (forced-colors: active) {
|
|
input:not(:where([type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='image'])):focus-visible,
|
|
textarea:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
}
|
|
|