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 (
<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
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">

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
(`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
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"],
.glass-media {
--glass-blur: 10px;
@ -46,6 +46,16 @@ html[data-backdrop="on"],
--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
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). */