/* * Theme tokens. * * Public semantic API: --sv-bg, --sv-text, --sv-heading, --sv-link. * Internal palette (--color-*) drives the Bootstrap 5.3 bridge below. * * Override order: * 1. :root — fallback defaults + tokens shared by every theme * 2. [data-theme="..."] — per-theme overrides for what actually changes * * data-theme is set on (see templates/base.html and static/js/theme.js). */ /* -------------------------------------------------------------------------- */ /* :root — fallback defaults + shared tokens */ /* -------------------------------------------------------------------------- */ :root { --theme-transition-duration: 220ms; /* Forward declaration: full scale lives in base.css `:root` (loaded after theme). */ --sv-radius-circle: 999px; /* Public semantic tokens (shared values live here only) */ --sv-bg: #ffffff; --sv-text: #111111; --sv-heading: #168150; --sv-link: #d68910; --sv-link-hover: #d68910; /* Fallback RGB triplets for rgb(var(--color-*-rgb)) before/without [data-theme] */ --color-bg-rgb: 255, 255, 255; --color-text-rgb: 17, 17, 17; --color-accent: #168150; } /* -------------------------------------------------------------------------- */ /* Per-theme overrides */ /* -------------------------------------------------------------------------- */ /* Per-theme palette tokens (--sv-*, --color-*) are injected from Django (templates/base.html). */ /* * Paint the viewport canvas explicitly. Relying only on body + transparent main * can leave the content column visually stuck on the wrong layer next to * html/body sizing or UA canvas defaults when color-scheme changes. */ html { background-color: var(--sv-bg); } /* -------------------------------------------------------------------------- */ /* Bootstrap 5.3 bridge (must follow palette blocks; beats CDN :root rules) */ /* -------------------------------------------------------------------------- */ html[data-theme][data-bs-theme] { background-color: var(--sv-bg); color: var(--color-text); /* Scrollbars — shared by Firefox (scrollbar-color) + WebKit paint below */ --sv-scrollbar-size: 9px; --sv-scrollbar-radius: var(--sv-radius-circle); --sv-scrollbar-track: color-mix(in srgb, var(--sv-bg) 90%, rgb(var(--color-text-rgb)) 10%); --sv-scrollbar-thumb: color-mix(in srgb, rgb(var(--color-text-muted-rgb)) 38%, transparent); --sv-scrollbar-thumb-hover: color-mix(in srgb, rgb(var(--color-text-muted-rgb)) 52%, rgb(var(--color-heading-rgb)) 12%)); /* * Bootstrap maps body + utilities with BOTH --bs-body-bg and --bs-body-bg-rgb. * If only --bs-body-bg is overridden, rgba(var(--bs-body-bg-rgb), …) and .bg-body * keep CDN defaults (including #212529 when dark tokens leak). Mirror RGB triplets. */ --bs-body-bg: rgb(var(--color-bg-rgb)); --bs-body-bg-rgb: var(--color-bg-rgb); --bs-body-color: rgb(var(--color-text-rgb)); --bs-body-color-rgb: var(--color-text-rgb); --bs-emphasis-color: rgb(var(--color-text-rgb)); --bs-emphasis-color-rgb: var(--color-text-rgb); --bs-secondary-color: rgb(var(--color-text-muted-rgb)); --bs-secondary-color-rgb: var(--color-text-muted-rgb); --bs-tertiary-color: color-mix(in srgb, rgb(var(--color-text-muted-rgb)) 88%, rgb(var(--color-text-rgb))); --bs-tertiary-color-rgb: var(--color-text-muted-rgb); --bs-secondary-bg: rgb(var(--color-surface-rgb)); --bs-tertiary-bg: rgb(var(--color-surface-alt-rgb)); --bs-secondary-bg-subtle: color-mix(in srgb, rgb(var(--color-surface-rgb)) 88%, rgb(var(--color-text-rgb)) 12%); --bs-tertiary-bg-subtle: color-mix(in srgb, rgb(var(--color-surface-alt-rgb)) 90%, rgb(var(--color-text-rgb)) 10%); --bs-border-color: var(--color-border); --bs-border-color-translucent: color-mix(in srgb, var(--color-border) 78%, transparent); --bs-secondary-border-subtle: color-mix(in srgb, var(--color-border) 92%, transparent); --bs-link-color-rgb: var(--color-link-rgb); --bs-link-hover-color-rgb: var(--color-link-hover-rgb, var(--color-link-rgb)); --bs-link-color: rgb(var(--color-link-rgb)); --bs-link-hover-color: rgb(var(--bs-link-hover-color-rgb)); --bs-heading-color: rgb(var(--color-heading-rgb)); --bs-code-color: rgb(var(--color-heading-rgb)); --bs-highlight-bg: color-mix(in srgb, rgb(var(--color-surface-rgb)) 82%, rgb(var(--color-link-rgb)) 18%); --bs-primary: var(--color-heading); --bs-primary-rgb: var(--color-heading-rgb); --bs-secondary: rgb(var(--color-text-muted-rgb)); --bs-secondary-rgb: var(--color-text-muted-rgb); --bs-light: rgb(var(--color-surface-rgb)); --bs-light-rgb: var(--color-surface-rgb); --bs-dark: rgb(var(--color-surface-alt-rgb)); --bs-dark-rgb: var(--color-surface-alt-rgb); --bs-card-bg: rgb(var(--color-surface-alt-rgb)); --bs-card-color: rgb(var(--color-text-rgb)); --bs-card-border-color: var(--color-border); --bs-card-cap-bg: rgb(var(--color-surface-rgb)); --bs-card-cap-color: rgb(var(--color-text-rgb)); --bs-list-group-color: rgb(var(--color-text-rgb)); --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--color-border); --bs-list-group-hover-bg: rgb(var(--color-surface-rgb)); --bs-list-group-action-hover-bg: rgb(var(--color-surface-rgb)); --bs-list-group-action-hover-color: rgb(var(--color-text-rgb)); --bs-list-group-action-active-bg: rgb(var(--color-surface-rgb)); --bs-list-group-action-active-color: rgb(var(--color-text-rgb)); --bs-list-group-disabled-color: rgb(var(--color-text-muted-rgb)); --bs-list-group-action-color: rgb(var(--color-text-rgb)); --bs-form-control-bg: rgb(var(--color-surface-alt-rgb)); --bs-form-control-color: rgb(var(--color-text-rgb)); --bs-form-control-border-color: var(--color-border); --bs-form-control-disabled-bg: rgb(var(--color-surface-rgb)); --bs-form-invalid-border-color: var(--color-danger); --bs-input-focus-border-color: var(--color-heading); --bs-input-focus-box-shadow: 0 0 0 0.2rem var(--color-focus-ring); --bs-focus-ring-color: var(--color-focus-ring); --bs-focus-ring-opacity: 1; /* * Bootstrap 5.3 radius bridge — ties CDN components to the global sv-* scale * (defined in base.css `:root`). Keeps cards/shells slightly larger than controls. */ --bs-border-radius: var(--sv-radius-control); --bs-border-radius-sm: var(--sv-radius-xs); --bs-border-radius-lg: var(--sv-radius-block); --bs-border-radius-xl: var(--sv-radius-block); --bs-border-radius-xxl: var(--sv-radius-block); --bs-border-radius-2xl: var(--sv-radius-block); --bs-btn-border-radius: var(--sv-radius-control); --bs-card-border-radius: var(--sv-radius-block); --bs-card-inner-border-radius: calc(var(--sv-radius-block) - var(--bs-border-width)); --bs-dropdown-border-radius: var(--sv-radius-control); --bs-modal-border-radius: var(--sv-radius-block); --bs-toast-border-radius: var(--sv-radius-control); --bs-list-group-border-radius: var(--sv-radius-control); --bs-nav-tabs-border-radius: var(--sv-radius-control); --bs-nav-pills-border-radius: var(--sv-radius-circle); --bs-navbar-toggler-border-radius: var(--sv-radius-control); --bs-accordion-border-radius: var(--sv-radius-control); --bs-accordion-inner-border-radius: calc(var(--sv-radius-control) - var(--bs-border-width)); --bs-dropdown-bg: rgb(var(--color-surface-alt-rgb)); --bs-dropdown-border-color: var(--color-border); --bs-dropdown-link-color: rgb(var(--color-text-rgb)); --bs-dropdown-link-hover-color: rgb(var(--color-text-rgb)); --bs-dropdown-link-hover-bg: rgb(var(--color-surface-rgb)); --bs-dropdown-link-active-color: rgb(var(--color-text-rgb)); --bs-dropdown-link-active-bg: rgb(var(--color-surface-rgb)); --bs-dropdown-header-color: rgb(var(--color-text-muted-rgb)); --bs-dropdown-divider-bg: var(--color-border); --bs-pagination-color: rgb(var(--color-text-rgb)); --bs-pagination-bg: rgb(var(--color-surface-alt-rgb)); --bs-pagination-border-color: var(--color-border); --bs-pagination-hover-color: rgb(var(--color-heading-rgb)); --bs-pagination-hover-bg: rgb(var(--color-surface-rgb)); --bs-pagination-hover-border-color: var(--color-border); --bs-pagination-focus-color: rgb(var(--color-heading-rgb)); --bs-pagination-focus-bg: rgb(var(--color-surface-rgb)); --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--color-focus-ring); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: rgb(var(--color-heading-rgb)); --bs-pagination-active-border-color: rgb(var(--color-heading-rgb)); --bs-pagination-disabled-color: rgb(var(--color-text-muted-rgb)); --bs-pagination-disabled-bg: rgb(var(--color-surface-rgb)); --bs-pagination-disabled-border-color: var(--color-border); --bs-alert-bg: rgb(var(--color-surface-rgb)); --bs-alert-border-color: var(--color-border); --bs-alert-color: rgb(var(--color-text-rgb)); --bs-modal-bg: rgb(var(--color-surface-alt-rgb)); --bs-modal-color: rgb(var(--color-text-rgb)); --bs-modal-border-color: var(--color-border); --bs-modal-header-border-color: var(--color-border); --bs-modal-footer-border-color: var(--color-border); --bs-offcanvas-bg: rgb(var(--color-surface-alt-rgb)); --bs-offcanvas-color: rgb(var(--color-text-rgb)); --bs-offcanvas-border-color: var(--color-border); --bs-toast-bg: rgb(var(--color-surface-alt-rgb)); --bs-toast-color: rgb(var(--color-text-rgb)); --bs-toast-border-color: var(--color-border); --bs-toast-header-bg: rgb(var(--color-surface-rgb)); --bs-toast-header-color: rgb(var(--color-text-rgb)); --bs-table-color: rgb(var(--color-text-rgb)); --bs-table-bg: transparent; --bs-table-border-color: var(--color-border); --bs-table-striped-bg: color-mix(in srgb, rgb(var(--color-surface-rgb)) 65%, transparent); --bs-table-hover-bg: rgb(var(--color-surface-rgb)); --bs-table-active-bg: rgb(var(--color-surface-rgb)); --bs-accordion-bg: rgb(var(--color-surface-alt-rgb)); --bs-accordion-border-color: var(--color-border); --bs-accordion-btn-color: rgb(var(--color-text-rgb)); --bs-accordion-active-bg: rgb(var(--color-surface-rgb)); --bs-accordion-active-color: rgb(var(--color-heading-rgb)); --bs-nav-link-color: rgb(var(--color-text-muted-rgb)); --bs-nav-link-hover-color: rgb(var(--color-heading-rgb)); --bs-nav-tabs-link-active-color: rgb(var(--color-heading-rgb)); --bs-nav-tabs-link-active-bg: rgb(var(--color-surface-alt-rgb)); --bs-nav-tabs-border-color: var(--color-border); --bs-breadcrumb-divider-color: rgb(var(--color-text-muted-rgb)); --bs-breadcrumb-item-active-color: rgb(var(--color-text-muted-rgb)); --bs-btn-close-color: rgb(var(--color-text-rgb)); } /* * Scrollbars — thin, theme-aware (Firefox scrollbar-* + WebKit: Chrome, Edge, Safari). * Viewport uses html::-webkit-scrollbar*; nested overflow uses descendant selectors. * Inner regions inherit tokens from html. Components that must hide bars (e.g. custom UI) * should override with scrollbar-width: none and matching ::-webkit-scrollbar { display: none }. */ html[data-theme][data-bs-theme], html[data-theme][data-bs-theme] * { scrollbar-width: thin; scrollbar-color: var(--sv-scrollbar-thumb) var(--sv-scrollbar-track); } html[data-theme][data-bs-theme]::-webkit-scrollbar, html[data-theme][data-bs-theme] *::-webkit-scrollbar { width: var(--sv-scrollbar-size); height: var(--sv-scrollbar-size); } html[data-theme][data-bs-theme]::-webkit-scrollbar-track, html[data-theme][data-bs-theme] *::-webkit-scrollbar-track { background: var(--sv-scrollbar-track); border-radius: var(--sv-scrollbar-radius); } html[data-theme][data-bs-theme]::-webkit-scrollbar-thumb, html[data-theme][data-bs-theme] *::-webkit-scrollbar-thumb { background-color: var(--sv-scrollbar-thumb); border-radius: var(--sv-scrollbar-radius); border: 2px solid var(--sv-scrollbar-track); background-clip: content-box; box-shadow: inset 0 1px 0 color-mix(in srgb, rgb(var(--color-text-rgb)) 10%, transparent); } html[data-theme][data-bs-theme]::-webkit-scrollbar-thumb:hover, html[data-theme][data-bs-theme] *::-webkit-scrollbar-thumb:hover { background-color: var(--sv-scrollbar-thumb-hover); border: 2px solid var(--sv-scrollbar-track); background-clip: content-box; box-shadow: inset 0 1px 0 color-mix(in srgb, rgb(var(--color-text-rgb)) 14%, transparent); } html[data-theme][data-bs-theme]::-webkit-scrollbar-corner, html[data-theme][data-bs-theme] *::-webkit-scrollbar-corner { background: var(--sv-scrollbar-track); } @media (prefers-contrast: more) { html[data-theme][data-bs-theme] { --sv-scrollbar-thumb: color-mix(in srgb, rgb(var(--color-text-muted-rgb)) 58%, transparent); --sv-scrollbar-thumb-hover: color-mix(in srgb, rgb(var(--color-text-muted-rgb)) 72%, rgb(var(--color-heading-rgb)) 10%)); --sv-scrollbar-track: color-mix(in srgb, var(--sv-bg) 84%, rgb(var(--color-text-rgb)) 16%); } } /* Navbar: shell + Bootstrap navbar variables (inherit semantic tokens from html) */ .sv-navbar-shell, .navbar { --bs-navbar-color: rgb(var(--color-text-muted-rgb)); --bs-navbar-hover-color: rgb(var(--color-heading-rgb)); --bs-navbar-active-color: rgb(var(--color-heading-rgb)); --bs-navbar-brand-color: rgb(var(--color-heading-rgb)); --bs-navbar-brand-hover-color: rgb(var(--color-heading-rgb)); background-color: var(--color-navbar-bg); } .sv-navbar-shell .navbar { background-color: transparent; } html[data-theme][data-bs-theme], html[data-theme][data-bs-theme] a, html[data-theme][data-bs-theme] .sv-btn, html[data-theme][data-bs-theme] .pagination, html[data-theme][data-bs-theme] .dropdown-menu, html[data-theme][data-bs-theme] .dropdown-item, html[data-theme][data-bs-theme] .alert, html[data-theme][data-bs-theme] .card, html[data-theme][data-bs-theme] tbody, html[data-theme][data-bs-theme] thead, html[data-theme][data-bs-theme] .border, html[data-theme][data-bs-theme] [class*="border-"], html[data-theme][data-bs-theme] footer, html[data-theme][data-bs-theme] small, html[data-theme][data-bs-theme] figcaption, html[data-theme][data-bs-theme] blockquote, html[data-theme][data-bs-theme] figure, html[data-theme][data-bs-theme] .form-control, html[data-theme][data-bs-theme] .form-select, html[data-theme][data-bs-theme] textarea, html[data-theme][data-bs-theme] .nav-link, html[data-theme][data-bs-theme] .input-group-text, html[data-theme][data-bs-theme] kbd, html[data-theme][data-bs-theme] .list-group-item, html[data-theme][data-bs-theme] .modal-content { transition: color var(--theme-transition-duration) ease, background-color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease, box-shadow var(--theme-transition-duration) ease, fill var(--theme-transition-duration) ease, stroke var(--theme-transition-duration) ease; } html, body { background-color: var(--sv-bg); background-image: none; } body { color: var(--sv-text); min-height: 100vh; } main { background-color: var(--sv-bg); background-image: none; color: var(--sv-text); overflow-x: clip; } p { color: inherit; } a { color: var(--sv-link); } a:hover, a:focus-visible { color: var(--sv-link-hover, var(--sv-link)); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sv-heading); } /* Templates use Bootstrap “light” naming for emerald titles — remap to heading */ .text-light { color: rgb(var(--color-heading-rgb)) !important; } .link-light { color: rgb(var(--color-link-rgb)) !important; } .text-muted-soft { color: rgb(var(--color-text-muted-rgb)); } .sv-navbar-brand, .sv-nav-link-active.nav-link { color: rgb(var(--color-heading-rgb)); } .card, .sv-surface { background-color: rgb(var(--color-surface-alt-rgb)); border-color: var(--color-border); color: rgb(var(--color-text-rgb)); box-shadow: var(--color-shadow-soft); } .card-header, .card-footer { background-color: rgb(var(--color-surface-rgb)); color: inherit; border-color: var(--color-border); } .sv-footer { background-color: var(--color-footer-bg); color: rgb(var(--color-text-muted-rgb)); } .sv-control { background-color: rgb(var(--color-surface-alt-rgb)); color: var(--color-text); border-color: var(--color-border); } .sv-control:focus { border-color: var(--color-heading); box-shadow: 0 0 0 0.2rem var(--color-focus-ring); } .form-control:not(.border-0), .form-select:not(.border-0), textarea.form-control { background-color: rgb(var(--color-surface-alt-rgb)); color: rgb(var(--color-text-rgb)); border-color: var(--color-border); } .form-control:focus, .form-select:focus, textarea:focus { border-color: var(--color-heading); box-shadow: 0 0 0 0.2rem var(--color-focus-ring); color: rgb(var(--color-text-rgb)); } .form-control::placeholder { color: rgb(var(--color-text-muted-rgb)); } .search-form .form-control { background-color: rgb(var(--color-surface-alt-rgb)); color: rgb(var(--color-text-rgb)); border-color: var(--color-border); } .input-group-text { background-color: rgb(var(--color-surface-rgb)); border-color: var(--color-border); color: rgb(var(--color-text-rgb)); } .dropdown-menu { background-color: var(--bs-dropdown-bg); border-color: var(--bs-dropdown-border-color); color: rgb(var(--color-text-rgb)); } .dropdown-item { color: var(--bs-dropdown-link-color); } .dropdown-item:hover, .dropdown-item:focus { color: var(--bs-dropdown-link-hover-color); background-color: var(--bs-dropdown-link-hover-bg); } .dropdown-header { color: var(--bs-dropdown-header-color); } .dropdown-divider { border-color: var(--bs-dropdown-divider-bg); } .list-group-item { background-color: transparent; color: rgb(var(--color-text-rgb)); border-color: var(--color-border); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: rgb(var(--color-surface-rgb)); color: rgb(var(--color-text-rgb)); } .list-group-item-action:active { background-color: rgb(var(--color-surface-rgb)); color: rgb(var(--color-text-rgb)); } .breadcrumb-item + .breadcrumb-item::before { color: rgb(var(--color-text-muted-rgb)); } .pagination { --bs-pagination-color: rgb(var(--color-text-rgb)); --bs-pagination-bg: rgb(var(--color-surface-alt-rgb)); --bs-pagination-border-color: var(--color-border); } .alert { --bs-alert-bg: rgb(var(--color-surface-rgb)); --bs-alert-border-color: var(--color-border); --bs-alert-color: rgb(var(--color-text-rgb)); background-color: var(--bs-alert-bg); border-color: var(--bs-alert-border-color); color: var(--bs-alert-color); } .badge.text-bg-secondary { color: rgb(var(--color-bg-rgb)) !important; background-color: rgb(var(--color-text-muted-rgb)) !important; } code:not(pre code), .code:not(pre code) { font-size: 0.92em; color: rgb(var(--color-heading-rgb)); background-color: color-mix(in srgb, rgb(var(--color-surface-rgb)) 94%, rgb(var(--color-heading-rgb)) 6%); border: 1px solid color-mix(in srgb, var(--color-border) 92%, rgb(var(--color-heading-rgb)) 8%); border-radius: var(--sv-radius-sm); padding: 0.1em 0.35em; } kbd { font-size: 0.85em; color: rgb(var(--color-text-rgb)); background-color: rgb(var(--color-surface-alt-rgb)); border: 1px solid var(--color-border); border-radius: var(--sv-radius-xs); padding: 0.1em 0.35em; box-shadow: inset 0 -0.125em var(--color-border); } pre code, pre .code { border: none; padding: 0; } pre code, pre kbd { background-color: transparent; border: none; padding: 0; margin: 0; box-shadow: none; color: inherit; } pre { background-color: rgb(var(--color-surface-rgb)); border: 1px solid var(--color-border); border-radius: var(--sv-radius-block); color: inherit; padding: 1rem; } hr { border-color: var(--color-border); opacity: 1; } .sv-theme-toggle { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sv-radius-circle); border: 1px solid var(--color-border); color: var(--sv-theme-toggle-icon-fg, rgb(var(--color-heading-rgb))); background-color: rgb(var(--color-surface-alt-rgb)); padding: 0; } .sv-theme-toggle:hover, .sv-theme-toggle:focus-visible { border-color: var(--color-heading); box-shadow: 0 0 0 0.2rem var(--color-focus-ring); color: var(--sv-theme-toggle-hover-fg, rgb(var(--color-heading-rgb))); } .sv-theme-icon { display: none; width: 1.1rem; height: 1.1rem; line-height: 0; } .sv-theme-icon svg { width: 100%; height: 100%; } html[data-theme="light"] .sv-theme-icon--light, html[data-theme="sepia"] .sv-theme-icon--sepia, html[data-theme="dark"] .sv-theme-icon--dark, html[data-theme="system"] .sv-theme-icon--system { display: inline-flex; }