feat: unified glass material system for all floating surfaces

Add .glass-modal CSS class (0.82 opacity) for dialogs and apply
consistent glass tiers across all floating UI: modals, context menus,
tooltips, popovers, and call cards. Replaces ad-hoc bg-surface-elevated
and inline styles with the documented 5-tier glass hierarchy.
This commit is contained in:
Jannis Braun
2026-03-11 22:48:11 +01:00
parent 7572f165de
commit 87e3d34638
12 changed files with 190 additions and 34 deletions
@@ -51,10 +51,10 @@ export function IncomingCallModal() {
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center">
{/* Backdrop */}
<div className="absolute inset-0 bg-black/60" />
<div className="absolute inset-0 bg-black/50" />
{/* Call card */}
<div className="relative bg-surface-channel rounded-lg shadow-2xl w-[340px] overflow-hidden">
<div className="relative glass-modal rounded-lg w-[340px] overflow-hidden">
{/* Ring animation background */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200px] h-[200px] rounded-full bg-status-online/5 animate-ping" style={{ animationDuration: '2s' }} />