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 41cdc85051
commit 2442e462c4
5 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -139,7 +139,7 @@ export default function AddToPlaylist({
<div
ref={panelRef}
style={{ position: "fixed", top: coords.top, left: coords.left, width: 240 }}
className="z-50 glass rounded-xl p-2 shadow-2xl"
className="z-50 glass-menu rounded-xl p-2 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
<div className="text-xs text-muted px-1.5 pb-1.5">

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

@ -38,7 +38,7 @@ export default function LanguageSwitcher({
{open && (
<div
className={`glass absolute ${
className={`glass-menu absolute ${
align === "right" ? "right-0" : "left-0"
} mt-1 w-40 rounded-xl p-1.5 z-40 animate-[popIn_0.16s_ease]`}
>

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

@ -143,7 +143,7 @@ export default function NavSidebar({
{acctOpen && (
<>
<div className="fixed inset-0 z-20" onClick={() => setAcctOpen(false)} />
<div className="glass absolute left-full bottom-0 ml-2 w-60 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
<div className="glass-menu absolute left-full bottom-0 ml-2 w-60 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
<div className="flex items-center gap-3 pb-3 border-b border-border">
<AvatarImg
src={me.avatar_url}

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

@ -97,7 +97,7 @@ export default function NotificationCenter({
</button>
{open && (
<div className="glass absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl z-30 flex flex-col max-h-[70vh] animate-[popIn_0.16s_ease]">
<div className="glass-menu absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl z-30 flex flex-col max-h-[70vh] animate-[popIn_0.16s_ease]">
<div className="flex items-center justify-between px-3 py-2 border-b border-border">
<div className="text-sm font-semibold">{t("notifications.title")}</div>
{notifications.length > 0 && (

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;