/* ============================================ Theme system + loading-screen reveal -------------------------------------------- Sets a global theme via `data-theme` on . `js/theme.js` controls when each value applies. The loading screen is the logo itself — it fades in from bottom to top as `--reveal-progress` advances 0% → 100%. ============================================ */ /* Animatable custom property: lets `transition: --reveal-progress` smoothly interpolate the mask gradient in modern browsers. Older browsers ignore the @property and just snap on each set. */ @property --reveal-progress { syntax: ''; inherits: true; initial-value: 0%; } :root { --reveal-progress: 0%; /* Default (dark) palette — used when [data-theme="dark"] or attribute missing. */ --bg: #0b0b16; --fg: #ffffff; --logo-filter: invert(1); /* SVG ships black-on-white; invert for dark UI */ --loading-bg: #0b0b16; --loading-fg: #ffffff; /* Three.js scene colors — galaxy.js reads these via getComputedStyle. */ --three-bg: #000011; --three-fog: #000011; --three-star-default: 0xffffff; /* multiplier-friendly */ --three-bg-stars-mode: dark; /* read by galaxy.js to choose a recolor preset */ } :root[data-theme="light"] { --bg: #f8f8fb; --fg: #0b0b16; --logo-filter: none; /* SVG already black-on-white */ --loading-bg: #ffffff; --loading-fg: #0b0b16; --three-bg: #f7f8fb; --three-fog: #f7f8fb; --three-star-default: 0x111122; --three-bg-stars-mode: light; } /* ============ Loading screen ============ Always pure black, regardless of the active theme. The logo is the only thing on screen and reveals horizontally (left → right) as --reveal-progress goes 0% → 100%. No ghost outline, no blur, no bloom — minimal and identical for galaxy entry, world entry, and the return-to-galaxy transition. */ #loading-screen, .loading-screen-styled { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; pointer-events: auto; } #loading-screen.fade-out, .loading-screen-styled.fade-out { opacity: 0; } .loading-logo-wrap { position: relative; width: min(72vw, 560px); height: auto; display: block; } /* The black-source SVG inverted to white-on-black so it sits cleanly on the pure-black loading background. */ .loading-logo-wrap .loading-logo-fill { width: 100%; height: auto; display: block; filter: invert(1); -webkit-mask-image: linear-gradient( to right, black 0%, black var(--reveal-progress), transparent calc(var(--reveal-progress) + 6%) ); mask-image: linear-gradient( to right, black 0%, black var(--reveal-progress), transparent calc(var(--reveal-progress) + 6%) ); transition: --reveal-progress 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* Hide ghost layer and legacy progress widgets if any HTML still includes them. */ #loading-screen .loading-logo-ghost, #loading-screen .loading-bar, #loading-screen .loading-text, #loading-screen #progress-bar-container, #loading-screen #loading-text { display: none !important; } /* ============================================ LIGHT MODE — UI overrides for the galaxy view -------------------------------------------- The app's UI was originally built for a dark space background: white text on translucent-white "glass" pills. On a white sky the same elements vanish. These rules darken text + flip the glass tint just for [data-theme="light"]. They are deliberately broad so we don't have to chase every ad-hoc styled button — but scoped to interactive UI surfaces (overlay/buttons/modal/chat) so 3D content is unaffected. ============================================ */ :root[data-theme="light"] body { background: var(--bg); color: var(--fg); } /* Top-bar buttons that all share the .glass-circle-btn / hand-styled glass pattern */ :root[data-theme="light"] #user-button, :root[data-theme="light"] #add-star-button, :root[data-theme="light"] #mic-toggle-button, :root[data-theme="light"] #back-to-galaxy, :root[data-theme="light"] #main-help-button, :root[data-theme="light"] .glass-circle-btn { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.78); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); } :root[data-theme="light"] #user-button:hover, :root[data-theme="light"] #add-star-button:hover, :root[data-theme="light"] #mic-toggle-button:hover, :root[data-theme="light"] #back-to-galaxy:hover, :root[data-theme="light"] #main-help-button:hover, :root[data-theme="light"] .glass-circle-btn:hover { background: rgba(0, 0, 0, 0.10); border-color: rgba(0, 0, 0, 0.25); } /* Online-counter pill */ :root[data-theme="light"] .online-counter-pill { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.78); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .online-counter-pill .online-counter-text { color: rgba(0, 0, 0, 0.9); } :root[data-theme="light"] .online-counter-pill .online-counter-icon { color: rgba(0, 0, 0, 0.78); } /* Crosshair / hover crosshair indicator */ :root[data-theme="light"] #crosshair { filter: invert(1); } /* "VR NOT SUPPORTED" pill / various inline status chips that use translucent-white bg */ :root[data-theme="light"] #vr-status, :root[data-theme="light"] #vr-button, :root[data-theme="light"] [id$="-status"][style*="background: rgba(255, 255, 255"], :root[data-theme="light"] [id$="-badge"] { background: rgba(0, 0, 0, 0.06) !important; color: rgba(0, 0, 0, 0.85) !important; border-color: rgba(0, 0, 0, 0.15) !important; } /* Galaxy version toggle (V1/V2 chip) */ :root[data-theme="light"] #galaxy-version-toggle, :root[data-theme="light"] [class*="version-toggle"] { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.85) !important; } /* Audio notification pill */ :root[data-theme="light"] #audio-notification { background: rgba(255, 255, 255, 0.92) !important; color: rgba(0, 0, 0, 0.85) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* Generic "modal" containers that the app uses as dim-overlay panels — keep their own opaque dark glass; only the surrounding scrim flips. Most modals already render with their own backdrop, leave the inner content alone. */ :root[data-theme="light"] .modal { background: rgba(0, 0, 0, 0.35); /* darker scrim on white background */ } /* Help dropdown attached to the help button */ :root[data-theme="light"] #main-help-dropdown { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.12); color: #0b0b16; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } :root[data-theme="light"] #main-help-dropdown .help-header h3, :root[data-theme="light"] #main-help-dropdown .help-header p, :root[data-theme="light"] #main-help-dropdown h4, :root[data-theme="light"] #main-help-dropdown .control-desc, :root[data-theme="light"] #main-help-dropdown .key-badge { color: #0b0b16; } /* Chat bar at the bottom — usually styled with rgba(255,255,255,X) bg + white text */ :root[data-theme="light"] #chat-bar, :root[data-theme="light"] #chat-input, :root[data-theme="light"] .chat-bar, :root[data-theme="light"] #players-chat, :root[data-theme="light"] #ai-chat-input, :root[data-theme="light"] #ai-chat-bar { background: rgba(255, 255, 255, 0.85) !important; color: #0b0b16 !important; border-color: rgba(0, 0, 0, 0.12) !important; } :root[data-theme="light"] #chat-bar input, :root[data-theme="light"] #chat-input input, :root[data-theme="light"] #ai-chat-input input, :root[data-theme="light"] #ai-chat-bar input, :root[data-theme="light"] .chat-bar input, :root[data-theme="light"] [id*="chat"] input[type="text"], :root[data-theme="light"] [id*="chat"] textarea { background: rgba(0, 0, 0, 0.04) !important; color: #0b0b16 !important; border-color: rgba(0, 0, 0, 0.12) !important; } :root[data-theme="light"] [id*="chat"] input::placeholder, :root[data-theme="light"] [id*="chat"] textarea::placeholder { color: rgba(0, 0, 0, 0.45) !important; } /* Top-left "Add" creation dropdown */ :root[data-theme="light"] #creation-dropdown, :root[data-theme="light"] .creation-menu-item { background: rgba(255, 255, 255, 0.96) !important; color: #0b0b16 !important; border-color: rgba(0, 0, 0, 0.12) !important; } :root[data-theme="light"] .creation-menu-item:hover { background: rgba(0, 0, 0, 0.06) !important; } /* User dropdown menu (avatar / settings / my stars) */ :root[data-theme="light"] #user-menu { background: rgba(255, 255, 255, 0.96) !important; color: #0b0b16 !important; border-color: rgba(0, 0, 0, 0.12) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } :root[data-theme="light"] #user-menu button, :root[data-theme="light"] #user-info, :root[data-theme="light"] #user-email { color: #0b0b16 !important; } :root[data-theme="light"] #user-menu button:hover { background: rgba(0, 0, 0, 0.05) !important; } /* Avatar Studio — already uses dark glass internally, looks fine in either mode. Just darken its overlay scrim a touch in light mode. */ :root[data-theme="light"] #avatar-studio-overlay { background: rgba(0, 0, 0, 0.55) !important; } /* Settings modal body — already gets re-tinted by `.modal` rule above; tighten text */ :root[data-theme="light"] .settings-modal-content, :root[data-theme="light"] .settings-body, :root[data-theme="light"] .modal-content { background: rgba(255, 255, 255, 0.96) !important; color: #0b0b16 !important; } :root[data-theme="light"] .settings-section h3, :root[data-theme="light"] .settings-label, :root[data-theme="light"] .modal-header h2 { color: #0b0b16 !important; } :root[data-theme="light"] .settings-description { color: rgba(0, 0, 0, 0.55) !important; } :root[data-theme="light"] .close-btn { color: rgba(0, 0, 0, 0.6) !important; } /* Hover labels rendered as TextSprite via Three.js use a Canvas — they paint white text by default. Override the background gradient on the loading text sprite is a runtime concern (not handled here). */ /* ============ Theme picker (settings modal) ============ */ .theme-picker { display: inline-flex; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 3px; gap: 2px; } .theme-picker button { appearance: none; background: transparent; color: rgba(255, 255, 255, 0.7); border: 0; border-radius: 999px; padding: 6px 14px; font: 500 12px/1 'Inter', sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s; pointer-events: auto; } .theme-picker button:hover { color: #fff; } .theme-picker button.active { background: rgba(120, 120, 220, 0.35); color: #fff; } :root[data-theme="light"] .theme-picker { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); } :root[data-theme="light"] .theme-picker button { color: rgba(0, 0, 0, 0.6); } :root[data-theme="light"] .theme-picker button:hover { color: #000; } :root[data-theme="light"] .theme-picker button.active { background: rgba(80, 80, 200, 0.18); color: #000; }