/* ========================================================================== Imagine glass UI — shared liquid-glass design language. One token set drives Settings, My Stars, Avatar Studio, the user menu and Imagine Social on BOTH pages. Dark = very dark blue fill, light = white fill. The blur lives on the component surface itself (liquid glass), never on a full-screen backdrop. Theme switching: js/theme.js sets data-theme="light|dark" on . Loaded AFTER the pages' inline styles so its overrides win. ========================================================================== */ :root { --glass-font: 'Open Sans', 'Google Sans', 'Segoe UI', system-ui, sans-serif; /* dark (default) — very dark blue */ --glass-bg: rgba(5, 10, 24, 0.92); --glass-bg-soft: rgba(9, 15, 32, 0.86); --glass-elev: rgba(255, 255, 255, 0.055); --glass-elev-hover: rgba(255, 255, 255, 0.10); --glass-border: rgba(150, 178, 255, 0.14); --glass-border-strong: rgba(170, 196, 255, 0.28); --glass-inner-edge: rgba(255, 255, 255, 0.10); --glass-text: #eef2ff; --glass-muted: rgba(226, 233, 255, 0.56); --glass-faint: rgba(226, 233, 255, 0.34); --glass-accent: #7df3ff; --glass-accent-ink: #06202a; /* text on top of a solid accent fill */ --glass-accent-soft: rgba(125, 243, 255, 0.14); --glass-accent-border: rgba(125, 243, 255, 0.42); --glass-danger: #ff6b81; --glass-danger-soft: rgba(255, 107, 129, 0.12); --glass-danger-border: rgba(255, 107, 129, 0.38); --glass-ok: #3ddc84; --glass-ok-soft: rgba(61, 220, 132, 0.14); --glass-blur: 26px; --glass-radius: 28px; --glass-radius-md: 18px; --glass-radius-sm: 12px; --glass-shadow: 0 30px 90px rgba(1, 4, 14, 0.6); --glass-scrim: rgba(3, 7, 18, 0.44); } :root[data-theme="light"] { --glass-bg: rgba(255, 255, 255, 0.92); --glass-bg-soft: rgba(255, 255, 255, 0.86); --glass-elev: rgba(12, 24, 60, 0.05); --glass-elev-hover: rgba(12, 24, 60, 0.09); --glass-border: rgba(12, 26, 64, 0.12); --glass-border-strong: rgba(12, 26, 64, 0.22); --glass-inner-edge: rgba(255, 255, 255, 0.85); --glass-text: #0a1330; --glass-muted: rgba(12, 22, 52, 0.56); --glass-faint: rgba(12, 22, 52, 0.34); --glass-accent: #2b62ff; --glass-accent-ink: #ffffff; --glass-accent-soft: rgba(43, 98, 255, 0.10); --glass-accent-border: rgba(43, 98, 255, 0.38); --glass-danger: #e02350; --glass-danger-soft: rgba(224, 35, 80, 0.08); --glass-danger-border: rgba(224, 35, 80, 0.32); --glass-ok: #0d9c56; --glass-ok-soft: rgba(13, 156, 86, 0.10); --glass-shadow: 0 30px 80px rgba(18, 30, 70, 0.20); --glass-scrim: rgba(16, 26, 60, 0.28); } /* ---------- shared primitives ---------- */ .glass-icon-btn { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-elev); color: var(--glass-text); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; -webkit-tap-highlight-color: transparent; } .glass-icon-btn:hover { background: var(--glass-elev-hover); border-color: var(--glass-border-strong); transform: translateY(-1px); } .glass-icon-btn svg { width: 19px; height: 19px; } /* The exaggerated headline every glass panel shares. */ .glass-mega, #settings-modal .modal-header h2, #user-stars-modal .modal-header h2 { margin: 0; color: var(--glass-text); font-family: var(--glass-font); font-size: clamp(30px, 4.6vw, 42px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; } /* ========================================================================== SETTINGS — wider panel, strong fill, blur only on the surface. ========================================================================== */ #settings-modal.modal { background: var(--glass-scrim); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 16px; /* above the hive dock (10013) + social panel (10020), below the user card (10030) */ z-index: 10025; } /* Settings / My Stars live inside #ui-overlay (z-index 10), so any body-level layer above z 10 paints over them and steals their clicks. The dock already hides itself (galaxy-dock.css); the bottom home-feed sheet (z 10012) must step aside too or the lower quarter of the panel is unclickable. */ body:has(#settings-modal:not(.hidden)) #home-feed-root, body:has(#user-stars-modal:not(.hidden)) #home-feed-root { opacity: 0 !important; /* visibility too — the sheet's children re-enable pointer-events */ visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, visibility 0.2s; } body:has(#settings-modal:not(.hidden)) #home-feed-root *, body:has(#user-stars-modal:not(.hidden)) #home-feed-root * { visibility: hidden !important; pointer-events: none !important; } #settings-modal .modal-content.settings-modal-content { width: min(620px, calc(100vw - 24px)) !important; max-width: 620px !important; max-height: min(88vh, 780px); overflow: hidden; display: flex; flex-direction: column; background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner-edge) !important; backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important; color: var(--glass-text) !important; font-family: var(--glass-font); } #settings-modal .modal-header { padding: 26px 26px 14px; background: transparent !important; border-bottom: 0 !important; } #settings-modal .modal-header h2 { color: var(--glass-text) !important; } #settings-modal .close-btn, #settings-modal #close-settings-modal { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-elev); color: var(--glass-muted) !important; font-size: 22px; transition: background 160ms ease, color 160ms ease; } #settings-modal .close-btn:hover { background: var(--glass-elev-hover); color: var(--glass-text) !important; transform: none; } #settings-modal .modal-body.settings-body { padding: 6px 26px 26px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--glass-faint) transparent; } #settings-modal .settings-section { margin-bottom: 26px; } #settings-modal .settings-section:last-child { margin-bottom: 4px; } #settings-modal .settings-section h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding: 0 2px 0 0; border-bottom: 0; color: var(--glass-faint) !important; font-family: var(--glass-font); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } #settings-modal .settings-section h3 svg { width: 15px; height: 15px; color: var(--glass-muted); } #settings-modal .settings-item { padding: 15px 16px; background: var(--glass-elev); border: 1px solid var(--glass-border); border-radius: var(--glass-radius-md); margin-bottom: 10px; gap: 16px; } #settings-modal .settings-item:hover { background: var(--glass-elev-hover); border-color: var(--glass-border); } #settings-modal .settings-item-info { flex-direction: row; align-items: center; gap: 13px; min-width: 0; } .settings-item-icon { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-accent-soft); color: var(--glass-accent); } .settings-item-icon svg { width: 18px; height: 18px; } .settings-item-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #settings-modal .settings-label { color: var(--glass-text) !important; font-family: var(--glass-font); font-size: 14px; font-weight: 700; } #settings-modal .settings-description { color: var(--glass-muted) !important; font-family: var(--glass-font); font-size: 12px; line-height: 1.35; } #settings-modal .settings-range-header { color: var(--glass-muted) !important; } #settings-modal .settings-range-value { color: var(--glass-text) !important; } #settings-modal .settings-range { background: var(--glass-faint) !important; } #settings-modal .settings-range::-webkit-slider-thumb { border: 2px solid var(--glass-inner-edge); background: var(--glass-accent); box-shadow: 0 0 12px var(--glass-accent-soft); } #settings-modal .settings-range::-moz-range-thumb { border: 2px solid var(--glass-inner-edge); background: var(--glass-accent); box-shadow: 0 0 12px var(--glass-accent-soft); } /* toggle switch on tokens */ #settings-modal .toggle-slider { background: var(--glass-elev-hover); border: 1px solid var(--glass-border-strong); } #settings-modal .toggle-slider:before { background: var(--glass-muted); } #settings-modal .toggle-switch input:checked + .toggle-slider { background: var(--glass-accent); border-color: var(--glass-accent-border); } #settings-modal .toggle-switch input:checked + .toggle-slider:before { background: var(--glass-accent-ink); } #settings-modal .toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 0 3px var(--glass-accent-soft); } /* theme picker + hive pickers on tokens */ #settings-modal .theme-picker, #settings-modal .gd-size-picker { background: var(--glass-elev); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px; gap: 2px; display: inline-flex; flex-wrap: wrap; } #settings-modal .theme-picker button, #settings-modal .gd-size-picker button { background: transparent; border: 0; min-width: 0; border-radius: 999px; padding: 7px 12px; color: var(--glass-muted); font: 700 11.5px/1 var(--glass-font); cursor: pointer; white-space: nowrap; transition: background 160ms ease, color 160ms ease; } #settings-modal .theme-picker button:hover, #settings-modal .gd-size-picker button:hover { color: var(--glass-text); background: transparent; } #settings-modal .theme-picker button.active, #settings-modal .gd-size-picker button.active { background: var(--glass-accent); border-color: transparent; color: var(--glass-accent-ink); } @media (max-width: 640px) { #settings-modal .settings-item { flex-wrap: wrap; } } /* ========================================================================== MY STARS — huge title, search + close in the header, no backdrop blur. (Grid/card styles live in css/auth-glass.css on the same tokens.) ========================================================================== */ #user-stars-modal.modal { background: var(--glass-scrim); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 10025; } .stars-header-actions { display: flex; align-items: center; gap: 9px; } #user-stars-navigation.is-collapsed { display: none; } /* ========================================================================== USER MENU — same glass recipe, footer row (logout + "...") and the more-actions popover with Delete Account. ========================================================================== */ #user-menu { width: min(320px, calc(100vw - 40px)); min-width: min(320px, calc(100vw - 40px)) !important; padding: 12px !important; border: 1px solid var(--glass-border) !important; border-radius: var(--glass-radius) !important; background: var(--glass-bg) !important; color: var(--glass-text) !important; backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner-edge) !important; font-family: var(--glass-font); } #user-menu #user-email { color: var(--glass-text) !important; font-family: var(--glass-font); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; padding: 6px 6px 12px; margin: 0 0 8px; border-bottom: 1px solid var(--glass-border) !important; word-break: break-word; } #user-menu button { width: 100%; min-height: 46px !important; padding: 0 14px; margin: 4px 0 !important; display: flex; align-items: center; gap: 11px; text-align: left; border-radius: 999px !important; background: var(--glass-elev) !important; border: 1px solid var(--glass-border) !important; color: var(--glass-text) !important; box-shadow: none !important; cursor: pointer; font: 700 13px var(--glass-font) !important; transform: none !important; transition: background 160ms ease, border-color 160ms ease; backdrop-filter: none; -webkit-backdrop-filter: none; } #user-menu button:hover { background: var(--glass-elev-hover) !important; border-color: var(--glass-border-strong) !important; transform: none !important; box-shadow: none !important; } #user-menu button svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--glass-muted); } /* Admin entry (injected) keeps the same look automatically via the rules above. */ /* footer row: logout stretches, the "..." stays a small circle */ #user-menu .profile-menu-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--glass-border); } #user-menu .profile-menu-footer #logout-btn { flex: 1 1 auto; margin: 0 !important; } #user-menu #profile-more-btn { flex: 0 0 46px; width: 46px !important; min-width: 46px; height: 46px; min-height: 46px !important; padding: 0 !important; margin: 0 !important; justify-content: center; border-radius: 50% !important; color: var(--glass-muted) !important; } #user-menu #profile-more-btn svg { width: 17px; height: 17px; } #user-menu #profile-more-pop { margin: 6px 0 2px; padding: 6px; border-radius: var(--glass-radius-md); border: 1px solid var(--glass-border); background: var(--glass-elev); } #user-menu #profile-more-pop.hidden { display: none; } #user-menu #profile-more-pop .profile-more-title { margin: 4px 8px 6px; color: var(--glass-faint); font: 800 10px/1 var(--glass-font); letter-spacing: 0.12em; text-transform: uppercase; } #user-menu #delete-account-btn { margin: 0 !important; min-height: 42px !important; border-radius: 12px !important; background: transparent !important; border: 0 !important; color: var(--glass-danger) !important; } #user-menu #delete-account-btn:hover { background: var(--glass-danger-soft) !important; } #user-menu #delete-account-btn svg { color: var(--glass-danger); } /* Buy Points lives inside the My Points popover now — the menu copy stays hidden. */ #user-menu #buy-coins-btn[hidden] { display: none !important; } #user-menu #guest-info button { justify-content: center; } /* slots between the buttons keep the same rhythm */ #user-menu #profile-points-slot, #user-menu #profile-credits-slot { margin: 4px 0; }