/* css/skin-bridge.css — makes Bootstrap follow the active reading skin. * * php/skins.php stamps our tokens (--paper, --ink, --accent, …) onto . * This file maps them onto the variables Bootstrap 5.3 actually consumes, so * every Bootstrap component picks up the skin with no Sass rebuild — which * matters because this project has no build step. * * Load order is: bootstrap.min.css, then THIS, then css/nsv.css. * * Bootstrap wants its colours as bare "R, G, B" triples for the -rgb variables * it composes with alpha, and as normal colours elsewhere. Our tokens are hex, * so anything Bootstrap needs as a triple is declared in php/skins.php as one * (--paper-rgb and friends) rather than being converted here — CSS cannot take * a hex value apart. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { /* surfaces */ --bs-body-bg: var(--paper); --bs-body-bg-rgb: var(--paper-rgb); --bs-body-color: var(--ink); --bs-body-color-rgb: var(--ink-rgb); --bs-secondary-color: var(--sub); --bs-secondary-bg: var(--panel); --bs-tertiary-bg: var(--panel); --bs-emphasis-color: var(--ink); /* borders */ --bs-border-color: var(--rule); --bs-border-color-translucent: var(--rule); /* accent — Bootstrap's "primary" */ --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent); /* typography — the skin's pairing, not Bootstrap's system stack */ --bs-body-font-family: var(--f-body); --bs-heading-color: var(--ink); /* focus ring follows the accent so it stays visible on every skin */ --bs-focus-ring-color: rgba(var(--accent-rgb), .35); } /* Headings take the skin's display face; Bootstrap has no variable for this. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--f-head); } /* Bootstrap 5.3 still compiles .btn-* colours from Sass, so the variants have * to be re-pointed by hand. These are the only component overrides needed. */ .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--paper); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--paper); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); filter: none; } .btn-primary:hover { filter: brightness(1.08); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--paper); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); } /* Cards, offcanvas, modals and dropdowns sit on --panel, not --paper, so they * read as raised against the page on both light and dark skins. */ .card, .offcanvas, .modal-content, .dropdown-menu, .list-group-item { --bs-card-bg: var(--panel); --bs-offcanvas-bg: var(--panel); --bs-modal-bg: var(--panel); --bs-dropdown-bg: var(--panel); --bs-list-group-bg: var(--panel); --bs-card-border-color: var(--rule); --bs-modal-border-color: var(--rule); --bs-dropdown-border-color: var(--rule); --bs-list-group-border-color: var(--rule); color: var(--ink); } /* Form controls: Bootstrap's defaults are white-on-white against a dark skin. */ .form-control, .form-select { background-color: var(--panel); border-color: var(--rule); color: var(--ink); } .form-control:focus, .form-select:focus { background-color: var(--panel); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25); } .form-control::placeholder { color: var(--sub); opacity: 1; } /* Floating labels sit on the control, so they need the panel colour too. */ .form-floating > label { color: var(--sub); } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--sub); } .modal-backdrop { --bs-backdrop-bg: var(--scrim); } .offcanvas, .modal-content { box-shadow: var(--elev); } /* Bootstrap's .text-muted / .text-body-secondary map onto our --sub. */ .text-muted, .text-body-secondary { color: var(--sub) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--rule) !important; } /* Themed elements animate on a skin switch, matching the reader. */ body, .card, .offcanvas, .modal-content, .btn, .form-control, .nav-link, .dropdown-menu, .list-group-item { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ---- offcanvas / modal / tabs: skin them like the rest ------------------- */ .offcanvas { background: var(--panel); color: var(--ink); border-color: var(--rule) !important; } .offcanvas-header { border-bottom: 1px solid var(--rule); } .modal-content { background: var(--panel); color: var(--ink); border-color: var(--rule); } .modal-header { border-bottom: 1px solid var(--rule); } /* Bootstrap's close button is a dark SVG; invert it on dark skins so it stays visible against --panel. */ html[data-mode="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .nav-tabs { --bs-nav-tabs-border-color: var(--rule); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent); --bs-nav-link-color: var(--sub); --bs-nav-link-hover-color: var(--ink); --bs-nav-tabs-link-hover-border-color: transparent; font-family: var(--f-body); } .nav-tabs .nav-link { font-size: 14px; } .nav-tabs .nav-link.active { border-bottom-width: 2px; }