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

Merge feature/glassmorphism-phase1: frosted glass on nav, header, dialogs

Browse source
This commit is contained in:
npeter83 2026-06-16 01:11:50 +02:00
commit 67e518f7ef
4 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,7 +28,7 @@ export default function Header({
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
return ( 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} /> <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
{page === "feed" && ( {page === "feed" && (

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

@ -35,7 +35,7 @@ export default function Modal({
aria-modal="true" aria-modal="true"
> >
<div <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()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex items-start justify-between gap-3 p-5 pb-3"> <div className="flex items-start justify-between gap-3 p-5 pb-3">

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

@ -63,7 +63,7 @@ export default function NavSidebar({
return ( return (
<nav <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" collapsed ? "w-[56px] px-2" : "w-52 px-3"
}`} }`}
aria-label={t("nav.primary")} aria-label={t("nav.primary")}

9
frontend/src/index.css
View file

@ -22,10 +22,13 @@ html {
body { body {
margin: 0; margin: 0;
color: var(--fg); color: var(--fg);
/* Ambient backdrop so translucent "glass" surfaces have soft color to refract. */ /* Ambient backdrop so translucent "glass" surfaces have soft color to refract. Kept
subtle but a touch richer (three soft pools, incl. a bottom glow) now that the nav,
header and dialogs are all frosted glass and refract it. */
background: background:
radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), radial-gradient(1100px 620px at 10% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
radial-gradient(1000px 700px at 112% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), radial-gradient(1000px 720px at 115% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
radial-gradient(900px 640px at 50% 118%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
var(--bg); var(--bg);
background-attachment: fixed; background-attachment: fixed;
} }