/* ========================================================================== SHARED THEME STYLES FOR ALL RUM PAGES - The sun/moon toggle button (.theme-toggle) shown in each page header. - A light theme scoped to `.light-theme` on , flipping the dark "glass" surfaces to a clean light palette. The orange accent (#f58e18) and the status colours stay the same in both themes. Everything uses !important so it wins over each page's inline dark styles. ========================================================================== */ /* While toggling, `theme-switching` is briefly on ; kill all transitions and animations so the theme flips instantly instead of animating for 0.3s. */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation: none !important; } /* ---------- Theme toggle (sun / moon switch) ---------- */ .theme-toggle { position: relative; width: 60px; height: 30px; flex-shrink: 0; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.12); background: #1b2540; padding: 0; cursor: pointer; transition: background .3s ease, border-color .3s ease; } .theme-toggle .tt-sun, .theme-toggle .tt-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; transition: opacity .3s ease; pointer-events: none; } .theme-toggle .tt-moon { left: 8px; color: #cbd5e1; } .theme-toggle .tt-sun { right: 8px; color: #f5b301; } .theme-toggle .tt-knob { position: absolute; top: 50%; left: 33px; /* dark = knob on the right */ transform: translateY(-50%); width: 24px; height: 24px; border-radius: 9999px; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); transition: left .3s cubic-bezier(.4, 0, .2, 1); } /* Dark (default): show moon, hide sun */ .theme-toggle .tt-sun { opacity: 0; } .theme-toggle .tt-moon { opacity: 1; } /* Light: knob left, show sun, hide moon */ .light-theme .theme-toggle { background: #e2e8f0; border-color: rgba(15, 23, 42, 0.15); } .light-theme .theme-toggle .tt-knob { left: 3px; } .light-theme .theme-toggle .tt-sun { opacity: 1; } .light-theme .theme-toggle .tt-moon { opacity: 0; } /* ---------- Light theme ---------- */ /* Page background + hide the dark nebula blobs */ html.light-theme, html.light-theme body { background-color: #eef1f6 !important; } .light-theme .blob-1, .light-theme .blob-2 { display: none !important; } /* Per-theme logo swap: the original PNG shows on the dark theme; the dark SVG shows on the light theme so it stays visible on the white header. The SVG is a tight crop (much wider than the PNG's padded frame), so it's sized down to match the PNG logo's compact footprint. */ .logo-light { display: none; } .light-theme .logo-dark { display: none; } .light-theme .logo-light { display: inline-block; height: 28px; width: auto; } /* The smaller light-theme logo would shrink the header; pin its height so the light header matches the dark one (whose tall PNG logo sets the height). */ .light-theme header.glass-premium { min-height: 73px; } /* Panels (glass) — each page defines .glass-premium inline; this wins */ .light-theme .glass-premium { background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08) !important; color: #1e293b !important; } .light-theme .glass-premium:hover { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(15, 23, 42, 0.14) !important; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12) !important; } /* White cards (dashboard remaps .bg-white to dark glass; force real white) */ .light-theme .bg-white { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important; color: #1e293b !important; } .light-theme .bg-white:hover { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.14) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important; } /* Card / row / panel surfaces */ .light-theme .bg-slate-900\/40, .light-theme .bg-slate-950\/30, .light-theme .bg-slate-950\/40, .light-theme .bg-slate-950\/60, .light-theme .bg-slate-900\/50 { background-color: #ffffff !important; } /* Inset "code/terminal" style boxes -> light gray so they read as sunken */ .light-theme .bg-slate-950\/50 { background-color: #f1f5f9 !important; } /* Inputs, tabs, load-more, empty-state chip */ .light-theme .bg-slate-900\/60 { background-color: #f8fafc !important; } /* Small pills / badges / secondary buttons */ .light-theme .bg-slate-900, .light-theme .bg-slate-800, .light-theme .bg-slate-800\/70, .light-theme .bg-slate-700\/60 { background-color: #e2e8f0 !important; } /* Subtle white overlays become subtle dark overlays */ .light-theme .bg-white\/2 { background-color: rgba(15, 23, 42, 0.02) !important; } .light-theme .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; } .light-theme .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.05) !important; } /* Borders */ .light-theme .border-white\/5, .light-theme .border-white\/10, .light-theme .border-slate-900, .light-theme .border-slate-800, .light-theme .border-slate-700 { border-color: rgba(15, 23, 42, 0.10) !important; } /* Text colours */ .light-theme .text-slate-100, .light-theme .text-slate-200 { color: #1e293b !important; } .light-theme .text-slate-300, .light-theme .text-slate-350 { color: #334155 !important; } .light-theme .text-slate-400 { color: #475569 !important; } .light-theme .text-slate-500, .light-theme .text-slate-600 { color: #64748b !important; } .light-theme .text-red-300 { color: #b91c1c !important; } /* Dashboard remapped label / value helpers */ .light-theme .text-gray-500 { color: #475569 !important; } .light-theme .text-xl.font-bold, .light-theme .text-xl.text-white { color: #1e293b !important; } .light-theme .text-lg.text-white { color: #475569 !important; } /* Session lists (dashboard + sessions archive) */ .light-theme #sessionList li { color: #334155 !important; border-bottom-color: rgba(15, 23, 42, 0.07) !important; } .light-theme #sessionList li:hover { background-color: rgba(245, 142, 24, 0.10) !important; border-left-color: #f58e18 !important; color: #f58e18 !important; } /* Network-status line colours (theme-aware) */ .net-ok { color: #86efac; } .net-err { color: #ffa2a2; } .light-theme .net-ok { color: #15803d !important; } .light-theme .net-err { color: #dc2626 !important; } /* Confirmation modals */ .light-theme .bg-\[\#0d0e15\] { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #1e293b !important; } /* Scrollbar track blends with the light background */ .light-theme ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.04); }