peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(glass): give light theme its own translucent tier + unify the Plex filter rail

Browse source 
Light theme has no background image, so the adaptive :root glass (94%) rendered
as flat snow-white islands, while the Plex filter rail (still on bg-surface/40)
showed the ambient tint — an inconsistency. Fix centrally, not per-component:
- index.css: one html[data-theme="light"] token override (surface 62 / card 74 /
  menu 86) so every .glass* surface is translucent in light and picks up the
  ambient tint, like it refracts the backdrop in dark.
- PlexSidebar: bg-surface/40 -> glass, so all filter rails bind to the same token.
One central lever now controls the light-theme glass translucency for the whole app.
This commit is contained in:
npeter83 2026-07-12 23:53:56 +02:00
parent 9f664a7ca6
commit 914cd79db9
2 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/PlexSidebar.tsx
View file

@ -120,7 +120,7 @@ export default function PlexSidebar({
} }
return ( return (
<aside className="hidden md:block w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-4 space-y-4"> <aside className="hidden md:block w-64 shrink-0 glass overflow-y-auto p-4 space-y-4">
{/* Collapse control + active-filter count — mirrors the feed Sidebar so the Plex filter panel {/* Collapse control + active-filter count — mirrors the feed Sidebar so the Plex filter panel
can be collapsed from the Plex page too (the collapsed rail + shared state already existed). */} can be collapsed from the Plex page too (the collapsed rail + shared state already existed). */}
<div className="flex items-center gap-1.5 min-w-0"> <div className="flex items-center gap-1.5 min-w-0">

12
frontend/src/index.css
View file

@ -31,7 +31,7 @@
real image sits behind the surfaces: app-wide when the per-scheme background image is on real image sits behind the surfaces: app-wide when the per-scheme background image is on
(`html[data-backdrop="on"]`), and on the Plex art-backed detail views (`.glass-media`, which (`html[data-backdrop="on"]`), and on the Plex art-backed detail views (`.glass-media`, which
have their own art backdrop even when the global image is off). When there's nothing behind the have their own art backdrop even when the global image is off). When there's nothing behind the
glass (image off / light theme / perf), the :root defaults keep it solid & readable. ===== */ glass (image off / perf), the :root defaults keep it solid & readable. ===== */
html[data-backdrop="on"], html[data-backdrop="on"],
.glass-media { .glass-media {
--glass-blur: 10px; --glass-blur: 10px;
@ -46,6 +46,16 @@ html[data-backdrop="on"],
--glass-scrim: 30%; --glass-scrim: 30%;
} }
/* Light theme carries no per-scheme background image, so the near-opaque :root (adaptive) glass
reads as flat white and every panel becomes an opaque island. Give light its OWN translucent tier
— one central override, every .glass* surface — so the ambient tint (and content) shows through
and glass stays glassy in light too. (Perf mode below still forces solid + no blur.) */
html[data-theme="light"] {
--glass-surface-alpha: 62%;
--glass-card-alpha: 74%;
--glass-menu-alpha: 86%;
}
/* Per-scheme background image, painted on <body> (the app root is transparent so it shows through /* Per-scheme background image, painted on <body> (the app root is transparent so it shows through
the whole app and the glass refracts it). A faded --bg overlay keeps it subtle; `fixed` so it the whole app and the glass refracts it). A faded --bg overlay keeps it subtle; `fixed` so it
doesn't scroll. Only when the backdrop is on (dark theme + the "Background image" setting). */ doesn't scroll. Only when the backdrop is on (dark theme + the "Background image" setting). */