/* Scrib-R shared stylesheet — theme variables + shared UI helpers. * * Dark is the default theme. A `data-theme="light"` attribute on * (set by theme.js, persisted in localStorage) flips the palette via the * :root[data-theme="light"] overrides below. Page templates keep their own * page-specific inline CSS, but reference these variables instead of raw * colors so both themes look right. */ :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius: 24px; /* Palette (dark default) */ --bg: #030608; --panel: rgba(10, 16, 23, 0.82); --panel-strong: rgba(13, 21, 31, 0.94); --panel-solid: linear-gradient(160deg, rgba(18, 28, 44, 0.98), rgba(10, 18, 30, 0.99)); --border: rgba(154, 190, 232, 0.24); --border-soft: rgba(154, 190, 232, 0.14); --border-bright: rgba(143, 188, 255, 0.55); --text: #f6f8ff; --muted: #a6b2c3; --soft: #667489; --accent: #8bbcff; --accent-2: #4b79c7; --good: rgba(150, 255, 190, 0.95); --bad: rgba(255, 160, 160, 0.95); --warn: #f4dfbb; --shadow: 0 24px 70px rgba(0, 0, 0, 0.58); /* RGB triplets that flip with theme (used as rgba(var(--x-rgb), a)) */ --overlay-rgb: 255, 255, 255; /* subtle surface overlays / hover fills */ --ink-rgb: 255, 255, 255; /* near-white text and labels */ --accent-rgb: 139, 188, 255; /* blue accent for borders / outlines / links */ --good-rgb: 150, 230, 190; /* success text and borders */ --bad-rgb: 255, 160, 160; /* error text and borders */ --warn-rgb: 255, 170, 100; /* warning / secondary-error text */ /* Form controls */ --input-bg: linear-gradient(180deg, rgba(11, 18, 28, 0.96), rgba(9, 15, 23, 0.88)); --input-border: rgba(145, 178, 224, 0.24); --input-chevron: #b7c8e8; --btn-secondary-bg: rgba(4, 12, 21, 0.42); --flash-danger-bg: rgba(40, 10, 10, 0.9); --flash-success-bg: rgba(10, 35, 20, 0.9); --flash-info-bg: rgba(10, 20, 40, 0.9); --brand-glow: 0 0 16px rgba(255, 255, 255, 0.38), 0 0 38px rgba(79, 147, 255, 0.28); --body-grad: radial-gradient(circle at 50% 9%, rgba(69, 122, 205, 0.22), transparent 16rem), radial-gradient(circle at 12% 36%, rgba(74, 118, 189, 0.12), transparent 28rem), linear-gradient(180deg, #010203 0%, var(--bg) 42%, #05080c 100%); /* Shared component surfaces (primary button, tabs, icon tile, file button) — defined here so both themes restyle them together. */ --primary-btn-bg: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.25), transparent 45%), linear-gradient(180deg, #456fae, #1d3359 68%, #14223d); --primary-btn-text: #ffffff; --primary-btn-glow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 28px rgba(103, 159, 239, 0.36); --primary-btn-glow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 0 42px rgba(119, 177, 255, 0.46); --primary-btn-hover-border: rgba(203, 224, 255, 0.8); --tab-bg: transparent; --tab-text: rgba(255, 255, 255, 0.66); --tab-hover-bg: rgba(255, 255, 255, 0.04); --tab-active-bg: linear-gradient(180deg, rgba(42, 71, 112, 0.74), rgba(16, 25, 38, 0.92)); --tab-active-text: #ffffff; --tab-active-border: var(--border-bright); --tab-active-border-bottom: rgba(255, 255, 255, 0.08); --tab-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 24px rgba(74, 133, 219, 0.3); --icon-tile-bg: linear-gradient(145deg, rgba(53, 86, 134, 0.45), rgba(9, 18, 30, 0.78)); --icon-tile-icon: #c9ddff; --icon-tile-shadow: 0 14px 34px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 0 28px rgba(88, 146, 227, 0.15); --file-button-bg: linear-gradient(180deg, rgba(80, 119, 181, 0.72), rgba(26, 42, 69, 0.9)); --file-button-text: #ffffff; --file-button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 20px rgba(96, 154, 238, 0.24); } :root[data-theme="light"] { color-scheme: light; --bg: #f3f5fb; --panel: rgba(255, 255, 255, 0.86); --panel-strong: rgba(255, 255, 255, 0.97); --panel-solid: linear-gradient(160deg, #ffffff, #f4f6fc); --border: rgba(60, 62, 110, 0.18); --border-soft: rgba(60, 62, 110, 0.12); --border-bright: rgba(79, 70, 229, 0.45); --text: #182038; --muted: #4a5468; --soft: #7b8598; --accent: #4f46e5; --accent-2: #4338ca; --good: #16805a; --bad: #c2413d; --warn: #a4731c; --shadow: 0 24px 70px rgba(30, 35, 70, 0.14); --overlay-rgb: 30, 35, 70; --ink-rgb: 24, 32, 56; --accent-rgb: 79, 70, 229; --good-rgb: 22, 128, 90; --bad-rgb: 194, 65, 61; --warn-rgb: 164, 115, 28; --input-bg: #ffffff; --input-border: rgba(60, 62, 110, 0.22); --input-chevron: #5b6b84; --btn-secondary-bg: rgba(30, 35, 70, 0.06); --flash-danger-bg: rgba(255, 235, 235, 0.9); --flash-success-bg: rgba(230, 250, 238, 0.9); --flash-info-bg: rgba(232, 240, 255, 0.9); --brand-glow: none; --body-grad: radial-gradient(circle at 50% 9%, rgba(79, 70, 229, 0.10), transparent 16rem), radial-gradient(circle at 12% 36%, rgba(79, 70, 229, 0.06), transparent 28rem), linear-gradient(180deg, #eef0f9 0%, var(--bg) 42%, #e9ebf5 100%); /* Indigo Slate — light component surfaces */ --primary-btn-bg: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); --primary-btn-text: #ffffff; --primary-btn-glow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 20px rgba(79, 70, 229, 0.25), 0 2px 6px rgba(30, 35, 70, 0.12); --primary-btn-glow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 26px rgba(79, 70, 229, 0.32), 0 4px 10px rgba(30, 35, 70, 0.14); --primary-btn-hover-border: #4338ca; --tab-bg: #e9edf6; --tab-text: #4a5468; --tab-hover-bg: #dfe4f1; --tab-active-bg: #ffffff; --tab-active-text: #4f46e5; --tab-active-border: #4f46e5; --tab-active-border-bottom: #4f46e5; --tab-active-shadow: 0 2px 8px rgba(30, 35, 70, 0.10); --icon-tile-bg: linear-gradient(145deg, #edeffb, #dfe3f5); --icon-tile-icon: #4f46e5; --icon-tile-shadow: 0 8px 20px rgba(30, 35, 70, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6); --file-button-bg: linear-gradient(180deg, #ebedfa, #dde1f4); --file-button-text: #4338ca; --file-button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 4px rgba(30, 35, 70, 0.08); } * { box-sizing: border-box; } /* ── Theme toggle ─────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border-soft); background: rgba(var(--overlay-rgb), 0.05); color: var(--muted); cursor: pointer; padding: 0; flex: 0 0 auto; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .theme-toggle:hover { color: var(--text); border-color: var(--border-bright); background: rgba(var(--overlay-rgb), 0.09); } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Dark (default): show the sun ("switch to light"). Light: show the moon. */ .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* Fixed top-right placement for the centered auth/admin pages. */ .theme-toggle.corner { position: fixed; top: 18px; right: 20px; z-index: 20; } /* ── Compact top bar (app page) ───────────────────────────── */ .topbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 6px 0 12px; } .brand-sm { margin: 0; font-size: 1.3rem; letter-spacing: 0.24em; font-weight: 600; line-height: 1; text-decoration: none; color: var(--text); } .brand-sm span { letter-spacing: 0.14em; } .topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; font-size: 0.9rem; color: var(--soft); } .topbar-actions strong { color: var(--muted); font-weight: 600; }