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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user