feat(ui): glassmorphism phase 1 — frost the app chrome
Apply the real frosted .glass surface (blur) to the few large chrome surfaces — the nav sidebar, the header and all Modal-based dialogs (was glass-card / plain surfaces) — and enrich the ambient backdrop a touch (three soft accent pools) so the glass has more to refract app-wide. Popovers (notifications, language, account, add-to-playlist) were already glass. Bulk feed cards stay glass-card (no per-card blur) for performance; the existing perf-mode still disables blur. Phase 2 (ambient thumbnail mosaic / bg image + toggle) deferred to end-of-project polish.
This commit is contained in:
parent
2d54167afd
commit
d46be00d47
4 changed files with 9 additions and 6 deletions
|
|
@ -28,7 +28,7 @@ export default function Header({
|
|||
const { t, i18n } = useTranslation();
|
||||
|
||||
return (
|
||||
<header className="h-14 shrink-0 border-b border-border bg-surface/95 flex items-center gap-3 px-4 z-20">
|
||||
<header className="glass h-14 shrink-0 border-b border-border flex items-center gap-3 px-4 z-20">
|
||||
<SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
|
||||
|
||||
{page === "feed" && (
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default function Modal({
|
|||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
className={`glass-card relative w-full ${maxWidth} max-h-full overflow-y-auto rounded-2xl shadow-2xl`}
|
||||
className={`glass relative w-full ${maxWidth} max-h-full overflow-y-auto rounded-2xl shadow-2xl`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3 p-5 pb-3">
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default function NavSidebar({
|
|||
|
||||
return (
|
||||
<nav
|
||||
className={`relative shrink-0 border-r border-border bg-surface/60 flex flex-col py-3 transition-[width] ${
|
||||
className={`glass relative shrink-0 border-r border-border flex flex-col py-3 transition-[width] ${
|
||||
collapsed ? "w-[56px] px-2" : "w-52 px-3"
|
||||
}`}
|
||||
aria-label={t("nav.primary")}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue