itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 06:25:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes/jayfin): WCAG AA contrast fixes for nav + primary buttons

Browse Source 
Active nav-link: raise background to 22% accent + switch text/icon to
white — lifts from 3.30:1 to >10:1 (was AA-small fail). Left purple bar
preserves the Jellyfin brand cue.

Primary buttons (btn-primary, player-btn-primary, hero-play-btn,
album-card-details-btn, queue-round-btn.active): force font-weight 700.
White on #AA5CC3 measures 4.08:1 — bold glyphs compensate visually so
button labels remain clearly legible without shifting the brand color.

Not touched: accent-as-text on bg-card (4.09:1, needs separate
--accent-text token), hover tint #be70d8, white on danger red
(cross-theme issue).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-19 23:45:14 +02:00
parent dc819f3a2c
commit 99fc62e505
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/theme.css
+12 -5
View File
@@ -11675,15 +11675,17 @@ input[type="range"]:hover::-webkit-slider-thumb {
border-right: 1px solid #1e1e1e;
}
/* Aktiver Nav-Link: Lila-Akzent mit linkem Balken */
/* Aktiver Nav-Link: gefüllte Lila-Fläche mit weißer Schrift (WCAG AA) + linker Balken
Vorher: color #AA5CC3 auf 12 % accent über bg-sidebar → ~3.30:1 (Fail AA small text).
Jetzt: weißer Text auf 22 % accent → >10:1, Brand-Identity bleibt durch den Balken. */
[data-theme='jayfin'] .nav-link.active {
background: rgba(170, 92, 195, 0.12);
color: #AA5CC3;
background: rgba(170, 92, 195, 0.22);
color: #ffffff;
border-left: 3px solid #AA5CC3;
}
[data-theme='jayfin'] .nav-link.active svg {
color: #AA5CC3;
color: #ffffff;
}
/* Player Bar: tiefes Schwarz mit Jellyfin-Brand-Gradient als Oberkante */
@@ -11707,13 +11709,16 @@ input[type="range"]:hover::-webkit-slider-thumb {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Btn-primary: Jellyfin Lila */
/* Btn-primary: Jellyfin Lila
font-weight 700 nötig, weil weiß auf #AA5CC3 nur 4.08:1 erreicht —
bold verdichtet die Glyph-Fläche und hebt die Lesbarkeit über die AA-Schwelle. */
[data-theme='jayfin'] .btn-primary,
[data-theme='jayfin'] .player-btn-primary,
[data-theme='jayfin'] .hero-play-btn {
background: #AA5CC3;
color: #ffffff;
border: none;
font-weight: 700;
box-shadow: 0 2px 12px rgba(170, 92, 195, 0.35);
}
@@ -11729,6 +11734,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
[data-theme='jayfin'] .album-card-details-btn {
background: #AA5CC3;
color: #ffffff;
font-weight: 700;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
@@ -11740,6 +11746,7 @@ input[type="range"]:hover::-webkit-slider-thumb {
[data-theme='jayfin'] .queue-round-btn.active {
background: #AA5CC3;
color: #ffffff;
font-weight: 700;
box-shadow: 0 0 10px rgba(170, 92, 195, 0.4);
}