/* CSS Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* CSS Variables */ /* ========================================================================= * AUTO-GENERATED from data/gui/theme.ron — do not edit by hand. * Regenerate with: node scripts/gen-theme-css.js * ========================================================================= */ :root { /* Backgrounds */ --bg: #000000; --bg-secondary: #010101; --bg-tertiary: #010101; --bg-card: #040404; --bg-card-hover: #010101; --bg-input: #010101; --bg-hover: #010101; --bg-modal: rgba(0, 0, 0, 0.7); --bg-panel: #000000; --bg-sidebar: #000000; --bg-sidebar-dark: #020202; /* Text */ --text: #e8e8ea; --text-secondary: #b4b4be; --text-muted: #94949f; --text-on-accent: #0d0d0d; /* Accent */ --accent: #ed8c24; --accent-hover: #ffa63d; --accent-pressed: #cc731a; --accent-dim: rgba(237, 140, 36, 0.15); /* Semantic */ --success: #33bf4d; --warning: #f2bf1a; --danger: #e64033; --info: #3380e6; --border: #2a2a35; --border-focus: #ed8c24; /* Badges */ --badge-admin: #e68021; --badge-mod: #26ad61; --badge-verified: #3394d9; --badge-donor: #9c59b5; --badge-live: #e64d3d; /* Radii */ --radius-sm: 3.9643755px; --radius: 4px; --radius-lg: 8px; --badge-radius: 3px; /* Spacing (derived from native tokens via x/16 rem conversion) */ --space-xs: 0.125rem; --space-sm: 0.375rem; --space-md: 0.625rem; --space-lg: 0.875rem; --space-xl: 1.125rem; --space-2xl: 1.6875rem; --space-3xl: 2.25rem; /* Typography */ --text-xs: 0.6814rem; --text-sm: 0.7439rem; --text-base: 1.0311rem; --text-lg: 1.4557rem; --text-xl: 1.5182rem; --text-2xl: 1.7785rem; --text-3xl: 2.0285rem; --font-size-base: 1.0311rem; --line-height: 1.6; /* Icons */ --icon-size: 32px; --icon-small: 15.78625px; --icon-weight: 3; /* Widget sizing */ --button-height: 16px; --input-height: 23.880001px; --sidebar-width: 200.3646px; --modal-width: 300px; --row-height: 15.883123px; --header-height: 16px; --content-width: none; /* Chat message-row avatar + pill (shared with native widgets/row.rs) */ --avatar-size: 32px; --avatar-gap: 8px; --pill-radius: 9px; /* Nav group colors — native nav_legacy_* tokens (RED = platform entry, GREEN = your stuff, BLUE = system). The -rgb triples exist for rgba() use. */ --nav-red: #e74c3c; --nav-green: #2ecc71; --nav-blue: #3498db; --nav-sim: #6c5ce7; --nav-settings: #7f8c8d; --nav-red-rgb: 231, 76, 60; --nav-green-rgb: 46, 204, 113; --nav-blue-rgb: 52, 152, 219; --nav-sim-rgb: 108, 92, 231; --nav-settings-rgb: 127, 140, 141; /* Chat section tints — shared with native draw_dm/groups/servers_section */ --dm-bg: #2d0f0f; --dm-row-bg: #371414; --dm-row-hover: #461919; --group-bg: #0f2d0f; --group-row-bg: #143714; --group-row-hover: #194619; --server-bg: #0f0f2d; --server-row-bg: #141437; --server-row-hover: #191946; } /* ======================== END AUTO-GENERATED ======================== */ /* ── Light theme — toggled by adding data-theme="light" to ── */ [data-theme="light"] { --bg: #f4f4f4; --bg-secondary: #e8e8e8; --bg-card: #ffffff; --bg-card-hover: #f0f0f0; --bg-input: #e8e8e8; --bg-hover: #e0e0e0; --text: #1a1a1a; --text-muted: #555; --accent: #d06600; --accent-hover: #b35500; --accent-dim: rgba(208,102,0,0.12); --border: #ccc; --success: #2a7; --danger: #c33; --warning: #a83; } /* Base Typography */ html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; background: var(--bg); color: var(--text); line-height: 1.6; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-base); } /* ── Content Width — constrains main page content ── */ .page-content, #settings-main, #messages, main { max-width: var(--content-width, none); } /* Page purpose hints — shown at the top of every page */ .page-hint { margin: var(--space-md) var(--space-xl); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); color: var(--text-muted); background: var(--bg-secondary); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); line-height: 1.5; } /* ── Compact Mode — shrinks spacing scale when [data-compact] is on ── */ [data-compact] { --space-xs: 0.1rem; --space-sm: 0.15rem; --space-md: 0.3rem; --space-lg: 0.45rem; --space-xl: 0.6rem; --space-2xl: 0.9rem; --space-3xl: 1.2rem; } /* (The nav-group bottom color bars were replaced 2026-07-16 by app-style category-bordered pills, styled with the nav tabs in shell.js.) */ /* Mobile drawer colored section headers */ .mobile-hub-group.group-red h4 { color: rgba(var(--nav-red-rgb), 0.85); } .mobile-hub-group.group-green h4 { color: rgba(var(--nav-green-rgb), 0.85); } .mobile-hub-group.group-blue h4 { color: rgba(var(--nav-blue-rgb), 0.85); } /* -- Accessibility -- */ [data-high-contrast] { --bg: #000; --text: #fff; --border: #fff; --accent: #ff0; } [data-reduced-motion] * { animation: none !important; transition: none !important; } [data-colorblind="protanopia"] { filter: url(#protanopia); } [data-colorblind="deuteranopia"] { filter: url(#deuteranopia); } [data-colorblind="tritanopia"] { filter: url(#tritanopia); } /* Disable RGB Effects: kill the colour-cycling / glow animations on the nav, footer toggle, and separator while leaving other transitions intact. The selectors mirror the animated rules in shell.js (channeling, rgb-separator, footer-toggle-rgb, badgePulse). */ [data-no-rgb] .hub-nav .tab.active, [data-no-rgb] .hub-nav .tab.tab-update-ready, [data-no-rgb] .hub-nav .tab .tab-update-badge, [data-no-rgb] .nav-separator, [data-no-rgb] .footer-toggle, [data-no-rgb] .mobile-hub-group a.active { animation: none !important; } /* Large Cursor Focus: thick, high-visibility outline on the focused element. */ [data-focus-ring] :focus, [data-focus-ring] :focus-visible { outline: 3px solid var(--accent, #ed8c24) !important; outline-offset: 2px !important; border-radius: 2px; } /* Dyslexia-Friendly Font: switch the whole UI to a high-legibility font stack with wider letter spacing and looser word spacing. Uses widely available system faces (no web-font download needed on old / offline hardware). */ [data-dyslexia-font], [data-dyslexia-font] * { font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Tahoma, sans-serif !important; letter-spacing: 0.03em !important; word-spacing: 0.08em !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: #555; }