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

Glassmorphism + gradient theme migration (app-wide)

Browse Source 
Central restyle keyed on shadcn data-slots so all 13 pages inherit it without edits:
a soft gradient field on the body, frosted-glass surfaces (translucent --card/--popover
+ backdrop-blur + hairline borders) on cards, popovers, selects, sheets, and form fields,
gradient primary buttons with glass secondary/outline, and a gradient + blurred sidebar.
The content area is transparent so the gradient shows behind the glass. Inline-styled
gradient cards (Team view) are unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-15 23:12:16 +03:30
parent 612ae71058
commit 7864d589a4
2 changed files with 80 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/index.css
+75 -8
View File
@@ -8,12 +8,12 @@
:root {
--radius: 0.625rem;
/* Light content surface — the "calm command center" body. */
--background: oklch(0.99 0.003 280);
/* 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);
--card: oklch(1 0 0 / 0.6);
--card-foreground: oklch(0.21 0.03 280);
--popover: oklch(1 0 0);
--popover: oklch(1 0 0 / 0.8);
--popover-foreground: oklch(0.21 0.03 280);
/* Brand: indigo, rationed so it always means something. */
@@ -57,6 +57,14 @@
body {
margin: 0;
font-family: "Hanken Grotesk Variable", system-ui, sans-serif;
/* Soft gradient field behind the frosted-glass surfaces. */
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%),
var(--background);
background-attachment: fixed;
min-height: 100vh;
}
@theme inline {
@@ -110,11 +118,11 @@ body {
}
.dark {
--background: oklch(0.205 0.03 280);
--background: oklch(0.19 0.03 285);
--foreground: oklch(0.985 0 0);
--card: oklch(0.257 0.04 281);
--card: oklch(0.28 0.05 285 / 0.5);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.257 0.04 281);
--popover: oklch(0.26 0.05 285 / 0.82);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.673 0.182 276.935);
--primary-foreground: oklch(0.205 0.03 280);
@@ -143,9 +151,68 @@ body {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
@apply text-foreground;
}
html {
@apply font-sans;
}
}
/* ---- Glassmorphism + gradients (app-wide, keyed on shadcn data-slots) ----
* 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);
}
.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);
}
[data-slot="popover-content"],
[data-slot="select-content"],
[data-slot="dropdown-menu-content"],
[data-slot="sheet-content"] {
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid color-mix(in oklch, white 40%, transparent);
}
.dark [data-slot="popover-content"],
.dark [data-slot="select-content"],
.dark [data-slot="dropdown-menu-content"],
.dark [data-slot="sheet-content"] {
border-color: color-mix(in oklch, white 12%, transparent);
}
/* Primary actions become a gradient; secondary/outline become glass. */
[data-slot="button"][data-variant="default"] {
background-image: linear-gradient(135deg, oklch(0.58 0.24 277) 0%, oklch(0.56 0.25 305) 100%);
box-shadow: 0 8px 20px -10px oklch(0.5 0.23 288 / 0.7);
}
[data-slot="button"][data-variant="default"]:hover {
background-image: linear-gradient(135deg, oklch(0.62 0.24 277) 0%, oklch(0.6 0.25 305) 100%);
}
[data-slot="button"][data-variant="outline"],
[data-slot="button"][data-variant="secondary"] {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: color-mix(in oklch, var(--card) 65%, transparent);
border: 1px solid color-mix(in oklch, white 40%, transparent);
}
.dark [data-slot="button"][data-variant="outline"],
.dark [data-slot="button"][data-variant="secondary"] {
border-color: color-mix(in oklch, white 14%, transparent);
}
/* Frosted form fields. */
[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;
}