devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: reaction pill frosted glass + compact sizing to match prototype

Browse Source 
Replace inline JS hover handlers with .glass-pill CSS classes for proper
Aether Drift frosted glass depth (blur, inset highlight, box-shadow).
Constrain emoji size and use exact prototype padding (2px 8px) for compact pills.
This commit is contained in:
Jannis Braun
2026-03-02 15:55:42 +01:00
parent cdee450cf5
commit 9491edb3c9
2 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/styles/globals.css
+26
View File
@@ -152,6 +152,27 @@
0 8px 24px rgba(0, 0, 0, 0.12),
inset 0 1px 0 var(--glass-highlight);
}
/* Reaction pill glass — lighter blur for small inline elements */
.glass-pill {
backdrop-filter: blur(12px) saturate(110%);
-webkit-backdrop-filter: blur(12px) saturate(110%);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.glass-pill:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.14);
}
.glass-pill-mine {
background: rgba(134, 239, 172, 0.10);
border-color: rgba(134, 239, 172, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(134, 239, 172, 0.06);
}
.glass-pill-mine:hover {
background: rgba(134, 239, 172, 0.16);
}
}
/* Accessibility: fall back to solid surfaces when transparency is reduced */
@@ -172,6 +193,11 @@
-webkit-backdrop-filter: none;
background: var(--bg-elevated);
}
.glass-pill {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--bg-elevated);
}
}
@layer utilities {