/* ================================================================ vendor-bridge.css — third-party CSS re-pointed at the contract ================================================================ MUST BE THE LAST STYLESHEET IN . Bootstrap, Kendo and toastr all ship their own colours and all load from a CDN after our stylesheets. Rather than fight their rules with more specific selectors, re-point the variables they already read. Anything downstream of those variables — badges, modals, tooltips, dropdowns, validation states — then follows the theme automatically. The only thing that matters for this file is load ORDER: it has to outrank the CDN sheets above it, which it does by being last. Bootstrap 5.3 also has its own light/dark switch, data-bs-theme. It must move together with data-mode or dropdowns and modals render in the opposite mode to the page — which is exactly how an unreadable user menu happens. The layout renders both attributes from the same resolved value; see _Layout.cshtml. ================================================================ */ :root { /* ── BOOTSTRAP 5.3 ─────────────────────────────────────────── */ --bs-font-sans-serif: var(--bx-font); --bs-body-font-family: var(--bx-font); --bs-body-bg: var(--bx-canvas); --bs-body-bg-rgb: var(--bx-tint-rgb); --bs-body-color: var(--bx-text); --bs-secondary-color: var(--bx-text-muted); --bs-tertiary-color: var(--bx-text-subtle); --bs-emphasis-color: var(--bx-text); --bs-secondary-bg: var(--bx-surface-2); --bs-tertiary-bg: var(--bx-surface-3); --bs-border-color: var(--bx-border); --bs-border-color-translucent: var(--bx-border); --bs-border-radius: var(--bx-radius-md); --bs-border-radius-sm: var(--bx-radius-sm); --bs-border-radius-lg: var(--bx-radius-lg); --bs-primary: var(--bx-accent); --bs-primary-rgb: var(--bx-accent-rgb); --bs-primary-text-emphasis: var(--bx-accent-text); --bs-primary-bg-subtle: var(--bx-accent-soft); --bs-primary-border-subtle: var(--bx-accent); --bs-secondary: var(--bx-cat-slate); --bs-secondary-rgb: var(--bx-cat-slate-rgb); --bs-success: var(--bx-success); --bs-success-rgb: var(--bx-success-rgb); --bs-success-text-emphasis: var(--bx-success-text); --bs-success-bg-subtle: var(--bx-success-soft); --bs-danger: var(--bx-danger); --bs-danger-rgb: var(--bx-danger-rgb); --bs-danger-text-emphasis: var(--bx-danger-text); --bs-danger-bg-subtle: var(--bx-danger-soft); --bs-warning: var(--bx-warning); --bs-warning-rgb: var(--bx-warning-rgb); --bs-warning-text-emphasis: var(--bx-warning-text); --bs-warning-bg-subtle: var(--bx-warning-soft); --bs-info: var(--bx-accent); --bs-info-rgb: var(--bx-accent-rgb); --bs-info-text-emphasis: var(--bx-accent-text); --bs-info-bg-subtle: var(--bx-accent-soft); --bs-link-color: var(--bx-accent-text); --bs-link-color-rgb: var(--bx-accent-rgb); --bs-link-hover-color: var(--bx-accent-hover); --bs-heading-color: var(--bx-text); --bs-code-color: var(--bx-cat-pink-text); --bs-highlight-bg: var(--bx-warning-soft); --bs-box-shadow: var(--bx-shadow-card); --bs-box-shadow-sm: var(--bx-shadow-sm); --bs-box-shadow-lg: var(--bx-shadow-modal); /* Bootstrap composes its own focus ring from this triplet. */ --bs-focus-ring-color: rgba(var(--bx-accent-rgb), .25); /* ── KENDO UI ── The bulk of the Kendo mapping lives in kendo-theme-override.css, which already points at --clr-*, and those now resolve to the contract. Only the handful Kendo reads that have no --clr-* equivalent are set here. */ --kendo-color-primary: var(--bx-accent); --kendo-color-on-primary: var(--bx-on-accent); --kendo-color-base: var(--bx-surface-2); --kendo-color-on-base: var(--bx-text); --kendo-color-border: var(--bx-border); --kendo-color-border-alt: var(--bx-border-strong); --kendo-font-family: var(--bx-font); --kendo-border-radius-md: var(--bx-radius-md); } /* ── BOOTSTRAP COMPONENT SURFACES ── These few read a hardcoded value inside Bootstrap rather than a variable, so they need a real declaration. Kept deliberately short: every addition here is a rule that has to be maintained against a vendor upgrade, unlike the variable re-pointing above. */ .dropdown-menu { --bs-dropdown-bg: var(--bx-surface); --bs-dropdown-color: var(--bx-text); --bs-dropdown-border-color: var(--bx-border); --bs-dropdown-link-color: var(--bx-text); --bs-dropdown-link-hover-bg: var(--bx-surface-2); --bs-dropdown-link-hover-color: var(--bx-text); --bs-dropdown-link-active-bg: var(--bx-accent-fill); --bs-dropdown-link-active-color: var(--bx-on-accent); --bs-dropdown-divider-bg: var(--bx-border); --bs-dropdown-header-color: var(--bx-text-muted); --bs-dropdown-box-shadow: var(--bx-shadow-popover); } .modal { --bs-modal-bg: var(--bx-surface); --bs-modal-color: var(--bx-text); --bs-modal-border-color: var(--bx-border); --bs-modal-header-border-color: var(--bx-border); --bs-modal-footer-border-color: var(--bx-border); --bs-modal-box-shadow: var(--bx-shadow-modal); } .card { --bs-card-bg: var(--bx-surface); --bs-card-color: var(--bx-text); --bs-card-border-color: var(--bx-border); --bs-card-cap-bg: var(--bx-surface-2); } .table { --bs-table-bg: transparent; --bs-table-color: var(--bx-text); --bs-table-border-color: var(--bx-border); --bs-table-striped-bg: var(--bx-tint-04); --bs-table-striped-color: var(--bx-text); --bs-table-hover-bg: var(--bx-tint-06); --bs-table-hover-color: var(--bx-text); } .tooltip { --bs-tooltip-bg: var(--bx-cat-neutral); --bs-tooltip-color: var(--bx-text-inverse); } .popover { --bs-popover-bg: var(--bx-surface); --bs-popover-color: var(--bx-text); --bs-popover-border-color: var(--bx-border); --bs-popover-header-bg: var(--bx-surface-2); } .offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl { --bs-offcanvas-bg: var(--bx-surface); --bs-offcanvas-color: var(--bx-text); --bs-offcanvas-border-color: var(--bx-border); } .list-group { --bs-list-group-bg: var(--bx-surface); --bs-list-group-color: var(--bx-text); --bs-list-group-border-color: var(--bx-border); --bs-list-group-action-hover-bg: var(--bx-surface-2); --bs-list-group-active-bg: var(--bx-accent-fill); --bs-list-group-active-border-color: var(--bx-accent-fill); --bs-list-group-active-color: var(--bx-on-accent); } /* Form controls: Bootstrap hardcodes white here, which is the single most visible break in a dark theme. */ .form-control, .form-select { background-color: var(--bx-surface); color: var(--bx-text); border-color: var(--bx-border); } .form-control:focus, .form-select:focus { background-color: var(--bx-surface); color: var(--bx-text); border-color: var(--bx-accent); box-shadow: var(--bx-ring-accent); } .form-control::placeholder { color: var(--bx-text-subtle); } .form-control:disabled, .form-select:disabled { background-color: var(--bx-surface-2); color: var(--bx-text-subtle); } .input-group-text { background-color: var(--bx-surface-2); color: var(--bx-text-muted); border-color: var(--bx-border); } .form-check-input { background-color: var(--bx-surface); border-color: var(--bx-border-strong); } .form-check-input:checked { background-color: var(--bx-accent-fill); border-color: var(--bx-accent-fill); } .btn-primary { --bs-btn-bg: var(--bx-accent-fill); --bs-btn-border-color: var(--bx-accent-fill); --bs-btn-color: var(--bx-on-accent); --bs-btn-hover-bg: var(--bx-accent-hover); --bs-btn-hover-border-color: var(--bx-accent-hover); --bs-btn-hover-color: var(--bx-on-accent); --bs-btn-active-bg: var(--bx-accent-active); --bs-btn-active-border-color: var(--bx-accent-active); --bs-btn-active-color: var(--bx-on-accent); --bs-btn-disabled-bg: var(--bx-accent-fill); --bs-btn-disabled-border-color: var(--bx-accent-fill); --bs-btn-disabled-color: var(--bx-on-accent); } .btn-secondary { --bs-btn-bg: var(--bx-surface-2); --bs-btn-border-color: var(--bx-border); --bs-btn-color: var(--bx-text); --bs-btn-hover-bg: var(--bx-surface-3); --bs-btn-hover-border-color: var(--bx-border-strong); --bs-btn-hover-color: var(--bx-text); } .btn-success { --bs-btn-bg: var(--bx-success-fill); --bs-btn-border-color: var(--bx-success-fill); --bs-btn-color: var(--bx-on-success); --bs-btn-hover-bg: var(--bx-success-hover); --bs-btn-hover-border-color: var(--bx-success-hover); --bs-btn-hover-color: var(--bx-on-success); } .btn-danger { --bs-btn-bg: var(--bx-danger-fill); --bs-btn-border-color: var(--bx-danger-fill); --bs-btn-color: var(--bx-on-danger); --bs-btn-hover-bg: var(--bx-danger-hover); --bs-btn-hover-border-color: var(--bx-danger-hover); --bs-btn-hover-color: var(--bx-on-danger); } .btn-warning { --bs-btn-bg: var(--bx-warning-fill); --bs-btn-border-color: var(--bx-warning-fill); --bs-btn-color: var(--bx-on-warning); --bs-btn-hover-bg: var(--bx-warning-hover); --bs-btn-hover-border-color: var(--bx-warning-hover); --bs-btn-hover-color: var(--bx-on-warning); } /* ── TOASTR ── toastr ships fixed background images and colours with no variables at all, so these are real declarations. Status colour, not brand: an error toast stays red in every theme. */ #toast-container > div { box-shadow: var(--bx-shadow-modal); opacity: 1; } .toast-success { background-color: var(--bx-success-fill); color: var(--bx-on-success); } .toast-error { background-color: var(--bx-danger-fill); color: var(--bx-on-danger); } .toast-warning { background-color: var(--bx-warning-fill); color: var(--bx-on-warning); } .toast-info { background-color: var(--bx-accent-fill); color: var(--bx-on-accent); } .toast-message a, .toast-message label { color: inherit; } /* ── KENDO SURFACES ── Kendo's popup layer is appended to , outside any component subtree — another reason the tokens it reads have to live at :root rather than on a container. */ .k-animation-container, .k-popup, .k-list-container, .k-calendar, .k-timeselector { background-color: var(--bx-surface); color: var(--bx-text); border-color: var(--bx-border); } .k-input, .k-picker, .k-textbox { background-color: var(--bx-surface); color: var(--bx-text); border-color: var(--bx-border); } .k-list-item.k-selected, .k-calendar .k-calendar-td.k-selected .k-link { background-color: var(--bx-accent-fill); color: var(--bx-on-accent); } .k-list-item:hover, .k-list-item.k-hover { background-color: var(--bx-surface-2); color: var(--bx-text); }