/* ================================================================ Loki UI · glass-overlay.css · v glass-1 Pure glassmorphism layer, loaded AFTER custom.css to win specificity. Activates only when has class "glass" (added by glass-init.js). ================================================================ */ /* ---------------------------------------------------------------- §1 — Glass design tokens (override deep violet → cool aurora) ---------------------------------------------------------------- */ body.glass { /* Aurora background gradients (multi-layer for real depth) */ --g-bg-base: #07071a; --g-bg-grad-1: radial-gradient(ellipse 80% 60% at 12% 8%, rgba(124, 92, 255, .55) 0%, transparent 55%); --g-bg-grad-2: radial-gradient(ellipse 70% 55% at 88% 12%, rgba( 0, 212, 255, .45) 0%, transparent 55%); --g-bg-grad-3: radial-gradient(ellipse 75% 60% at 50% 95%, rgba(255, 92, 214, .40) 0%, transparent 55%); --g-bg-grad-4: radial-gradient(ellipse 60% 50% at 92% 88%, rgba( 94, 234, 212, .35) 0%, transparent 55%); --g-bg-noise: url("data:image/svg+xml;utf8,"); /* Glass surface levels */ --g-surface-1: rgba(255, 255, 255, .035); /* shell */ --g-surface-2: rgba(255, 255, 255, .055); /* panels */ --g-surface-3: rgba(255, 255, 255, .085); /* tiles, inputs */ --g-surface-hi: rgba(255, 255, 255, .115); /* hover/active */ --g-surface-sel: rgba(124, 92, 255, .220); /* selected accent */ --g-border-soft: rgba(255, 255, 255, .10); --g-border: rgba(255, 255, 255, .16); --g-border-hi: rgba(255, 255, 255, .26); --g-shadow-1: 0 4px 16px 0 rgba(7, 6, 28, .35); --g-shadow-2: 0 8px 32px 0 rgba(7, 6, 28, .45), inset 0 1px 0 rgba(255, 255, 255, .07); --g-shadow-3: 0 16px 48px 0 rgba(7, 6, 28, .55), inset 0 1px 0 rgba(255, 255, 255, .10); --g-glow-accent: 0 0 32px rgba(124, 92, 255, .45); --g-glow-cyan: 0 0 32px rgba( 0, 212, 255, .40); /* Aurora accent */ --g-accent: #7c5cff; --g-accent-hi: #a48bff; --g-accent-2: #00d4ff; --g-accent-3: #ff5cd6; --g-accent-4: #5eead4; /* Text */ --g-text: #f5f3ff; --g-text-muted: rgba(245, 243, 255, .72); --g-text-dim: rgba(245, 243, 255, .48); /* Bubbles */ --g-bubble-in-bg: rgba(255, 255, 255, .07); --g-bubble-in-border: rgba(255, 255, 255, .14); --g-bubble-out-bg: linear-gradient(135deg, rgba(124, 92, 255, .55), rgba( 0, 212, 255, .45)); --g-bubble-out-border: rgba(255, 255, 255, .22); --g-blur: blur(28px) saturate(160%); --g-blur-strong: blur(40px) saturate(180%); --g-blur-soft: blur(14px) saturate(140%); --g-r: 18px; --g-r-sm: 12px; --g-r-lg: 24px; } /* Map glass tokens onto Loki design tokens used in custom.css */ body.glass.tg { --p-bg: var(--g-bg-base); --p-shell: var(--g-bg-base); --p-panel: var(--g-surface-2); --p-panel2: var(--g-surface-3); --p-border: var(--g-border); --p-bg-layer-1: var(--g-bg-grad-1); --p-bg-layer-2: var(--g-bg-grad-2); --p-bg-layer-3: var(--g-bg-grad-3); --p-panel-glow: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%); --p-tile-glow: linear-gradient(135deg, rgba(255,255,255,.05), transparent 60%); --p-in-bg: var(--g-bubble-in-bg); --p-in-border: var(--g-bubble-in-border); --p-out-bg1: rgba(124, 92, 255, .55); --p-out-bg2: rgba( 0, 212, 255, .45); --p-out-border: var(--g-bubble-out-border); --p-accent: var(--g-accent); --p-acc2: var(--g-accent-2); --p-text: var(--g-text); --p-muted: var(--g-text-muted); --p-dim: var(--g-surface-1); --p-hover: var(--g-surface-hi); --p-selected: var(--g-surface-sel); --p-selected-border: var(--g-border-hi); --p-glow: rgba(124, 92, 255, .35); --p-selection: rgba(124, 92, 255, .35); --p-r: var(--g-r); --p-r-sm: var(--g-r-sm); } /* ---------------------------------------------------------------- §2 — Background: aurora + grain ---------------------------------------------------------------- */ body.glass { background: var(--g-bg-base) !important; color: var(--g-text) !important; } body.glass::before { background: var(--g-bg-grad-1), var(--g-bg-grad-2), var(--g-bg-grad-3), var(--g-bg-grad-4), linear-gradient(180deg, #050518, #0a0726 60%, #0e0735) !important; background-attachment: fixed !important; opacity: 1 !important; } body.glass::after { background: var(--g-bg-noise), radial-gradient(circle at 50% -10%, rgba(255,255,255,.06), transparent 45%) !important; mix-blend-mode: overlay !important; opacity: .55 !important; } /* RoomView background must be transparent so aurora shows through */ body.glass .mx_RoomView, body.glass .mx_RoomView_body, body.glass .mx_MatrixChat, body.glass .mx_MatrixChat_wrapper, body.glass .mx_LeftPanel, body.glass .mx_RoomList, body.glass .mx_SpacePanel, body.glass .mx_RightPanel, body.glass .mx_MainSplit { background: transparent !important; } /* ---------------------------------------------------------------- §3 — Glass panels everywhere ---------------------------------------------------------------- */ body.glass .mx_LeftPanel, body.glass .mx_SpacePanel, body.glass .mx_RightPanel { background: var(--g-surface-1) !important; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); border-right: 1px solid var(--g-border-soft) !important; } body.glass .mx_RightPanel { border-right: none !important; border-left: 1px solid var(--g-border-soft) !important; } /* RoomList tiles glassy */ body.glass .mx_RoomTile, body.glass .mx_RoomSublist, body.glass .mx_RoomSublist_tiles { background: transparent !important; } body.glass .mx_RoomTile { border-radius: var(--g-r-sm) !important; margin: 2px 6px !important; padding: 6px 10px !important; transition: background .18s ease, transform .15s ease, box-shadow .18s ease; } body.glass .mx_RoomTile:hover { background: var(--g-surface-hi) !important; backdrop-filter: var(--g-blur-soft); -webkit-backdrop-filter: var(--g-blur-soft); box-shadow: var(--g-shadow-1); } body.glass .mx_RoomTile_selected, body.glass .mx_RoomTile.mx_RoomTile_selected { background: linear-gradient(135deg, rgba(124,92,255,.30), rgba(0,212,255,.18)) !important; border: 1px solid var(--g-border-hi) !important; box-shadow: var(--g-shadow-2), 0 0 0 1px rgba(124,92,255,.20) inset !important; } /* Header bars */ body.glass .mx_LegacyRoomHeader, body.glass .mx_RoomHeader, body.glass .mx_LeftPanel_filterContainer, body.glass .mx_LeftPanel_userHeader { background: var(--g-surface-2) !important; backdrop-filter: var(--g-blur-strong) !important; -webkit-backdrop-filter: var(--g-blur-strong) !important; border-bottom: 1px solid var(--g-border-soft) !important; } /* Composer */ body.glass .mx_MessageComposer, body.glass .mx_BasicMessageComposer_input { background: var(--g-surface-3) !important; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); border: 1px solid var(--g-border) !important; border-radius: var(--g-r) !important; margin: 8px 16px !important; box-shadow: var(--g-shadow-2); } body.glass .mx_MessageComposer:focus-within, body.glass .mx_BasicMessageComposer_input:focus-within { border-color: rgba(124, 92, 255, .55) !important; box-shadow: var(--g-shadow-2), var(--g-glow-accent) !important; } /* Buttons in header / composer */ body.glass button, body.glass .mx_AccessibleButton { transition: background .15s ease, box-shadow .15s ease, transform .12s ease !important; } body.glass .mx_AccessibleButton:hover { background: var(--g-surface-hi) !important; } /* ---------------------------------------------------------------- §4 — Bubbles: glass on incoming, gradient on outgoing ---------------------------------------------------------------- */ body.glass .tg-bubble, body.glass .mx_EventTile[data-tg-side=in] .mx_EventTile_line, body.glass .mx_EventTile[data-tg-side=out] .mx_EventTile_line { border-radius: var(--g-r) !important; box-shadow: var(--g-shadow-2); border: 1px solid var(--g-border-soft) !important; } body.glass .mx_EventTile[data-tg-side=in] .mx_EventTile_line, body.glass [data-tg-side=in] .tg-bubble { background: var(--g-bubble-in-bg) !important; backdrop-filter: var(--g-blur) !important; -webkit-backdrop-filter: var(--g-blur) !important; border: 1px solid var(--g-bubble-in-border) !important; } body.glass .mx_EventTile[data-tg-side=out] .mx_EventTile_line, body.glass [data-tg-side=out] .tg-bubble { background: var(--g-bubble-out-bg) !important; backdrop-filter: var(--g-blur-soft) !important; -webkit-backdrop-filter: var(--g-blur-soft) !important; border: 1px solid var(--g-bubble-out-border) !important; color: #ffffff !important; } body.glass .mx_EventTile[data-tg-side=out] .mx_EventTile_line:hover { box-shadow: var(--g-shadow-3), var(--g-glow-accent); transform: translateY(-1px); } /* Attached images / files in bubbles */ body.glass .mx_MImageBody img, body.glass .mx_MFileBody { border-radius: var(--g-r-sm) !important; box-shadow: var(--g-shadow-1); } /* Reaction chips */ body.glass .mx_ReactionsRow_button, body.glass .mx_ReactionsRow .mx_AccessibleButton { background: var(--g-surface-3) !important; backdrop-filter: var(--g-blur-soft); -webkit-backdrop-filter: var(--g-blur-soft); border: 1px solid var(--g-border-soft) !important; border-radius: 999px !important; } /* ---------------------------------------------------------------- §5 — Modals, menus, tooltips ---------------------------------------------------------------- */ body.glass .mx_Dialog, body.glass .mx_ContextualMenu, body.glass .mx_Tooltip, body.glass .mx_GenericDialog, body.glass .mx_QRCode, body.glass .mx_UserSettingsDialog, body.glass .mx_RoomSettingsDialog, body.glass .mx_PreferencesUserSettingsTab, body.glass .mx_TabbedView_tabsContainer { background: rgba(15, 12, 38, .72) !important; backdrop-filter: var(--g-blur-strong) !important; -webkit-backdrop-filter: var(--g-blur-strong) !important; border: 1px solid var(--g-border) !important; border-radius: var(--g-r-lg) !important; box-shadow: var(--g-shadow-3) !important; } body.glass .mx_Dialog_background, body.glass .mx_AppTile_persistedWrapper_overlay { background: rgba(7, 6, 28, .55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Inputs in dialogs */ body.glass input[type=text], body.glass input[type=password], body.glass input[type=email], body.glass input[type=search], body.glass textarea, body.glass .mx_Field input, body.glass .mx_Field select { background: var(--g-surface-2) !important; border: 1px solid var(--g-border-soft) !important; color: var(--g-text) !important; border-radius: var(--g-r-sm) !important; } body.glass input:focus, body.glass textarea:focus, body.glass .mx_Field input:focus { border-color: var(--g-accent) !important; box-shadow: var(--g-glow-accent) !important; outline: none !important; } /* Primary buttons */ body.glass .mx_AccessibleButton_kind_primary, body.glass button.mx_AccessibleButton_kind_primary { background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2)) !important; border: 1px solid var(--g-border-hi) !important; color: #ffffff !important; border-radius: var(--g-r-sm) !important; box-shadow: var(--g-shadow-2), var(--g-glow-accent) !important; } body.glass .mx_AccessibleButton_kind_primary:hover { filter: brightness(1.10); box-shadow: var(--g-shadow-3), var(--g-glow-accent), var(--g-glow-cyan) !important; } /* Secondary buttons */ body.glass .mx_AccessibleButton_kind_secondary, body.glass .mx_AccessibleButton_kind_link { background: var(--g-surface-3) !important; border: 1px solid var(--g-border-soft) !important; color: var(--g-text) !important; border-radius: var(--g-r-sm) !important; } /* ---------------------------------------------------------------- §6 — Login / welcome page ---------------------------------------------------------------- */ /* Element ships an inline `style="background: url(lake.jpg)"` on .mx_AuthPage AND on .mx_AuthPage_modalBlur — both must be killed. Inline styles need !important + max specificity. */ body.glass div.mx_AuthPage, body.glass div.mx_AuthPage[style] { background: var(--g-bg-grad-1), var(--g-bg-grad-2), var(--g-bg-grad-3), var(--g-bg-grad-4), linear-gradient(160deg, #06061a, #0d082c 50%, #160a36) !important; background-attachment: fixed !important; } body.glass div.mx_AuthPage_modalBlur, body.glass div.mx_AuthPage_modalBlur[style] { background: transparent !important; filter: none !important; display: none !important; } body.glass .mx_AuthPage_modal, body.glass .mx_AuthPage_modal[style], body.glass .mx_AuthPage_modal_withBlur, body.glass .mx_AuthPage_modalContent { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Welcome card (real Element class is .mx_Parent inside .mx_WelcomePage_body) */ body.glass .mx_Parent, body.glass .mx_WelcomePage, body.glass .mx_WelcomePage_body, body.glass .mx_Welcome .mx_AuthBody, body.glass .mx_Welcome_body, body.glass .mx_AuthBody, body.glass .mx_AuthBody_modifierClass, body.glass .mx_Login_form { background: var(--g-surface-2) !important; backdrop-filter: var(--g-blur-strong) !important; -webkit-backdrop-filter: var(--g-blur-strong) !important; border: 1px solid var(--g-border) !important; border-radius: var(--g-r-lg) !important; box-shadow: var(--g-shadow-3) !important; color: var(--g-text) !important; } body.glass .mx_WelcomePage, body.glass .mx_WelcomePage_body { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.glass .mx_Parent { padding: clamp(20px, 4vw, 48px) clamp(20px, 5vw, 64px) !important; width: min(560px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; margin: clamp(16px, 6vh, 80px) auto !important; box-sizing: border-box !important; text-align: center; } body.glass .mx_Parent .mx_Header_title { font-size: 32px !important; font-weight: 700 !important; letter-spacing: -.02em !important; margin-top: 16px !important; background: linear-gradient(135deg, #f5f3ff, var(--g-accent-hi) 60%, var(--g-accent-2)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* Upstream Element appends ::after { content: "!" } to the welcome heading. Strip it so the brand reads cleanly as "Loki Talk", not "Loki Talk!". */ body.glass .mx_Parent .mx_Header_title::after, body.glass .mx_Parent .mx_Header_title::before { content: '' !important; display: none !important; } body.glass .mx_Parent .mx_Header_subtitle { color: var(--g-text-muted) !important; font-size: 15px !important; margin: 8px 0 28px !important; font-weight: 400 !important; } /* Hide upstream Element logo on welcome – we render our own brand text */ body.glass .mx_Parent .mx_Logo, body.glass img.mx_Logo { display: none !important; } /* Welcome buttons (.mx_ButtonParent + variants) — anchor based, look like glass pills */ body.glass .mx_ButtonRow { display: flex !important; gap: 14px !important; justify-content: center !important; margin-top: 12px !important; } body.glass .mx_ButtonParent { background: var(--g-surface-3) !important; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); border: 1px solid var(--g-border) !important; border-radius: 999px !important; padding: 12px 22px !important; color: var(--g-text) !important; text-decoration: none !important; font-weight: 600 !important; transition: transform .12s ease, box-shadow .15s ease, background .18s ease !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: var(--g-shadow-1) !important; } body.glass .mx_ButtonParent:hover { transform: translateY(-1px); box-shadow: var(--g-shadow-2), var(--g-glow-accent) !important; } /* Primary: Sign In gets the aurora gradient */ body.glass .mx_ButtonSignIn { background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2)) !important; border: 1px solid var(--g-border-hi) !important; color: #fff !important; box-shadow: var(--g-shadow-2), var(--g-glow-accent) !important; } /* Accent: Create Account — pink/violet */ body.glass .mx_ButtonCreateAccount { background: linear-gradient(135deg, var(--g-accent-3), var(--g-accent)) !important; border: 1px solid var(--g-border-hi) !important; color: #fff !important; box-shadow: var(--g-shadow-2), 0 0 24px rgba(255, 92, 214, .35) !important; } body.glass .mx_SecondaryButton { background: var(--g-surface-3) !important; border: 1px solid var(--g-border-soft) !important; color: var(--g-text-muted) !important; } /* Left auth header column (logo half) on login: keep glassy, not solid black */ body.glass .mx_AuthHeader, body.glass .mx_AuthPage_modal > .mx_AuthHeader { background: var(--g-surface-1) !important; backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); border-right: 1px solid var(--g-border-soft) !important; } /* Logo glow */ body.glass .mx_AuthHeader_logo, body.glass .mx_AuthHeader_logo img, body.glass .mx_Welcome_logo, body.glass .mx_Welcome_logo img { filter: drop-shadow(0 0 22px rgba(124, 92, 255, .55)) drop-shadow(0 0 12px rgba( 0, 212, 255, .35)); } /* Hide marketing footer on auth/welcome pages */ body.glass .mx_AuthFooter, body.glass .mx_Welcome footer, body.glass .mx_Welcome .mx_AuthFooter { display: none !important; } /* PRIMARY ACTION buttons inside auth (Sign in / Create Account / Continue) — the bare