style(web): keep the braille logo in brand colours on every bar (refs #451)

The header bars are intentionally monochrome, but the logo was recoloured
along with them (admin forced it white; the player and chooser whitened it
in light mode). Drop the filter on the brand mark only so it stays in its
blue/yellow brand colours as the single accent, while the mono nav icons
still recolour via --nav-icon-filter. Removes the now-unused --logo-filter
var from the chooser.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tobias Gesellchen
2026-06-07 15:08:26 +02:00
co-authored by Claude Opus 4.8
parent 631422967d
commit 2657e5411c
3 changed files with 6 additions and 5 deletions
+2 -1
View File
@@ -14,7 +14,8 @@ body { font-family: sans-serif; margin: 20px; }
color: #fff;
}
.topbar .brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.topbar .brand img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
/* Keep the braille mark in its brand colours; the rest of the bar stays monochrome. */
.topbar .brand img { width: 24px; height: 24px; }
.topbar .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.topbar .brand-name { font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; }
.topbar .brand-subtitle { font-size: .7rem; font-weight: 400; opacity: .7; }
+2 -3
View File
@@ -21,7 +21,6 @@
--accent: oklch(0.220 0.010 95);
--accent-fg: oklch(0.980 0.003 95);
--radius: 12px;
--logo-filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
:root {
@@ -34,7 +33,6 @@
--live: oklch(0.720 0.150 150);
--accent: oklch(0.860 0.006 95);
--accent-fg: oklch(0.200 0.005 95);
--logo-filter: none;
}
}
@@ -66,7 +64,8 @@
color: var(--accent-fg);
}
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand img { width: 24px; height: 24px; filter: var(--logo-filter); }
/* Keep the braille mark in its brand colours; the bar stays monochrome. */
.brand img { width: 24px; height: 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; }
.brand-subtitle { font-size: 0.7rem; font-weight: 400; opacity: 0.7; }
+2 -1
View File
@@ -149,7 +149,8 @@ img { display: block; max-width: 100%; }
.nav-logo {
width: 24px;
height: 24px;
filter: var(--nav-icon-filter);
/* Keep the braille mark in its brand colours; the mono nav icons below
still recolour via --nav-icon-filter, the logo stays the one accent. */
}
.nav-links {