/* ============================================================================= * Safe2Send — Theme & Layout system (CSS only for styling) * ----------------------------------------------------------------------------- * LAYOUT is a single stacked column (layout-stack). COLOR THEME is picked * at random on page load by a tiny inline script (see room.html / index.html), * which sets one of these classes on : * * COLOR THEME (palette only) — chosen by time of day on load (see the inline * script in room.html / index.html / privacy.html / terms.html). To force a * specific theme, set it on instead. * theme-midnight — blue + indigo (21:00–06:00) * theme-aurora — purple + cyan (06:00–10:00) * theme-mint — green + teal (10:00–18:00) * theme-sunset — orange + pink (18:00–21:00) * theme-mono — grayscale / near-black (available for manual use) * ========================================================================== */ /* ---- Design tokens (overridden per color theme) -------------------------- */ :root { /* brand = primary accent (buttons, rings, links, progress) */ --brand: #a855f7; --brand-strong: #9333ea; --brand-soft: #c084fc; --brand-2: #22d3ee; /* secondary / warp glow */ --brand-rgb: 168, 85, 247; /* R,G,B of --brand, for rgba() */ /* page background (gradient) */ --page-bg: linear-gradient(135deg, #0f172a 0%, #3b0764 50%, #0f172a 100%); /* surface tint used by glass panels is left to Tailwind; themes tint brand only */ } /* ============================================================================= * COLOR THEMES — override the tokens above. * We also re-skin the existing Tailwind purple utilities so the pre-written * markup follows the palette without any HTML edits. (!important is intentional * here: these are theme overrides that must win over utility classes.) * ========================================================================== */ .theme-aurora { --brand: #a855f7; --brand-strong: #9333ea; --brand-soft: #c084fc; --brand-2: #22d3ee; --brand-rgb: 168, 85, 247; --page-bg: linear-gradient(135deg, #0f172a 0%, #3b0764 50%, #0f172a 100%); } .theme-sunset { --brand: #f97316; --brand-strong: #ea580c; --brand-soft: #fb923c; --brand-2: #ec4899; --brand-rgb: 249, 115, 22; --page-bg: linear-gradient(135deg, #1f1300 0%, #7c2d12 50%, #4a044e 100%); } .theme-mint { --brand: #10b981; --brand-strong: #059669; --brand-soft: #34d399; --brand-2: #14b8a6; --brand-rgb: 16, 185, 129; --page-bg: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #022c22 100%); } .theme-midnight { --brand: #3b82f6; --brand-strong: #2563eb; --brand-soft: #60a5fa; --brand-2: #818cf8; --brand-rgb: 59, 130, 246; --page-bg: linear-gradient(135deg, #0b1020 0%, #1e1b4b 50%, #0b1020 100%); } .theme-mono { --brand: #e2e8f0; --brand-strong: #cbd5e1; --brand-soft: #f1f5f9; --brand-2: #94a3b8; --brand-rgb: 226, 232, 240; --page-bg: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%); } /* Re-skin the purple utilities used across the markup so a theme's brand * colour propagates everywhere (buttons, rings, focus, progress, code chips). */ .theme-sunset .bg-purple-500, .theme-mint .bg-purple-500, .theme-midnight .bg-purple-500, .theme-mono .bg-purple-500 { background-color: var(--brand) !important; } .theme-sunset .bg-purple-600, .theme-mint .bg-purple-600, .theme-midnight .bg-purple-600, .theme-mono .bg-purple-600, .theme-sunset .hover\:bg-purple-500, .theme-mint .hover\:bg-purple-500, .theme-midnight .hover\:bg-purple-500, .theme-mono .hover\:bg-purple-500 { background-color: var(--brand) !important; } .theme-sunset .bg-purple-600\/80, .theme-mint .bg-purple-600\/80, .theme-midnight .bg-purple-600\/80, .theme-mono .bg-purple-600\/80 { background-color: color-mix(in srgb, var(--brand) 80%, transparent) !important; } .theme-sunset .bg-purple-500\/20, .theme-mint .bg-purple-500\/20, .theme-midnight .bg-purple-500\/20, .theme-mono .bg-purple-500\/20 { background-color: color-mix(in srgb, var(--brand) 20%, transparent) !important; } .theme-sunset .text-purple-300, .theme-mint .text-purple-300, .theme-midnight .text-purple-300, .theme-mono .text-purple-300 { color: var(--brand-soft) !important; } .theme-sunset .text-purple-400, .theme-mint .text-purple-400, .theme-midnight .text-purple-400, .theme-mono .text-purple-400 { color: var(--brand) !important; } .theme-sunset .border-purple-500, .theme-mint .border-purple-500, .theme-midnight .border-purple-500, .theme-mono .border-purple-500 { border-color: var(--brand) !important; } /* NOTE: peer-checked utilities compile to `.peer:checked ~ .peer-checked\:bg-purple-500`, * so the override MUST keep the `:checked ~` part — otherwise the track stays brand-coloured * even when the toggle is OFF, making On/Off indistinguishable. */ .theme-sunset .peer:checked ~ .peer-checked\:bg-purple-500, .theme-mint .peer:checked ~ .peer-checked\:bg-purple-500, .theme-midnight .peer:checked ~ .peer-checked\:bg-purple-500, .theme-mono .peer:checked ~ .peer-checked\:bg-purple-500 { background-color: var(--brand) !important; } .theme-sunset .focus\:ring-purple-500, .theme-mint .focus\:ring-purple-500, .theme-midnight .focus\:ring-purple-500, .theme-mono .focus\:ring-purple-500 { --tw-ring-color: var(--brand) !important; } .theme-sunset .focus\:ring-purple-500\/40, .theme-mint .focus\:ring-purple-500\/40, .theme-midnight .focus\:ring-purple-500\/40, .theme-mono .focus\:ring-purple-500\/40 { --tw-ring-color: color-mix(in srgb, var(--brand) 40%, transparent) !important; } .theme-sunset .shadow-purple-500\/20, .theme-sunset .shadow-purple-500\/30, .theme-sunset .shadow-purple-500\/40, .theme-mint .shadow-purple-500\/20, .theme-mint .shadow-purple-500\/30, .theme-mint .shadow-purple-500\/40, .theme-midnight .shadow-purple-500\/20, .theme-midnight .shadow-purple-500\/30, .theme-midnight .shadow-purple-500\/40, .theme-mono .shadow-purple-500\/20, .theme-mono .shadow-purple-500\/30, .theme-mono .shadow-purple-500\/40 { box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 22%, transparent) !important; } /* The page background follows the theme. */ body { background: var(--page-bg) !important; background-attachment: fixed; } /* Brand-tinted inline-style effects (warp, pulse rings, stage glow, spinner). * These reference var(--brand-rgb) so a theme recolours them automatically. */ .warp-core { background: radial-gradient(circle, rgb(var(--brand-rgb)) 0%, var(--brand-2) 65%, rgba(var(--brand-rgb), 0) 100%) !important; box-shadow: 0 0 60px rgb(var(--brand-rgb)), 0 0 130px var(--brand-2) !important; } #warp-overlay.active { background: radial-gradient(circle at center, rgba(var(--brand-rgb), 0.30) 0%, rgba(var(--brand-2), 0.12) 35%, rgba(15, 23, 42, 0.94) 72%) !important; } .warp-text { text-shadow: 0 0 18px rgba(var(--brand-rgb), 0.9) !important; } .pulse-ring { animation: none; box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.45); } .pulse-ring-strong { animation: none; box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.55); } .stage-card::after { box-shadow: 0 0 18px 0 rgba(var(--brand-rgb), 0.18); } @keyframes stageGlow { 0%, 100% { box-shadow: 0 0 18px 0 rgba(var(--brand-rgb), 0.16); } 50% { box-shadow: 0 0 38px 6px rgba(var(--brand-rgb), 0.40); } } .stage-purple { background-color: rgba(var(--brand-rgb), 0.14) !important; border-color: rgba(var(--brand-rgb), 0.6) !important; box-shadow: 0 0 34px rgba(var(--brand-rgb), 0.22) !important; } #connecting-spinner, .legal-modal .warp-core { border-top-color: transparent; } /* ============================================================================= * LAYOUT — single stacked column. This is the only layout, and it matches the * original composition (room / status / peer / share / send|receive / history, * top to bottom). The area-* classes on the panels are retained so a future * layout can be re-introduced without touching room.html again. * ========================================================================== */ /* Only lay #room-view out as a column when it is NOT hidden. The base rule * below has higher specificity than Tailwind's `.hidden` utility, so without * :not(.hidden) a hidden room-view would still render (showing the room name / * countdown / "waiting for peer" block on a non-existent room). */ .layout-stack #room-view:not(.hidden) { display: flex; flex-direction: column; gap: 1rem; }