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

fix(ui): restore glass translucency (82%) — opaque value killed the effect

Browse source 
backdrop-filter blur does work here; the previous 94% opacity made .glass nearly
solid so the blurred backdrop never showed. Dial back to 82% with a strong blur so
overlays read as frosted glass again, while staying less see-through than the old
72% that made the account menu look too transparent.
This commit is contained in:
npeter83 2026-06-11 22:45:14 +02:00
parent 65f687c9cd
commit cfeae492ec
1 changed files with 6 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/index.css
View file

@ -32,16 +32,15 @@ body {
/* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */ /* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */
.glass { .glass {
/* Frosted overlay surface. We lean on opacity (not blur) so it looks right even /* Frosted overlay surface: translucent enough that the blurred backdrop shows
when the browser has hardware acceleration off, where backdrop-filter is a no-op through (the glassy look), opaque enough that the background isn't distracting.
and a sharp background would otherwise show through. The blur is a bonus that The strong blur turns whatever is behind into soft colour, not a sharp image. */
kicks in when GPU compositing is available. */ background: color-mix(in srgb, var(--surface) 82%, transparent);
background: color-mix(in srgb, var(--surface) 94%, transparent);
backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
-webkit-backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
box-shadow: box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
0 18px 44px -16px rgba(0, 0, 0, 0.6); 0 18px 44px -16px rgba(0, 0, 0, 0.6);
} }
.glass-card { .glass-card {