/* ============================================================================ k12panel — design token layer ---------------------------------------------------------------------------- Restyles the existing Bootstrap 4 markup via CSS custom properties. Loaded AFTER Bootstrap (and dashboard.css / simple-sidebar.css) so it wins the cascade. No HTML/class changes required. Rollout is phased (see DOCS/specs/REDESIGN-PLAN.md): Phase 0 (this commit) — tokens + safe global primitives only. Phase 1 — app shell (sidebar, topbar, footer, message banner) + canvas. Phase 2 — buttons, cards, alerts, badges, dropdowns, modals, tabs. Phase 3 — bootstrap-table data grids. Phase 4 — forms. Component sections are added in their phase; do not pre-empt them here. ============================================================================ */ /* ============================================================================ TOKENS (source of truth — many are inert until consumed in a later phase) ========================================================================== */ :root { /* ---- Color: neutral canvas + surfaces ---- */ --canvas: #f5f6f8; --surface: #ffffff; --surface-2: #f1f3f5; --border: #e7e9ee; --border-strong: #d6dae1; /* ---- Text ---- */ --text: #14181f; --text-muted: #69707d; --text-faint: #98a0ac; /* ---- Brand / primary (fixed brand blue — do NOT bind to org color) ---- */ --primary: #3b5bdb; --primary-600: #324fc4; --primary-700: #2942a8; --primary-soft: #eef1fd; /* Content-link color (separate from --primary so links can be lighter on dark without affecting buttons/nav/dropdowns). */ --link: #3b5bdb; --link-hover: #2942a8; /* ---- Per-org accent: set inline from {% get_active_org_color %} in base.html. Scoped to the org chip / active accent only (contrast). ---- */ --org-accent: var(--primary); /* ---- Status (soft tints + solid) ---- */ --success:#1f9d57; --success-soft:#e7f6ee; --warning:#b7791f; --warning-soft:#fcf3e3; /* dark accent for badge/alert text on soft bg */ --warning-strong:#dd5b10; --warning-strong-600:#c44f0d; /* caution-orange for SOLID warning buttons (white text safe) */ --danger: #d6455d; --danger-soft:#fdebef; --info: #2a86b8; --info-soft:#e7f3fa; /* ---- Sidebar (dark) ---- */ --side-bg: #0f1626; --side-bg-2: #0b1120; --side-text: #c4cad6; --side-text-mut: #7e8699; --side-active-bg: rgba(255,255,255,.07); --side-active-bd: var(--primary); /* ---- Shape & elevation ---- */ --radius-sm: 7px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 6px 18px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04); /* ---- Type ---- */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ============================================================================ DARK THEME — token overrides applied when is set. Scoped to the attribute, so anything without it (logged-out pages, backoffice) stays light automatically. Solid status/button colors are kept (white text reads fine on them over dark); only canvas/surfaces/text/borders/soft-tints and the link-primary flip. Values are tunable. ========================================================================== */ :root[data-theme="dark"] { /* Render native controls (selects + their OS-drawn option popups, scrollbars, checkboxes, date/number inputs) in dark. The only way to dark-mode a native select's option list, which CSS can't style. */ color-scheme: dark; --canvas: #0b1120; /* dark body matched to the left-menu's dark tone (menu unchanged) */ --surface: #19223c; --surface-2: #222d4c; --border: #2d3858; --border-strong: #3e4b70; --text: #e6e8eb; --text-muted: #9aa3af; --text-faint: #6b7480; --primary: #5b78e8; --primary-600: #4d6ad9; --primary-700: #93a6f5; --primary-soft: #1e2747; --link: #93a6f5; /* paler blue: more legible as text on dark */ --link-hover: #b9c6fa; --success-soft: #14271c; --warning-soft: #2a2110; --danger-soft: #2c1820; --info-soft: #10232e; /* bootstrap-table's own theme vars (its dark values key on data-bs-theme, which we don't set) — point them at our tokens. */ --bt-table-border-color: var(--border); --bt-table-loading-bg: var(--surface); --bt-table-loading-color: var(--text); } /* Component backgrounds routed through tokens so they flip with the theme. (In light, --surface is #fff, so these are no-ops there.) */ .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); } /* ============================================================================ PHASE 0 — global primitives only (typography, headings, links) Canvas background is intentionally deferred to Phase 1 so bare tables don't sit on gray before surfaces are introduced. ========================================================================== */ body { font-family: var(--font); font-size: .875rem; /* baseline density; backoffice/base-nologon lack dashboard.css */ color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; } a { color: var(--link); } a:hover { color: var(--link-hover); } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--text); } /* Tame Bootstrap's oversized .display-3 (used for the org name on the dashboard) down to a modern page-title scale. */ .display-3 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; } /* ============================================================================ PHASE 1 — app shell (sidebar, topbar), canvas + base surfaces, alerts. CSS-only; restyles existing base.html markup. No template/class changes. ========================================================================== */ /* ---- Canvas (deferred from Phase 0; paired here with surfaces below) ---- */ body { background: var(--canvas); } /* ---- Sidebar -------------------------------------------------------------- */ #sidebar-wrapper { background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2)); border-right: 0 !important; box-shadow: inset -1px 0 0 rgba(255,255,255,.04); } #sidebar-wrapper .sidebar-heading { background: transparent !important; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); } /* Neutralize the localdev/staging green tint that base.html paints on .list-group-flush — it sits behind the now-dark sidebar. The fixed "LOCALDEV / STAGING" corner banner remains the environment cue. */ #sidebar-wrapper .list-group-flush { background: transparent !important; } #sidebar-wrapper .list-group { padding: .5rem; } /* internal: box-sizing keeps width 15rem */ #sidebar-wrapper .list-group-item { background: transparent !important; /* override per-item .bg-light */ border: 0; color: var(--side-text); border-radius: var(--radius-sm); padding: .55rem .7rem; margin: 1px 0; font-weight: 500; transition: background .12s ease, color .12s ease; } #sidebar-wrapper .list-group-item svg { color: var(--side-text-mut); } #sidebar-wrapper .list-group-item:hover { background: var(--side-active-bg) !important; color: #fff; } #sidebar-wrapper .list-group-item:hover svg { color: #fff; } /* Active page — base.html marks it with .active OR .list-group-item-dark */ #sidebar-wrapper .list-group-item.active, #sidebar-wrapper .list-group-item-dark { background: var(--side-active-bg) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--side-active-bd); } #sidebar-wrapper .list-group-item.active svg, #sidebar-wrapper .list-group-item-dark svg { color: var(--primary); } /* Sidebar footer credits / policy links — keep readable on the dark bg */ #sidebar-wrapper .text-muted { color: var(--side-text-mut) !important; } #sidebar-wrapper .text-dark, #sidebar-wrapper a.text-secondary { color: var(--side-text) !important; } #sidebar-wrapper .border-top, #sidebar-wrapper .border-bottom { border-color: rgba(255,255,255,.08) !important; } #sidebar-wrapper .text-muted img { filter: brightness(0) invert(1); opacity: .45; } /* ---- Topbar --------------------------------------------------------------- */ .navbar.bg-light { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); padding: .55rem 1rem; } #menu-toggle.btn-dark { background: #1b2330; border: 0; border-radius: var(--radius); color: #fff !important; /* override the element's .text-light */ } #menu-toggle.btn-dark:hover { background: #232c3d; } .navbar .rounded-circle.btn-light { background: var(--surface-2); border: 1px solid var(--border) !important; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .navbar .rounded-circle.btn-light svg { width: 20px; height: 20px; } /* Org chip keeps its inline org color; we only refine its shape. */ .navbar .dropdown-toggle.btn-outline-dark { border: 0; border-radius: var(--radius); padding: .45rem .85rem; font-weight: 600; } /* Omni search: bg stays the inline #EEEEEE (~surface-2); refine shape/focus. */ #omni-input { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; height: 40px; padding: 0 .9rem; } #omni-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; } /* ---- Base surfaces (so content doesn't float on bare canvas) -------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; } .card-footer { background: var(--surface-2); border-top: 1px solid var(--border); } /* Wrap data grids in a surface. Note: do NOT set overflow:hidden here — that would kill horizontal scroll on wide tables (e.g. the assets grid). */ .table-responsive { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* ---- Alerts (the messages banner in base.html + page alerts) -------------- */ .alert { border: 0; border-radius: var(--radius); padding: 1rem 1.15rem; } .alert-success { background: var(--success-soft); color: #15663a; box-shadow: inset 3px 0 0 var(--success); } .alert-warning { background: var(--warning-soft); color: #7a5210; box-shadow: inset 3px 0 0 var(--warning); } .alert-danger { background: var(--danger-soft); color: #93283b; box-shadow: inset 3px 0 0 var(--danger); } .alert-info { background: var(--info-soft); color: #1c5b7d; box-shadow: inset 3px 0 0 var(--info); } /* ============================================================================ PHASE 2 — core component primitives: buttons, badges, dropdowns, modals, tabs/pills. CSS-only; restyles existing Bootstrap classes. ========================================================================== */ /* ---- Buttons -------------------------------------------------------------- */ .btn { border-radius: var(--radius); font-weight: 500; padding: .45rem .9rem; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-sm { border-radius: var(--radius-sm); padding: .3rem .65rem; } .btn-lg { border-radius: var(--radius-lg); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--primary-600); border-color: var(--primary-600); color: #fff; } /* Solid neutral (NOT inverted to white): one button rides .text-light on it. */ .btn-secondary { background: #5c6370; border-color: #5c6370; color: #fff; } .btn-secondary:hover, .btn-secondary:focus { background: #4d5560; border-color: #4d5560; color: #fff; } .btn-info { background: var(--info); border-color: var(--info); color: #fff; } .btn-info:hover { background: #246f99; border-color: #246f99; color: #fff; } .btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-success:hover { background: #1a824a; border-color: #1a824a; color: #fff; } .btn-warning { background: var(--warning-strong); border-color: var(--warning-strong); color: #fff; } .btn-warning:hover { background: var(--warning-strong-600); border-color: var(--warning-strong-600); color: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background: #c13a51; border-color: #c13a51; color: #fff; } .btn-dark { background: #1f2733; border-color: #1f2733; color: #fff; } .btn-dark:hover { background: #283242; border-color: #283242; color: #fff; } .btn-light { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-light:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: #fff; } .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-strong); } .btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn-outline-dark { color: var(--text); border-color: var(--border-strong); } .btn-outline-dark:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } /* ---- Badges (pill, soft-tint) --------------------------------------------- */ .badge { font-weight: 600; border-radius: 999px; padding: .32em .6em; } .badge-secondary { background: var(--surface-2); color: var(--text-muted); } .badge-primary { background: var(--primary-soft); color: var(--primary-700); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } /* ---- Dropdowns ------------------------------------------------------------ */ .dropdown-menu { background: var(--surface); color: var(--text); /* Bootstrap hardcodes #212529; route loose menu content (icons, footnotes) through the token */ border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .4rem; } .dropdown-item { color: var(--text); border-radius: var(--radius-sm); padding: .45rem .7rem; } /* Items with an inline bg (org colors, command shortcuts) keep it — inline wins. */ .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); } .dropdown-header { color: var(--text-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .dropdown-divider { border-top-color: var(--border); } /* ---- Modals --------------------------------------------------------------- */ /* No overflow:hidden here — would clip Chosen dropdowns inside modal bodies. */ .modal-content { background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .modal-header { border-bottom: 1px solid var(--border); padding: 1rem 1.15rem; align-items: center; } .modal-footer { border-top: 1px solid var(--border); padding: .85rem 1.15rem; } /* ---- Tabs (asset/people detail) — underline style ------------------------- */ /* Inactive tabs carry .bg-light.border; active carries .active (per base tpls). */ .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { border: 0 !important; background: transparent !important; color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: .55rem .9rem; margin-bottom: -1px; font-weight: 500; } .nav-tabs .nav-link:hover { color: var(--text); background: var(--surface-2) !important; } .nav-tabs .nav-link.active { color: var(--primary); background: transparent !important; border-bottom: 2px solid var(--primary) !important; } /* Count badges inside detail tabs — solid + bold so the number stands out. (The soft-tint badge style elsewhere is too quiet for at-a-glance counts.) !important on shape overrides the .rounded/.pl-1/.pr-1 utilities on these spans. */ .nav-tabs .nav-link .badge-secondary, .nav-tabs .nav-link .badge-primary, .nav-tabs .nav-link .badge-danger, .nav-tabs .nav-link .badge-warning { font-weight: 700; font-size: .72rem; color: #fff; border-radius: 999px !important; padding: .15em .5em !important; margin-left: .35rem; vertical-align: middle; } .nav-tabs .nav-link .badge-secondary { background: #5c6370; } .nav-tabs .nav-link .badge-primary { background: var(--primary); } .nav-tabs .nav-link .badge-danger { background: var(--danger); } .nav-tabs .nav-link .badge-warning { background: var(--warning-strong); } /* ---- Pills (org settings) — solid active --------------------------------- */ /* Inactive pills carry .bg-light; active carries .active (per base tpls). */ .nav-pills .nav-link { background: var(--surface) !important; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); } .nav-pills .nav-link:hover { background: var(--surface-2) !important; color: var(--text); } .nav-pills .nav-link.active { background: var(--primary) !important; border-color: var(--primary); color: #fff; } /* ============================================================================ PHASE 3 — data grids (bootstrap-table chrome) + page-top rhythm. Scoped to BT-generated wrappers so it never touches modal / print / form tables. No data-* attributes or formatter JS are touched. ========================================================================== */ /* ---- Page-top rhythm: content no longer butts against the topbar ---------- */ #page-content-wrapper > .container-fluid { padding-top: 1rem; } /* ---- Grid toolbar: room for the search/controls inside the surface -------- */ .fixed-table-toolbar { padding: .5rem .5rem .65rem; } .fixed-table-toolbar .search input, .fixed-table-toolbar input.search-input { border: 1px solid var(--border) !important; border-radius: var(--radius); height: 36px; } .fixed-table-toolbar .search input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft); } /* ---- Grid header + rows (zebra dropped in favor of hover) ----------------- */ .bootstrap-table thead th { border-top: 0; border-bottom: 1px solid var(--border); background-color: var(--surface-2); /* (B) tinted header band */ text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; font-weight: 600; color: var(--text-muted); /* readable on the tint */ padding-top: .55rem; padding-bottom: .55rem; } /* (A) roomier rows; vertical padding only so header/body columns stay aligned */ .bootstrap-table tbody td { border-top: 1px solid var(--border); vertical-align: middle; padding: .8rem .75rem; } .bootstrap-table tbody tr:nth-of-type(odd) { background-color: transparent; } .bootstrap-table tbody tr:hover { background-color: var(--surface-2); } .bootstrap-table table { margin-bottom: 0; } /* Surface card for EVERY grid, even when the page didn't wrap it in .table-responsive (wrapper usage was historically inconsistent, so some list pages had the card and others didn't). When the grid IS inside a .table-responsive, that wrapper already provides the card — neutralize the inner one so we never get a double border/shadow. */ .bootstrap-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .table-responsive .bootstrap-table { background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* ---- Grid pagination ------------------------------------------------------ */ .fixed-table-pagination { padding: .65rem .5rem .3rem; } .fixed-table-pagination .pagination-info { color: var(--text-muted); } .fixed-table-pagination .pagination { margin: 0; } .fixed-table-pagination .page-link { border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); margin: 0 2px; } .fixed-table-pagination .page-link:hover { background: var(--surface-2); color: var(--text); } .fixed-table-pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } .fixed-table-pagination .page-item.disabled .page-link { color: var(--text-faint); } /* ============================================================================ PHASE 4 — forms. CSS-first: style the bare widgets that Django's form.as_table / as_p render without .form-control, plus Chosen, the XDSoft datepicker, and CodeMirror. The old :required rule was removed from base.html. Scoped to `form …` so the topbar omni-search and grid search (outside any
, and already styled) are not affected. ========================================================================== */ /* ---- Text fields, selects, textareas -------------------------------------- */ form input[type="text"], form input[type="email"], form input[type="number"], form input[type="password"], form input[type="url"], form input[type="tel"], form input[type="search"], form input[type="date"], form input[type="datetime-local"], form input[type="time"], form textarea, form select, .form-control { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .4rem .6rem; color: var(--text); font-size: .875rem; line-height: 1.45; max-width: 100%; } /* Required affordance — a left accent bar (replaces the black-border/gray-bg). */ form input:required:not([type="checkbox"]):not([type="radio"]), form select[required], form textarea[required], .form-control:required { border-left: 3px solid var(--primary); } /* Focus — declared last so it wins over the required border when focused. */ form input[type="text"]:focus, form input[type="email"]:focus, form input[type="number"]:focus, form input[type="password"]:focus, form input[type="url"]:focus, form input[type="tel"]:focus, form input[type="search"]:focus, form input[type="date"]:focus, form input[type="datetime-local"]:focus, form input[type="time"]:focus, form textarea:focus, form select:focus, .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: 0; } /* Input-group: keep prepended/appended buttons the same height as the field. (.btn and .form-control got independent padding/line-height in Phase 2/4, so the button rendered slightly taller — e.g. the assets AI-search button.) */ .input-group > .btn, .input-group-prepend .btn, .input-group-append .btn { padding-top: .4rem; padding-bottom: .4rem; line-height: 1.45; font-size: .875rem; /* match the field's font (Phase 4 set inputs to .875rem) */ } /* ============================================================================ Navigation niceties — smooth in-page scrolling, a global floating back-to-top button (markup/JS in base.html), and the asset-detail "On this page" section nav (with scrollspy active state). ========================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 1rem; } #back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--primary); color: #fff; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } #back-to-top.show { opacity: 1; visibility: visible; transform: none; } #back-to-top:hover { background: var(--primary-600); color: #fff; } #asset-section-nav .nav-link { color: var(--text-muted); border-radius: var(--radius-sm); } #asset-section-nav .nav-link:hover { color: var(--text); background: var(--surface-2); } #asset-section-nav .nav-link.active { color: var(--primary); font-weight: 600; background: var(--primary-soft); } /* ============================================================================ DARK THEME — D2 polish. Routes the remaining hardcoded / Bootstrap colors so dark mode looks finished. Mostly scoped to [data-theme="dark"]; the few token-driven rules are no-ops in light (where --surface is #fff, etc.). ========================================================================== */ /* Alert text — light variants for contrast on the dark soft-tint backgrounds. Screen-only so print (which resets tokens to light) keeps the dark text. */ @media screen { [data-theme="dark"] .alert-success { color: #7ee0a3; } [data-theme="dark"] .alert-warning { color: #f0c987; } [data-theme="dark"] .alert-danger { color: #f1a3b0; } [data-theme="dark"] .alert-info { color: #8fcdec; } } /* Bootstrap hardcodes `.table { color:#212529 }`, which overrides the body token and renders dark-on-dark in dark mode (e.g. /settings/ "Organization Name:"). Route it through the token so table text flips with the theme. Token-driven, so it's a no-op in light. */ .table { color: var(--text); } /* Bootstrap also hardcodes .table cell/header borders (#dee2e6); route those through the token so grid lines flip with the theme (the darker --border tone in dark, not light-grey) — across grids AND plain tables. */ .table td, .table th { border-color: var(--border); } .table thead th { border-bottom-color: var(--border); } /* Bootstrap colour utilities */ [data-theme="dark"] .bg-light:not(.nav-link) { background-color: var(--surface-2) !important; } [data-theme="dark"] .bg-white { background-color: var(--surface) !important; } [data-theme="dark"] .text-dark { color: var(--text) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-secondary { color: var(--text-muted) !important; } /* Semantic text utilities — Bootstrap's values are tuned for light backgrounds and read muddy on dark; lighten them (covers inline icons like the trash on the date-mapping rules, stat figures, etc.). */ [data-theme="dark"] .text-danger { color: #f1a3b0 !important; } [data-theme="dark"] .text-success { color: #7ee0a3 !important; } [data-theme="dark"] .text-warning { color: #f0c987 !important; } [data-theme="dark"] .text-info { color: #8fcdec !important; } [data-theme="dark"] .text-primary { color: var(--primary-700) !important; } /* Neutral (.btn-secondary) button — surface-elevated in dark so it feels native (covers the NL search button + bootstrap-table column/export/refresh controls + Cancel/Mass-Change etc.); stays the solid slate in light. */ [data-theme="dark"] .btn-secondary { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-secondary:focus { background: var(--border-strong); border-color: var(--border-strong); color: var(--text); } /* Topbar (the quick-search bar) shares the dark body background in dark mode */ [data-theme="dark"] .navbar.bg-light { background: var(--canvas) !important; } /* Striped non-grid tables get a faint light stripe; keep bootstrap-table grids zebra-free */ [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.035); } [data-theme="dark"] .bootstrap-table tbody tr:nth-of-type(odd) { background-color: transparent; } /* Grid pagination page-links (Bootstrap defaults them to white) */ [data-theme="dark"] .page-link { background-color: var(--surface); } /* Bootstrap's .border utility hardcodes light-grey #dee2e6 (e.g. the assets AI-search box's outer border); give it the visible input-box tone in dark. (Grid LINES are handled globally above via .table td/th borders.) */ [data-theme="dark"] .border { border-color: var(--border-strong) !important; } /* Force every bootstrap-table border (cells AND the fixed-table-* structural containers) to the token in dark — covers the light line atop a header row wherever it originates (Bootstrap-core .table borders or grid chrome). */ [data-theme="dark"] .bootstrap-table table, [data-theme="dark"] .bootstrap-table th, [data-theme="dark"] .bootstrap-table td, [data-theme="dark"] .fixed-table-container, [data-theme="dark"] .fixed-table-header, [data-theme="dark"] .fixed-table-body, [data-theme="dark"] .fixed-table-toolbar, [data-theme="dark"] .fixed-table-pagination { border-color: var(--border) !important; } /* Row hover: Bootstrap's .table-hover forces color:#212529 + a near-black tint on hover (text vanishes on dark). Give a discernible lighter highlight and keep the text light. */ [data-theme="dark"] .table-hover tbody tr:hover { background-color: #2a3a5e; color: var(--text); } /* Omni search input (base.html sets inline #EEEEEE + focus JS; !important wins over inline) */ [data-theme="dark"] #omni-input { background-color: var(--surface-2) !important; color: var(--text); } /* Inline cyan command-shortcut highlights + */ [data-theme="dark"] [style*="lightcyan"] { background-color: var(--surface-2) !important; color: var(--text) !important; } [data-theme="dark"] mark { background-color: var(--warning-soft); color: var(--text); } /* Integration logos are third-party images built for light backgrounds (dark artwork on transparent bg). Put them on a white plate in dark mode so they stay legible regardless of the individual logo's colors. */ [data-theme="dark"] .integration-logo { background: #fff; border-radius: var(--radius); padding: 8px 12px; } /* The org logo (top-right chip) ships as — already a light plate. But our dark `.bg-light` override turned that plate dark, so transparent logos showed a dark backing. Force it back to white (!important + the ID selector beat the .bg-light !important override). Both modes, since the chip sits on the org's theme-independent brand colour. */ #navbarDropdown img { background: #fff !important; } /* Chosen.js dropdown panel (token-driven; no-op in light) */ .chosen-container .chosen-drop { background: var(--surface) !important; } .chosen-container .chosen-results { color: var(--text); } .chosen-container-single .chosen-search input, .chosen-container .chosen-search-input { background: var(--surface) !important; color: var(--text); border-color: var(--border-strong) !important; } /* XDSoft datepicker popup */ [data-theme="dark"] .xdsoft_datetimepicker { background: var(--surface) !important; color: var(--text); box-shadow: var(--shadow-md) !important; border-color: var(--border) !important; } [data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td, [data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th, [data-theme="dark"] .xdsoft_datetimepicker .xdsoft_time_box .xdsoft_time { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; } [data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label { background: var(--surface) !important; color: var(--text) !important; } /* jstree (Org Units tree, /people) hardcodes light-blue hover/selected states (#e7f4f9 / #beebff) — dark highlights wash out the light node text. Retheme the hover/selected states for dark. */ [data-theme="dark"] .jstree-default .jstree-hovered, [data-theme="dark"] .jstree-default .jstree-wholerow-hovered { background: var(--surface-2); box-shadow: none; } [data-theme="dark"] .jstree-default .jstree-clicked, [data-theme="dark"] .jstree-default .jstree-wholerow-clicked { background: #2f4288; /* more pronounced than --primary-soft, which sits too close to the surface */ box-shadow: none; } /* jQuery UI sortable rows (.ui-state-default — e.g. the date-mapping rules list) hardcode a light-theme text colour (#555) and a light gradient background, so rule numbers and inline chips render dark-on-dark. Route to the tokens. */ [data-theme="dark"] .ui-state-default { background: var(--surface-2); border-color: var(--border); color: var(--text); } /* Print always renders light, regardless of the active theme. */ @media print { :root[data-theme="dark"] { --canvas:#fff; --surface:#fff; --surface-2:#f1f3f5; --border:#e7e9ee; --border-strong:#d6dae1; --text:#14181f; --text-muted:#69707d; --text-faint:#98a0ac; --primary:#3b5bdb; --primary-700:#2942a8; --primary-soft:#eef1fd; --success-soft:#e7f6ee; --warning-soft:#fcf3e3; --danger-soft:#fdebef; --info-soft:#e7f3fa; } } /* Labels + as_table layout spacing */ form label { font-weight: 500; color: var(--text); } form table th { font-weight: 500; color: var(--text); text-align: left; vertical-align: top; padding: .4rem .6rem; } form table td { padding: .35rem .6rem; } /* ---- Chosen.js (flatten the dated gradient; keep native sizing/arrow) ----- */ .chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; color: var(--text); } .chosen-container-active .chosen-single, .chosen-container-active .chosen-choices { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; } .chosen-container .chosen-drop { border-color: var(--border-strong) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; } .chosen-container .chosen-results li.highlighted { background: var(--primary) !important; } .chosen-container-multi .chosen-choices li.search-choice { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; color: var(--text); } /* ---- XDSoft datetimepicker (light theming of the popup) ------------------- */ .xdsoft_datetimepicker { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { background: var(--primary) !important; box-shadow: none !important; }