/* Small overrides on top of Tailwind. Most styling is utility-first. */ [x-cloak] { display: none !important; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } /* HTMX request indicator */ .htmx-request .htmx-indicator { display: inline-block; } .htmx-indicator { display: none; } table.compact td, table.compact th { padding: 0.5rem 0.75rem; } /* ============================================================= * v9.9.13.2 — Theme system * ------------------------------------------------------------- * Tailwind's `brand`, `primary`, `sidebar` palettes resolve to * `rgb(var(--brand-N) / )` (see tailwind.config in * base.html). Switching the `data-theme` attribute on * therefore re-skins every brand-/primary-/sidebar- utility * across the entire app — no template changes required. * * Variables hold SPACE-SEPARATED rgb triples (no commas, no * `rgb(...)` wrapper) so Tailwind can compose alpha onto them. * * --brand-500: 93 122 78; /* #5d7a4e (forest) * * Themes shipped: * - forest (default, original) * - sunrise (orange — opt-in via the sidebar picker) * ============================================================= */ /* ---------- Forest (default) ---------- */ :root, html[data-theme="forest"] { /* brand — deeper forest green (action buttons & accents) */ --brand-50: 241 246 236; --brand-100: 222 233 210; --brand-200: 188 210 164; --brand-300: 155 187 120; --brand-400: 126 163 90; --brand-500: 93 122 78; --brand-600: 74 98 64; --brand-700: 58 78 51; --brand-800: 44 58 38; --brand-900: 29 39 25; /* primary — soft sage green (surfaces) */ --primary-50: 241 246 236; --primary-100: 224 234 214; --primary-200: 200 216 184; --primary-300: 168 192 148; --primary-400: 138 171 116; --primary-500: 122 153 104; --primary-600: 93 122 78; --primary-700: 74 98 64; --primary-800: 55 74 48; --primary-900: 36 49 32; --sidebar-700: 74 98 64; --sidebar-800: 55 74 48; --sidebar-900: 36 49 32; /* Used by hard-coded gradients (sidebar, dashboard hero, login splash) */ --sidebar-grad-top: #5d7a4e; --sidebar-grad-bottom: #243120; --hero-grad-from: #7a9968; --hero-grad-mid: #5d7a4e; --hero-grad-to: #4a6240; --brand-logo-accent: #ff7a18; /* unchanged orange logo chip */ /* ---- Login page ---- */ --login-bg-from: #e7f1dd; --login-bg-mid: #d8e8e3; --login-bg-to: #d4e7ee; --login-heading: #243120; --login-muted: #6b7a5e; --login-link: #5d7a4e; --login-input-bg: #fafbf7; --login-input-border: #d8e0cc; --login-input-focus: #7a9968; --login-input-ring: 122 153 104; /* rgb triple for rgba() */ --login-input-text: #243120; --login-placeholder: #9bab8c; --login-icon: #7a9968; --login-btn-from: #8aab74; --login-btn-mid: #5d7a4e; --login-btn-to: #4a6240; --login-btn-hover-from:#7a9968; --login-btn-hover-mid: #4a6240; --login-btn-hover-to: #3a4e33; --login-btn-shadow: 74 98 64; /* rgb triple */ --login-leaf-fill: #7a9968; --login-leaf-fill-alt: #8aab74; --login-leaf-fill-3: #9bbb78; --login-leaf-stem: #5d7a4e; --login-brand-icon-from:#8aab74; --login-brand-icon-to: #5d7a4e; } /* ---------- Sunrise (orange) ---------- */ html[data-theme="sunrise"] { /* brand — vibrant carrot orange */ --brand-50: 255 245 236; --brand-100: 255 231 207; --brand-200: 255 201 153; --brand-300: 255 168 99; --brand-400: 255 138 55; --brand-500: 244 113 24; /* #f47118 */ --brand-600: 217 90 11; /* #d95a0b */ --brand-700: 168 67 10; --brand-800: 124 50 9; --brand-900: 90 36 7; /* primary — warm amber (surfaces) */ --primary-50: 255 245 236; --primary-100: 255 231 207; --primary-200: 255 201 153; --primary-300: 255 168 99; --primary-400: 255 138 55; --primary-500: 244 113 24; --primary-600: 217 90 11; --primary-700: 168 67 10; --primary-800: 124 50 9; --primary-900: 90 36 7; /* darker sidebar slate (matches the "production" orange mock) */ --sidebar-700: 26 42 74; --sidebar-800: 19 32 58; --sidebar-900: 14 23 38; --sidebar-grad-top: #0e1726; --sidebar-grad-bottom: #080f1d; --hero-grad-from: #ff8a37; --hero-grad-mid: #f47118; --hero-grad-to: #d95a0b; --brand-logo-accent: #ffffff; /* ---- Login page (Sunrise) ---- */ --login-bg-from: #fff5ec; --login-bg-mid: #ffe7cf; --login-bg-to: #fde0b8; --login-heading: #5a2407; --login-muted: #8a6238; --login-link: #d95a0b; --login-input-bg: #fffaf3; --login-input-border: #ffd4a8; --login-input-focus: #f47118; --login-input-ring: 244 113 24; --login-input-text: #5a2407; --login-placeholder: #c39870; --login-icon: #f47118; --login-btn-from: #ff8a37; --login-btn-mid: #f47118; --login-btn-to: #d95a0b; --login-btn-hover-from:#f47118; --login-btn-hover-mid: #d95a0b; --login-btn-hover-to: #a8430a; --login-btn-shadow: 217 90 11; --login-leaf-fill: #ffa863; --login-leaf-fill-alt: #ffc999; --login-leaf-fill-3: #ff8a37; --login-leaf-stem: #d95a0b; --login-brand-icon-from:#ff8a37; --login-brand-icon-to: #d95a0b; } /* ---------------------------------------------------------------------- * v9.9.11.4 - hide the sidebar scrollbar. * -------------------------------------------------------------------- */ .no-scrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / old Edge */ } .no-scrollbar::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; background: transparent; } .no-scrollbar::-webkit-scrollbar-thumb, .no-scrollbar::-webkit-scrollbar-track { background: transparent; } aside > nav.no-scrollbar { scroll-behavior: smooth; } /* Themed sidebar gradient — used by the hard-coded gradient in _sidebar.html. Setting via CSS variables means the gradient re-themes when data-theme flips. */ .themed-sidebar { background: linear-gradient(180deg, var(--sidebar-grad-top) 0%, var(--sidebar-grad-bottom) 100%); } /* Themed dashboard hero — wins over inline `style` via !important so v9-era inline-gradient backgrounds still re-skin on theme change. */ .theme-hero { background: radial-gradient(circle at 18% 22%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 40%), radial-gradient(circle at 82% 75%, rgba(0,0,0,0.18) 0, rgba(0,0,0,0) 40%), linear-gradient(120deg, var(--hero-grad-from) 0%, var(--hero-grad-mid) 50%, var(--hero-grad-to) 100%) !important; } /* Small transition so theme swaps feel smooth instead of a hard flash. */ html, body, aside, header, button, a, .themed-sidebar { transition-property: background-color, color, border-color, fill, stroke; transition-duration: 180ms; }