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 f429889250
commit 94a077d699
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) ===== */
.glass {
/* Frosted overlay surface. We lean on opacity (not blur) so it looks right even
when the browser has hardware acceleration off, where backdrop-filter is a no-op
and a sharp background would otherwise show through. The blur is a bonus that
kicks in when GPU compositing is available. */
background: color-mix(in srgb, var(--surface) 94%, transparent);
/* Frosted overlay surface: translucent enough that the blurred backdrop shows
through (the glassy look), opaque enough that the background isn't distracting.
The strong blur turns whatever is behind into soft colour, not a sharp image. */
background: color-mix(in srgb, var(--surface) 82%, transparent);
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:
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);
}
.glass-card {