fix(ui): opacity-based frosted glass; drop full-page settings blur
Evidence (sharp video behind overlays) shows backdrop-filter is a no-op here, most likely because browser hardware acceleration is off — so the glass relied on a blur that never rendered. Lean on opacity instead (94% surface) so overlay menus/panels read as frosted glass regardless of GPU; keep the blur as a bonus when available. Revert the settings backdrop to a plain dim scrim (no whole-page blur) and make the header a solid bar (no backdrop-filter ancestor).
This commit is contained in:
parent
a6a1052d30
commit
65f687c9cd
3 changed files with 10 additions and 8 deletions
|
|
@ -26,7 +26,7 @@ export default function Header({
|
|||
}
|
||||
|
||||
return (
|
||||
<header className="h-14 shrink-0 border-b border-border bg-surface/80 backdrop-blur flex items-center gap-3 px-4 z-20">
|
||||
<header className="h-14 shrink-0 border-b border-border bg-surface/95 flex items-center gap-3 px-4 z-20">
|
||||
<button
|
||||
onClick={() => setPage("feed")}
|
||||
className="text-xl font-bold tracking-tight select-none"
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default function SettingsPanel({
|
|||
return (
|
||||
<div className="fixed inset-0 z-40 flex justify-end">
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/30 backdrop-blur-lg ${
|
||||
className={`absolute inset-0 bg-black/50 ${
|
||||
closing ? "animate-[overlayOut_0.19s_ease_forwards]" : "animate-[overlayIn_0.2s_ease]"
|
||||
}`}
|
||||
onClick={close}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue