/* * glass-theme.css — Premium Glass Mode * Scope: html.theme-glass (all rules scoped inside this class) * Layer: additive — zero existing styles modified. * Toggle: add/remove class="theme-glass" on . */ /* ── Token Foundation ─────────────────────────────────── */ :root.theme-glass { color-scheme: dark; /* Glass material */ --glass-bg: rgba(255,255,255,.05); --glass-bg-hover: rgba(255,255,255,.08); --glass-bg-strong: rgba(255,255,255,.09); --glass-bg-sunken: rgba(0,0,0,.22); --glass-border: rgba(255,255,255,.10); --glass-border-strong: rgba(255,255,255,.18); --glass-blur: blur(14px); --glass-blur-heavy: blur(24px); --glass-highlight: inset 0 1px 0 rgba(255,255,255,.06); /* Text */ --text-primary: rgba(255,255,255,.92); --text-secondary: rgba(255,255,255,.62); --text-tertiary: rgba(255,255,255,.44); --text-muted: rgba(255,255,255,.30); --text-inverse: rgba(0,0,0,.88); --text-link: var(--accent-400); --text-accent: var(--accent-400); /* Surfaces — neutral charcoal, no purple tint */ --bg-app: rgb(10,10,13); --bg-surface: rgba(255,255,255,.05); --bg-elevated: rgba(255,255,255,.09); --bg-sunken: rgba(0,0,0,.22); --bg-header: rgba(10,10,13,.55); --bg-sidebar: rgba(6,6,9,.82); /* Borders */ --border-default: rgba(255,255,255,.10); --border-subtle: rgba(255,255,255,.06); --border-grid: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.18); --border-focus: rgba(255,255,255,.45); /* Shadows — minimal, no heavy depth */ --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 2px 12px rgba(0,0,0,.16); --shadow-lg: 0 4px 24px rgba(0,0,0,.20); --shadow-xl: 0 8px 32px rgba(0,0,0,.24); --shadow-2xl: 0 16px 48px rgba(0,0,0,.28); --shadow-inner: inset 0 1px 2px rgba(0,0,0,.14); --shadow-focus: 0 0 0 2px rgba(255,255,255,.20); --shadow-focus-accent: 0 0 0 2px rgba(255,255,255,.20); --shadow-card: 0 0 0 1px var(--glass-border), var(--glass-highlight); --shadow-card-hover: 0 0 0 1px var(--glass-border-strong), var(--glass-highlight); /* Remap gray palette → glass hover values (auto-propagates to dropdowns, btn-ghost, etc.) */ --gray-0: rgba(255,255,255,.02); --gray-25: rgba(255,255,255,.03); --gray-50: rgba(255,255,255,.05); --gray-75: rgba(255,255,255,.07); --gray-100: rgba(255,255,255,.09); --gray-150: rgba(255,255,255,.10); --gray-200: rgba(255,255,255,.12); --gray-300: rgba(255,255,255,.22); /* Semantic status — adapted for dark glass */ --success-50: rgba(16,185,129,.10); --success-100: rgba(16,185,129,.16); --warning-50: rgba(234,179,8,.10); --warning-100: rgba(234,179,8,.16); --danger-50: rgba(239,68,68,.10); --danger-100: rgba(239,68,68,.16); --info-50: rgba(59,130,246,.10); --info-100: rgba(59,130,246,.16); --primary-50: rgba(255,255,255,.04); --primary-100: rgba(255,255,255,.07); } /* ── Document base ─────────────────────────────────────── */ /* Neutralize the animated purple radial-gradient from [data-mode=glass] */ .theme-glass body::before { background: none; animation: none; } .theme-glass body { background-color: var(--bg-app); } .theme-glass .app-main-area, .theme-glass .page-container { background: transparent; } .theme-glass ::-webkit-scrollbar-track { background: transparent; } .theme-glass ::-webkit-scrollbar-thumb { background: var(--glass-border); border-color: transparent; } .theme-glass ::-webkit-scrollbar-thumb:hover { background: var(--glass-border-strong); } .theme-glass ::selection { background: var(--glass-bg-hover); color: var(--text-primary); } /* ── Sidebar ───────────────────────────────────────────── */ /* layout-components.css uses hardcoded #16181c — override required */ .theme-glass .app-sidebar { background: var(--bg-sidebar); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-left-color: var(--glass-border); } .theme-glass .sidebar-header { border-bottom-color: var(--glass-border); } .theme-glass .sidebar-footer { border-top-color: var(--glass-border); } .theme-glass .nav-section-title { color: var(--text-muted); } .theme-glass .nav-item { color: var(--text-secondary); } .theme-glass .nav-item:hover { background: var(--glass-bg-hover); color: var(--text-primary); } .theme-glass .nav-item.active { background: var(--glass-bg-hover); color: var(--text-primary); } .theme-glass .nav-item.active::before { background: var(--accent-500); } .theme-glass .nav-item-icon { opacity: .55; } .theme-glass .nav-item:hover .nav-item-icon, .theme-glass .nav-item.active .nav-item-icon { opacity: 1; } /* Sidebar badges (hardcoded rgba in layout-components.css) */ .theme-glass .nav-item-badge { background: var(--glass-bg-hover); color: var(--text-secondary); } .theme-glass .nav-item-badge--danger { background: var(--danger-100); color: var(--danger-400); } .theme-glass .nav-item-badge--warn { background: var(--warning-100); color: var(--warning-500); } .theme-glass .nav-item-badge--accent { background: var(--primary-100); color: var(--accent-400); } .theme-glass .sidebar-toggle-btn { color: var(--text-muted); } .theme-glass .sidebar-toggle-btn:hover { background: var(--glass-bg); color: var(--text-secondary); } .theme-glass .sidebar-palette-btn { color: var(--text-muted); } .theme-glass .sidebar-palette-btn:hover { background: var(--glass-bg); color: var(--text-secondary); } .theme-glass .nav-item-sub { color: var(--text-muted); } /* ── Header ────────────────────────────────────────────── */ .theme-glass .app-header { backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-bottom-color: var(--glass-border); } .theme-glass .header-search-input { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } .theme-glass .header-search-input::placeholder { color: var(--text-muted); } .theme-glass .header-search-input:focus { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); box-shadow: var(--shadow-focus); width: 320px; } .theme-glass .header-action-btn { color: var(--text-tertiary); } .theme-glass .header-action-btn:hover { background: var(--glass-bg); color: var(--text-primary); } .theme-glass .header-action-btn:active { background: var(--glass-bg-hover); } .theme-glass .header-new-btn { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); } .theme-glass .header-new-btn:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); box-shadow: none; } .theme-glass .header-user:hover { background: var(--glass-bg); } /* ── Cards & panels ────────────────────────────────────── */ /* Token overrides handle fill + border + shadow automatically. Only backdrop-filter needs explicit CSS (can't be a token). */ .theme-glass .card { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .theme-glass .card:hover { transform: none; } /* glass stays flat */ .theme-glass .card-header { border-bottom-color: var(--glass-border); } .theme-glass .card-footer { border-top-color: var(--glass-border); } .theme-glass .ds-card { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .theme-glass .ds-card:hover { transform: none; } .theme-glass .ds-sticky-header { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-border); } /* Stat icons */ .theme-glass .stat-icon.primary { background: var(--primary-50); color: var(--navy-400); } .theme-glass .stat-icon.accent { background: var(--warning-50); color: var(--gold-400); } .theme-glass .stat-icon.success { background: var(--success-50); color: var(--emerald-400); } .theme-glass .stat-icon.info { background: var(--info-50); color: var(--info-400); } .theme-glass .stat-change.up { background: var(--success-50); color: var(--emerald-400); } .theme-glass .stat-change.down { background: var(--danger-50); color: var(--danger-400); } /* ── Buttons ───────────────────────────────────────────── */ /* Primary keeps navy gradient, just removes shadows */ .theme-glass .btn-primary, .theme-glass .btn-primary:hover { box-shadow: none; } .theme-glass .btn-secondary { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: none; } .theme-glass .btn-secondary:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); box-shadow: none; } .theme-glass .btn-ghost { color: var(--text-secondary); } .theme-glass .btn-ghost:hover { background: var(--glass-bg); color: var(--text-primary); } .theme-glass .btn-accent, .theme-glass .btn-accent:hover, .theme-glass .btn-success, .theme-glass .btn-success:hover { box-shadow: none; } .theme-glass .btn-danger-ghost:hover { background: var(--danger-50); } .theme-glass .btn-danger-outline { border-color: var(--danger-100); color: var(--danger-400); } .theme-glass .btn-danger-outline:hover { background: var(--danger-50); border-color: var(--danger-100); } .theme-glass .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ── Form controls ─────────────────────────────────────── */ .theme-glass .form-input, .theme-glass :is(input[type="text"],input[type="email"],input[type="password"], input[type="search"],input[type="number"],input[type="tel"],input[type="date"], select,textarea) { background: transparent; border-color: var(--glass-border); color: var(--text-primary); } .theme-glass .form-input:hover, .theme-glass :is(input,select,textarea):hover { border-color: var(--glass-border-strong); } .theme-glass .form-input:focus, .theme-glass :is(input,select,textarea):focus { background: var(--glass-bg); border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .theme-glass .form-input::placeholder, .theme-glass :is(input,textarea)::placeholder { color: var(--text-muted); } .theme-glass .form-label { color: var(--text-secondary); } .theme-glass .form-hint { color: var(--text-muted); } .theme-glass .form-group:focus-within .form-label { color: var(--text-primary); } .theme-glass .ds-field, .theme-glass .ds-field-alt { background: transparent; border-color: var(--glass-border); color: var(--text-primary); } .theme-glass .ds-field:focus, .theme-glass .ds-field-alt:focus { background: var(--glass-bg); border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .theme-glass .ds-field::placeholder, .theme-glass .ds-field-alt::placeholder { color: var(--text-muted); } /* ── Modals & overlays ─────────────────────────────────── */ .theme-glass .modal-overlay { background: var(--glass-bg-sunken); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .theme-glass .modal-content { background: var(--bg-elevated); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xl), var(--glass-highlight); } .theme-glass .modal-header { border-bottom-color: var(--glass-border); } .theme-glass .modal-footer { background: var(--glass-bg-sunken); border-top-color: var(--glass-border); } .theme-glass .ds-overlay { background: var(--glass-bg-sunken); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .theme-glass .ds-modal-panel { background: var(--bg-elevated); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-color: var(--glass-border); box-shadow: var(--shadow-xl), var(--glass-highlight); } .theme-glass .loading-overlay { background: var(--glass-bg-sunken); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ── Dropdown menus ────────────────────────────────────── */ .theme-glass .dropdown-menu { background: var(--bg-elevated); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-color: var(--glass-border); box-shadow: var(--shadow-xl); } .theme-glass .dropdown-item { color: var(--text-secondary); } .theme-glass .dropdown-item:hover { color: var(--text-primary); } .theme-glass .dropdown-divider { background: var(--glass-border); } /* ── Toasts ────────────────────────────────────────────── */ .theme-glass .toast { background: var(--glass-bg-sunken); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-color: var(--glass-border); box-shadow: var(--shadow-xl); color: var(--text-primary); } .theme-glass .toast:hover { box-shadow: var(--shadow-xl); } .theme-glass .toast-close:hover { background: var(--glass-bg-hover); color: var(--text-primary); } .theme-glass .toast-progress { background: var(--glass-border); } /* ── Tables ────────────────────────────────────────────── */ .theme-glass .data-table tbody tr:active { background: var(--glass-bg-hover); } /* ── Status badges ─────────────────────────────────────── */ .theme-glass .badge-draft { background: var(--glass-bg); color: var(--text-tertiary); } .theme-glass .badge-draft::before { background: var(--text-muted); } .theme-glass .badge-active { background: var(--primary-50); color: var(--navy-300); } .theme-glass .badge-active::before { background: var(--navy-400); } .theme-glass .badge-pending { background: var(--warning-50); color: var(--gold-300); } .theme-glass .badge-pending::before { background: var(--gold-400); } .theme-glass .badge-signed { background: var(--info-50); color: var(--info-400); } .theme-glass .badge-signed::before { background: var(--info-400); } .theme-glass .badge-completed { background: var(--success-50); color: var(--emerald-400); } .theme-glass .badge-completed::before { background: var(--emerald-400); } .theme-glass .badge-cancelled { background: var(--danger-50); color: var(--danger-400); } .theme-glass .badge-cancelled::before { background: var(--danger-400); } .theme-glass .ds-badge-neutral { background: var(--glass-bg-hover); color: var(--text-secondary); } .theme-glass .ds-badge-primary { background: var(--primary-50); } .theme-glass .ds-badge-success { background: var(--success-50); } .theme-glass .ds-badge-danger { background: var(--danger-50); } .theme-glass .ds-badge-warning { background: var(--warning-50); } .theme-glass .ds-badge-info { background: var(--info-50); } /* ── Tabs ──────────────────────────────────────────────── */ .theme-glass .tabs { border-bottom-color: var(--glass-border); } .theme-glass .tab { color: var(--text-muted); } .theme-glass .tab:hover { color: var(--text-secondary); } .theme-glass .tab.active { color: var(--accent-400); border-bottom-color: var(--accent-500); } .theme-glass .ds-tab-bar { border-bottom-color: var(--glass-border); } .theme-glass .ds-tab { color: var(--text-muted); } .theme-glass .ds-tab:hover { color: var(--text-secondary); } .theme-glass .ds-tab.active { color: var(--accent-500); border-bottom-color: var(--accent-500); } /* ── Filter chips ──────────────────────────────────────── */ .theme-glass .filter-chip { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-secondary); } .theme-glass .filter-chip:hover { background: var(--glass-bg-hover); color: var(--text-primary); } .theme-glass .filter-chip.active { background: var(--glass-bg-strong); border-color: var(--accent-500); color: var(--accent-400); } /* ── Quick actions palette ─────────────────────────────── */ .theme-glass .qa-overlay { background: var(--glass-bg-sunken); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .theme-glass .qa-palette { background: var(--bg-elevated); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-color: var(--glass-border); box-shadow: var(--shadow-xl); } .theme-glass .qa-palette-header { border-bottom-color: var(--glass-border); } .theme-glass .qa-footer { border-top-color: var(--glass-border); background: transparent; } .theme-glass .qa-close-btn:hover { background: var(--glass-bg-hover); color: var(--text-primary); } .theme-glass .qa-card:active { background: var(--glass-bg-hover); } .theme-glass .qa-card-icon { background: var(--glass-bg); } .theme-glass .qa-card:hover .qa-card-icon { background: var(--glass-bg-hover); } .theme-glass .qa-card-label { color: var(--text-primary); } .theme-glass .qa-card-desc { color: var(--text-tertiary); } .theme-glass .qa-section-divider { background: var(--glass-border); } .theme-glass .qa-card-shortcut kbd, .theme-glass .qa-hint kbd { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: none; color: var(--text-secondary); } /* ── Skeleton loaders ──────────────────────────────────── */ .theme-glass .skeleton { background: var(--glass-bg); } .theme-glass .skeleton::after { background: linear-gradient(90deg, transparent 0, var(--glass-bg-hover) 50%, transparent 100%); } /* ── Empty states ──────────────────────────────────────── */ .theme-glass .empty-state { background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--glass-bg) 10px, var(--glass-bg) 20px); } .theme-glass .empty-state-icon { color: var(--text-muted); opacity: .38; } .theme-glass .empty-state-title { color: var(--text-secondary); } .theme-glass .empty-state-text { color: var(--text-muted); } /* ── Misc components ───────────────────────────────────── */ .theme-glass .ds-divider { border-top-color: var(--glass-border); } .theme-glass .ds-divider-subtle { border-top-color: var(--border-subtle); } .theme-glass .ds-progress { background: var(--glass-bg-sunken); } .theme-glass .kanban-column { background: var(--glass-bg); border-color: var(--glass-border); } .theme-glass .tour-tooltip { background: var(--bg-elevated); border-color: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-xl); } .theme-glass .tour-progress { background: var(--glass-border); } .theme-glass .ob-checklist { background: var(--bg-elevated); border-color: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-xl); } .theme-glass .render-error-fallback { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .theme-glass body::before { animation: none; } }