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

fix(ui): opaque .glass-menu for floating popovers (readability)

Browse source 
Floating menus hover over undimmed content (no backdrop scrim like dialogs), so the
frosted .glass (78%) let the content bleed through and hurt readability. Add a near-opaque
.glass-menu (surface 92%, keeps blur) and use it for the account, language, notification
and add-to-playlist popovers. Dialogs/chrome keep the frostier .glass (they sit over a dark
scrim / the ambient bg). perf-mode disables its blur too.
This commit is contained in:
npeter83 2026-06-16 01:39:56 +02:00
parent 0adc1104a3
commit 74491991d7
5 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/index.css
View file

@ -56,6 +56,17 @@ body {
inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
0 8px 22px -14px rgba(0, 0, 0, 0.45);
}
.glass-menu {
/* Floating menus/popovers hover over undimmed content (no backdrop scrim like dialogs),
so they must be near-opaque to stay readable — only a hint of translucency + the blur. */
background: color-mix(in srgb, var(--surface) 92%, 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);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
.glass-hover:hover {
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow:
@ -78,6 +89,7 @@ html[data-theme="dark"] body {
/* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
html[data-perf="1"] .glass,
html[data-perf="1"] .glass-menu,
html[data-perf="1"] .glass-card {
backdrop-filter: none;
-webkit-backdrop-filter: none;