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

Glassmorphism polish: frosted pills + glass sidebar nav states

Browse Source 
Neutral badges become frosted (translucent + blur), the primary badge picks up the
gradient, and the sidebar nav active/hover states are now a frosted white highlight
(ring + blur) instead of the opaque accent — cohesive on the dark-glass sidebar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-15 23:32:05 +03:30
parent 6ad994b1b7
commit 20a1a0dee4
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/index.css
+17
View File
@@ -224,3 +224,20 @@ 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);
}
/* Pills: frosted for neutral variants, gradient for the primary one. */
[data-slot="badge"][data-variant="secondary"],
[data-slot="badge"][data-variant="outline"] {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background-color: color-mix(in oklch, white 58%, transparent);
border-color: color-mix(in oklch, white 55%, transparent);
}
.dark [data-slot="badge"][data-variant="secondary"],
.dark [data-slot="badge"][data-variant="outline"] {
background-color: color-mix(in oklch, white 12%, transparent);
border-color: color-mix(in oklch, white 16%, transparent);
}
[data-slot="badge"][data-variant="default"] {
background-image: linear-gradient(135deg, oklch(0.58 0.24 277), oklch(0.56 0.25 305));
}