/** * SparkLog light (default) / dark themes. Toggle via data-theme="dark" on . * Preference: localStorage key sparklog-theme === "dark" */ :root { --radius: 10px; --bg: #f7f7f6; --surface: #ffffff; --surface2: #efefed; --border: #dededc; --text: #1a1a18; --muted: #5e5e5a; --accent: #3d9cf5; --accent-dim: #2a7bc4; --urgent: #d92d20; --err: #d92d20; --soon: #dc6803; --clear: #079455; --nav-active-bg: rgba(61, 156, 245, 0.1); --header-bg: color-mix(in srgb, var(--surface) 88%, var(--bg)); --hours-active-bg: rgba(61, 156, 245, 0.14); --hours-active-ring: rgba(61, 156, 245, 0.35); --row-hover: rgba(61, 156, 245, 0.06); --row-active: rgba(61, 156, 245, 0.1); --err-banner-bg: rgba(217, 45, 32, 0.08); --err-banner-text: #b42318; --err-box-bg: rgba(217, 45, 32, 0.08); --err-box-text: #b42318; --err-box-border: var(--urgent); --tag-issues-bg: rgba(217, 45, 32, 0.12); --tag-issues-text: #b42318; --tag-clear-bg: rgba(7, 148, 85, 0.12); --tag-clear-text: #067647; --lot-badge-bg: rgba(61, 156, 245, 0.14); --lot-badge-text: #1d4ed8; --overlay-scrim: rgba(0, 0, 0, 0.35); --panel-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), -8px 0 32px rgba(0, 0, 0, 0.1); } html[data-theme="dark"] { --bg: #0f0f0e; --surface: #1a1a18; --surface2: #242422; --border: #33332f; --text: #f5f5f4; --muted: #a8a8a0; --accent: #3d9cf5; --accent-dim: #5ba8f7; --urgent: #f04438; --err: #f04438; --soon: #f5a524; --clear: #12b76a; --nav-active-bg: rgba(61, 156, 245, 0.08); --header-bg: color-mix(in srgb, var(--surface) 90%, var(--bg)); --hours-active-bg: rgba(61, 156, 245, 0.2); --hours-active-ring: rgba(61, 156, 245, 0.35); --row-hover: rgba(61, 156, 245, 0.06); --row-active: rgba(61, 156, 245, 0.12); --err-banner-bg: rgba(240, 68, 56, 0.15); --err-banner-text: #fca5a5; --err-box-bg: rgba(240, 68, 56, 0.12); --err-box-text: #fca5a5; --err-box-border: var(--urgent); --tag-issues-bg: rgba(240, 68, 56, 0.2); --tag-issues-text: #fca5a5; --tag-clear-bg: rgba(18, 183, 106, 0.15); --tag-clear-text: #6ee7b7; --lot-badge-bg: rgba(61, 156, 245, 0.18); --lot-badge-text: #7eb8ff; --overlay-scrim: rgba(0, 0, 0, 0.45); --panel-shadow: -8px 0 32px rgba(0, 0, 0, 0.35); } /* Floating theme toggle (login / signup) */ .btn-theme { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-family: inherit; flex-shrink: 0; } .btn-theme:hover { border-color: var(--muted); background: var(--surface); } .btn-theme svg { width: 1.2rem; height: 1.2rem; } .btn-theme-floating { position: fixed; top: 1rem; right: 1rem; z-index: 50; } .main-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Auth pages: select chevron follows theme */ .auth-page select { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235e5e5a' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; } html[data-theme="dark"] .auth-page select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8a8a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); }