/* ========================================================================== Glass UI Base Scope: Purpose: - Page background behind app - Typography defaults - Scrollbars ========================================================================== */ :root[data-ui="glass"] body { color: var(--text-1); background: transparent; } /* Fixed background layer behind the whole app */ :root[data-ui="glass"] .mud-main-content { position: relative; } :root[data-ui="glass"] .mud-main-content::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--page-bg); } /* Typography defaults */ :root[data-ui="glass"] .mud-typography, :root[data-ui="glass"] .mud-typography-body1, :root[data-ui="glass"] .mud-typography-body2 { color: var(--text-1); } :root[data-ui="glass"] .text-muted { color: var(--text-muted, var(--text-2)) !important; } /* Scrollbars */ :root[data-ui="glass"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-ui="glass"] ::-webkit-scrollbar-track { background: transparent; } :root[data-ui="glass"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3), transparent 55%); border-radius: 999px; } :root[data-ui="glass"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-2), transparent 45%); }