diff --git a/frontend/src/components/AddToPlaylist.tsx b/frontend/src/components/AddToPlaylist.tsx index 3124c97..5260163 100644 --- a/frontend/src/components/AddToPlaylist.tsx +++ b/frontend/src/components/AddToPlaylist.tsx @@ -139,7 +139,7 @@ export default function AddToPlaylist({
e.stopPropagation()} >
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/LanguageSwitcher.tsx index f62a888..62e90cf 100644 --- a/frontend/src/components/LanguageSwitcher.tsx +++ b/frontend/src/components/LanguageSwitcher.tsx @@ -38,7 +38,7 @@ export default function LanguageSwitcher({ {open && (
diff --git a/frontend/src/components/NavSidebar.tsx b/frontend/src/components/NavSidebar.tsx index 9b13173..992a2a0 100644 --- a/frontend/src/components/NavSidebar.tsx +++ b/frontend/src/components/NavSidebar.tsx @@ -143,7 +143,7 @@ export default function NavSidebar({ {acctOpen && ( <>
setAcctOpen(false)} /> -
+
{open && ( -
+
{t("notifications.title")}
{notifications.length > 0 && ( diff --git a/frontend/src/index.css b/frontend/src/index.css index 6d7d27e..ecee970 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -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;