Glassmorphism: glass sidebar + contrast fixes

Addresses washed-out contrast and extends glass to the sidebar:
- Deeper, more vivid gradient field so frosted cards lift off the background.
- Cards more opaque (0.74) with crisper borders + inner highlight; darker muted text.
- Frosted form fields kept more opaque than cards so input text stays high-contrast
  (mode-aware light/dark).
- Sidebar is now true dark frosted glass (translucent + backdrop-blur) instead of a
  solid gradient, kept dark enough to keep the white nav text readable.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-15 23:22:07 +03:30
parent 7864d589a4
commit 6ad994b1b7
2 changed files with 34 additions and 26 deletions
+2 -2
View File
@@ -29,8 +29,8 @@ export function AppShell({ children }: { children: ReactNode }) {
return (
<div className="flex min-h-screen text-foreground">
<aside
className="flex w-60 shrink-0 flex-col border-r border-white/10 text-sidebar-foreground backdrop-blur-xl"
style={{ background: 'linear-gradient(180deg, oklch(0.29 0.11 286) 0%, oklch(0.22 0.09 296) 100%)' }}
className="flex w-60 shrink-0 flex-col border-r border-white/15 text-sidebar-foreground backdrop-blur-2xl"
style={{ background: 'linear-gradient(180deg, oklch(0.27 0.1 287 / 0.78) 0%, oklch(0.2 0.085 298 / 0.78) 100%)' }}
>
<div className="flex items-center gap-3 px-5 py-4">
<span className="grid size-8 place-items-center rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground">