mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
fix(themes): unify input & dropdown focus borders across themes (#1052)
* 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
This commit is contained in:
@@ -46,12 +46,18 @@
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--accent);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
padding: 3px 7px;
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.context-submenu-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.context-submenu-input::placeholder {
|
||||
|
||||
@@ -817,9 +817,11 @@
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
.orbit-start-modal__input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.orbit-start-modal__reshuffle {
|
||||
|
||||
@@ -469,6 +469,6 @@
|
||||
.playback-delay-custom__input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
|
||||
@@ -20,11 +20,12 @@
|
||||
padding: 6px 12px;
|
||||
width: 220px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.playlist-filter-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.playlist-filter-input::placeholder {
|
||||
|
||||
@@ -165,8 +165,8 @@
|
||||
|
||||
.folder-col-filter-input:focus {
|
||||
outline: none;
|
||||
border-color: color-mix(in srgb, var(--accent) 70%, var(--border-subtle));
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.folder-col.folder-col--compact .folder-col-filter {
|
||||
|
||||
Reference in New Issue
Block a user