soroushdes/Teamup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glassmorphism: glass sidebar + contrast fixes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/AppShell.tsx
+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">
client/src/index.css
+32 -24
View File
@@ -8,21 +8,21 @@
:root {
--radius: 0.625rem;
/* Glassmorphism body — translucent surfaces over a soft gradient field. */
--background: oklch(0.98 0.006 285);
--foreground: oklch(0.21 0.03 280);
--card: oklch(1 0 0 / 0.6);
--card-foreground: oklch(0.21 0.03 280);
--popover: oklch(1 0 0 / 0.8);
--popover-foreground: oklch(0.21 0.03 280);
/* Glassmorphism body — frosted surfaces over a vivid gradient field. */
--background: oklch(0.95 0.022 286);
--foreground: oklch(0.19 0.03 280);
--card: oklch(1 0 0 / 0.74);
--card-foreground: oklch(0.19 0.03 280);
--popover: oklch(1 0 0 / 0.92);
--popover-foreground: oklch(0.19 0.03 280);
/* Brand: indigo, rationed so it always means something. */
--primary: oklch(0.511 0.262 276.966);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.012 280);
--secondary-foreground: oklch(0.3 0.05 280);
--muted: oklch(0.967 0.006 280);
--muted-foreground: oklch(0.52 0.03 280);
--muted: oklch(0.95 0.01 280 / 0.6);
--muted-foreground: oklch(0.44 0.035 280);
--accent: oklch(0.95 0.03 280);
--accent-foreground: oklch(0.4 0.16 277);
--destructive: oklch(0.577 0.245 27.325);
@@ -57,11 +57,11 @@
body {
margin: 0;
font-family: "Hanken Grotesk Variable", system-ui, sans-serif;
/* Soft gradient field behind the frosted-glass surfaces. */
/* Vivid gradient field behind the frosted-glass surfaces — gives the glass something to lift off. */
background:
radial-gradient(1200px 620px at 8% -8%, oklch(0.7 0.17 290 / 0.20), transparent 60%),
radial-gradient(1000px 700px at 108% 6%, oklch(0.74 0.15 205 / 0.16), transparent 55%),
radial-gradient(900px 640px at 50% 118%, oklch(0.76 0.15 332 / 0.14), transparent 60%),
radial-gradient(1200px 640px at 6% -10%, oklch(0.62 0.2 288 / 0.34), transparent 62%),
radial-gradient(1050px 720px at 112% 4%, oklch(0.7 0.16 210 / 0.27), transparent 58%),
radial-gradient(960px 680px at 48% 122%, oklch(0.72 0.18 334 / 0.22), transparent 62%),
var(--background);
background-attachment: fixed;
min-height: 100vh;
@@ -118,11 +118,11 @@ body {
}
.dark {
--background: oklch(0.19 0.03 285);
--background: oklch(0.17 0.035 287);
--foreground: oklch(0.985 0 0);
--card: oklch(0.28 0.05 285 / 0.5);
--card: oklch(0.31 0.055 286 / 0.62);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.26 0.05 285 / 0.82);
--popover: oklch(0.26 0.05 286 / 0.94);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.673 0.182 276.935);
--primary-foreground: oklch(0.205 0.03 280);
@@ -162,14 +162,14 @@ body {
* Unlayered so they sit above Tailwind utilities; inline styles still win, so the
* gradient Team cards keep their own backgrounds. */
[data-slot="card"] {
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border: 1px solid color-mix(in oklch, white 45%, transparent);
box-shadow: 0 14px 40px -22px oklch(0.35 0.12 285 / 0.55);
backdrop-filter: blur(20px) saturate(155%);
-webkit-backdrop-filter: blur(20px) saturate(155%);
border: 1px solid color-mix(in oklch, white 65%, transparent);
box-shadow: 0 16px 44px -20px oklch(0.32 0.13 285 / 0.42), inset 0 1px 0 0 oklch(1 0 0 / 0.55);
}
.dark [data-slot="card"] {
border-color: color-mix(in oklch, white 12%, transparent);
box-shadow: 0 16px 44px -24px oklch(0 0 0 / 0.6);
border-color: color-mix(in oklch, white 16%, transparent);
box-shadow: 0 18px 48px -22px oklch(0 0 0 / 0.65), inset 0 1px 0 0 oklch(1 0 0 / 0.08);
}
[data-slot="popover-content"],
@@ -207,12 +207,20 @@ body {
border-color: color-mix(in oklch, white 14%, transparent);
}
/* Frosted form fields. */
/* Frosted form fields — kept more opaque than cards so input text stays high-contrast. */
[data-slot="select-trigger"],
[data-slot="input"],
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: color-mix(in oklch, var(--card) 55%, transparent) !important;
background-color: color-mix(in oklch, white 74%, transparent) !important;
border-color: color-mix(in oklch, oklch(0.5 0.04 285) 35%, transparent);
}
.dark [data-slot="select-trigger"],
.dark [data-slot="input"],
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark textarea {
background-color: color-mix(in oklch, oklch(0.32 0.05 286) 82%, transparent) !important;
border-color: color-mix(in oklch, white 16%, transparent);
}