/* Theme definitions. * * Strategy: Bootstrap 5.3 exposes its entire palette as CSS custom props * (--bs-body-bg, --bs-body-color, --bs-secondary-bg, etc.) and derives * every built-in component from them. base.html sets `data-bs-theme` * ("light" or "dark") on , which activates Bootstrap's scoped * dark-mode defaults for every non-Light theme. Here we only RETINT the * specific variables that give each theme its distinctive palette — * Bootstrap does the rest (cards, tables, forms, dropdowns, modals). * * Do not add per-component overrides here for dark themes unless a * specific Bootstrap class breaks. The previous version of this file * maintained parallel --bg-* vars and fought Bootstrap's dark defaults * component by component; that pattern was fragile (Bootstrap's own * selectors would out-specificity ours) and it's what we replaced. */ body { font-family: Arial, sans-serif; font-size: 14px; } .navbar, .nav-link, .dropdown-header { font-size: 14px; } .dropdown-item { font-size: 12px !important; } /* Cards that wrap a full-bleed table (`.card-body.p-0` + table) or a flush list-group show square inner corners covering the card's rounded border. Clip so the contents inherit the card's outer radius. If any card ever needs a dropdown/tooltip to escape its bounds, override with `overflow: visible` on that specific card. */ .card { overflow: hidden; } /* Watermark — painted on html::before so it sits behind body without creating a stacking context that traps dropdown z-indexes. */ html::before { content: ''; position: fixed; inset: 0; background: url('/static/images/logo/logo-master.png') center center / min(600px, 60vw) no-repeat; opacity: 0.08; pointer-events: none; z-index: 0; } /* ============================================ THEME PALETTES ============================================ */ /* Light — Bootstrap's defaults are fine; only adjust what we care about. */ [data-theme="light"] { /* Keep defaults — no overrides needed. */ } /* Dark — richer navy than Bootstrap's neutral gray dark mode. */ [data-theme="dark"] { --bs-body-bg: #1a1a2e; --bs-body-bg-rgb: 26, 26, 46; --bs-body-color: #e4e4e4; --bs-body-color-rgb: 228, 228, 228; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-bg: #16213e; --bs-secondary-bg-rgb: 22, 33, 62; --bs-secondary-color: #a0a0a0; --bs-secondary-color-rgb: 160, 160, 160; --bs-tertiary-bg: #0f3460; --bs-tertiary-bg-rgb: 15, 52, 96; --bs-tertiary-color: #8a8a8a; --bs-border-color: #0f3460; --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-heading-color: #ffffff; --bs-link-color: #6ea8fe; --bs-link-color-rgb: 110, 168, 254; --bs-link-hover-color: #8bb9fe; --bs-link-hover-color-rgb: 139, 185, 254; } /* Catpuccin Mocha. */ [data-theme="catpuccin"] { --bs-body-bg: #1e1e2e; --bs-body-bg-rgb: 30, 30, 46; --bs-body-color: #cdd6f4; --bs-body-color-rgb: 205, 214, 244; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-bg: #313244; --bs-secondary-bg-rgb: 49, 50, 68; --bs-secondary-color: #a6adc8; --bs-secondary-color-rgb: 166, 173, 200; --bs-tertiary-bg: #45475a; --bs-tertiary-bg-rgb: 69, 71, 90; --bs-tertiary-color: #7f849c; --bs-border-color: #45475a; --bs-border-color-translucent: rgba(205, 214, 244, 0.15); --bs-heading-color: #f5e0dc; --bs-link-color: #89b4fa; --bs-link-color-rgb: 137, 180, 250; --bs-link-hover-color: #b4befe; --bs-link-hover-color-rgb: 180, 190, 254; --bs-primary: #89b4fa; --bs-primary-rgb: 137, 180, 250; --bs-success: #a6e3a1; --bs-danger: #f38ba8; --bs-warning: #f9e2af; --bs-info: #94e2d5; } /* Nord. */ [data-theme="nord"] { --bs-body-bg: #2e3440; --bs-body-bg-rgb: 46, 52, 64; --bs-body-color: #eceff4; --bs-body-color-rgb: 236, 239, 244; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-bg: #3b4252; --bs-secondary-bg-rgb: 59, 66, 82; --bs-secondary-color: #d8dee9; --bs-secondary-color-rgb: 216, 222, 233; --bs-tertiary-bg: #434c5e; --bs-tertiary-bg-rgb: 67, 76, 94; --bs-tertiary-color: #d8dee9; --bs-border-color: #4c566a; --bs-border-color-translucent: rgba(236, 239, 244, 0.15); --bs-heading-color: #ffffff; --bs-link-color: #88c0d0; --bs-link-color-rgb: 136, 192, 208; --bs-link-hover-color: #a3d0de; --bs-link-hover-color-rgb: 163, 208, 222; --bs-primary: #88c0d0; --bs-primary-rgb: 136, 192, 208; --bs-success: #a3be8c; --bs-danger: #bf616a; --bs-warning: #ebcb8b; --bs-info: #81a1c1; } /* Solarized Dark. */ [data-theme="solarized"] { --bs-body-bg: #002b36; --bs-body-bg-rgb: 0, 43, 54; --bs-body-color: #eee8d5; --bs-body-color-rgb: 238, 232, 213; --bs-emphasis-color: #fdf6e3; --bs-emphasis-color-rgb: 253, 246, 227; --bs-secondary-bg: #073642; --bs-secondary-bg-rgb: 7, 54, 66; --bs-secondary-color: #93a1a1; --bs-secondary-color-rgb: 147, 161, 161; --bs-tertiary-bg: #094959; --bs-tertiary-bg-rgb: 9, 73, 89; --bs-tertiary-color: #839496; --bs-border-color: #094959; --bs-border-color-translucent: rgba(238, 232, 213, 0.15); --bs-heading-color: #fdf6e3; --bs-link-color: #268bd2; --bs-link-color-rgb: 38, 139, 210; --bs-link-hover-color: #4aa3e0; --bs-link-hover-color-rgb: 74, 163, 224; --bs-primary: #268bd2; --bs-primary-rgb: 38, 139, 210; --bs-success: #859900; --bs-danger: #dc322f; --bs-warning: #b58900; --bs-info: #2aa198; } /* ============================================ GLOBAL OVERRIDES (apply to every theme) ============================================ */ /* Bootstrap's `.bg-light` and `.table-light` are hardcoded to literal light-gray values, so they stay visually bright in dark themes and clash with dark text. Remap them to the theme-aware secondary bg so surfaces like "Address / Scope of Work" expansion panels and thead-style rows flip correctly. Badges with `.bg-light` are left alone (`:not(.badge)`) — they're meant to be accent chips. */ .bg-light:not(.badge) { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } .table-light, .table-light > th, .table-light > td { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-secondary-bg); --bs-table-border-color: var(--bs-border-color); background-color: var(--bs-secondary-bg); color: var(--bs-body-color); } /* Striping disabled — felt inconsistent with the flat rows on /jobs/ and made hover states hard to see on odd rows. Bootstrap 5 drives the stripe via `--bs-table-accent-bg` and an inner box-shadow, so clearing that variable is what actually removes it. */ .table-striped > tbody > tr > *, .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent !important; } /* ============================================ DENSITY SETTINGS ============================================ */ /* Comfortable — more spacing, larger touch targets. */ [data-density="comfortable"] .card-body { padding: 1.5rem; } [data-density="comfortable"] .card-header { padding: 1rem 1.5rem; } [data-density="comfortable"] .table td, [data-density="comfortable"] .table th { padding: 1rem; } [data-density="comfortable"] .form-control, [data-density="comfortable"] .form-select { padding: 0.75rem 1rem; } [data-density="comfortable"] .btn { padding: 0.625rem 1.25rem; } [data-density="comfortable"] .mb-3 { margin-bottom: 1.25rem !important; } [data-density="comfortable"] .container { padding-top: 1.5rem; } /* Default — Bootstrap defaults. */ /* Compact — tighter spacing, more content visible. */ [data-density="compact"] .card-body { padding: 0.75rem; } [data-density="compact"] .card-header { padding: 0.5rem 0.75rem; } [data-density="compact"] .card-header h3, [data-density="compact"] .card-header h5 { font-size: 1rem; } [data-density="compact"] .table td, [data-density="compact"] .table th { padding: 0.4rem 0.5rem; font-size: 0.875rem; } [data-density="compact"] .form-control, [data-density="compact"] .form-select { padding: 0.25rem 0.5rem; font-size: 0.875rem; } [data-density="compact"] .form-label { margin-bottom: 0.25rem; font-size: 0.875rem; } [data-density="compact"] .btn { padding: 0.25rem 0.75rem; font-size: 0.875rem; } [data-density="compact"] .btn-sm { padding: 0.15rem 0.5rem; font-size: 0.8rem; } [data-density="compact"] .mb-3 { margin-bottom: 0.75rem !important; } [data-density="compact"] .mb-4 { margin-bottom: 1rem !important; } [data-density="compact"] .mt-4 { margin-top: 1rem !important; } [data-density="compact"] .container { padding-top: 0.5rem; } [data-density="compact"] h2 { font-size: 1.5rem; } [data-density="compact"] .dropdown-item { padding: 0.35rem 1rem; font-size: 0.875rem; }