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:
@@ -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' }} />
|
||||
|
||||
@@ -192,7 +192,7 @@ function MoveToSubmenu({ channels, onMove, btnClass, btnStyle }: MoveToSubmenuPr
|
||||
{open && ReactDOM.createPortal(
|
||||
<div
|
||||
ref={flyoutRef}
|
||||
className="fixed z-[210] bg-surface-elevated rounded-md shadow-elevation-high py-1.5 min-w-[160px] overflow-y-auto scrollbar-thin animate-fade-in"
|
||||
className="fixed z-[210] glass rounded-md py-1.5 min-w-[160px] overflow-y-auto scrollbar-thin animate-fade-in"
|
||||
style={{ left: -9999, top: -9999 }}
|
||||
onMouseEnter={cancelCloseTimer}
|
||||
onMouseLeave={startCloseTimer}
|
||||
@@ -291,7 +291,7 @@ export function VoiceUserContextMenu({ targetUserId, channelId, position, onClos
|
||||
return ReactDOM.createPortal(
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="fixed z-[200] bg-surface-elevated rounded-md shadow-elevation-high min-w-[200px] max-h-[calc(100vh-16px)] overflow-y-auto scrollbar-thin animate-fade-in"
|
||||
className="fixed z-[200] glass rounded-md min-w-[200px] max-h-[calc(100vh-16px)] overflow-y-auto scrollbar-thin animate-fade-in"
|
||||
style={{ left: position.x, top: position.y }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
|
||||
Reference in New Issue
Block a user