/* Site-wide bilingual visibility. The class on is set by the pre-paint script in header.html (and toggled by prefs.js on click of #lang-sel). CSS-driven rather than JS-driven so that any content inserted dynamically — e.g. AJAX-loaded fragments on /APIKeys — localises automatically without a per-call helper. !important: SmartY's core.min.css ships rules like `.dropdown-menu li:not(.dropdown-item)>a { display: block }` (specificity 0,2,2) that out-rank `html.lang-cy .en` (0,2,1) and re-show the wrong language inside Bootstrap dropdowns. The hide is a utility — it should always win over component defaults. */ html.lang-cy .en { display: none !important; } html.lang-en .cy { display: none !important; } /* Theme-aware logo swap. Both tags are rendered side-by-side in .navbar-brand; one is hidden via data-bs-theme on . */ .logo-dark { display: none; } [data-bs-theme="dark"] .logo-light { display: none; } [data-bs-theme="dark"] .logo-dark { display: inline-block; } /* SmartY 5.0.7's core.css binds key Bootstrap component variables (--bs-card-bg, --bs-modal-bg, --bs-dropdown-divider-bg, --bs-table-*) to hardcoded light values at the component selector level; the [data-bs-theme="dark"] block in core.css only flips generic surface vars, never the component-specific ones. Re-bind them here so the dark theme actually applies. Worst offender — core.css:20254 puts a literal #ffffff on #header, hiding the navbar in dark mode. */ /* Section banding. Body sits one tier off the chrome (header strip + footer band) and cards so the three regions read as a layered stack instead of a flat single colour. */ body { background-color: var(--bs-secondary-bg); } [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); } [data-bs-theme="dark"] #header { background-color: var(--bs-secondary-bg); } [data-bs-theme="dark"] .card { --bs-card-bg: var(--bs-tertiary-bg); --bs-card-cap-bg: var(--bs-tertiary-bg); --bs-card-border-color: var(--bs-border-color); } [data-bs-theme="dark"] .card > hr { background-color: var(--bs-border-color); opacity: 0.3; } [data-bs-theme="dark"] .modal-content { --bs-modal-bg: var(--bs-tertiary-bg); --bs-modal-border-color: var(--bs-border-color); --bs-modal-header-border-color: var(--bs-border-color); --bs-modal-footer-border-color: var(--bs-border-color); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-divider-bg: var(--bs-border-color); } [data-bs-theme="dark"] .table { --bs-table-border-color: var(--bs-border-color); --bs-table-accent-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { border-color: var(--bs-border-color); } /* Contrast fixes. SmartY's pastel warning (#fad776) and info (#73e7f7) are illegible against the light theme's white surfaces — worst as outline-button text and borders. Darken the FOREGROUND uses (outline buttons, text-* and border-* utilities) in light mode only: solid fills keep the pastel with dark text, and dark mode keeps the originals (the pastels carry plenty of contrast on dark surfaces). The [data-bs-theme="light"] prefix also outranks core.min.css, which loads after this file. text-*/border-* need !important to match the Bootstrap utilities they replace. */ [data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: #9a6b00; --bs-btn-border-color: #9a6b00; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #9a6b00; --bs-btn-hover-border-color: #9a6b00; --bs-btn-focus-shadow-rgb: 154, 107, 0; --bs-btn-active-color: #fff; --bs-btn-active-bg: #7d5700; --bs-btn-active-border-color: #7d5700; --bs-btn-disabled-color: #9a6b00; --bs-btn-disabled-border-color: #9a6b00; } [data-bs-theme="light"] .btn-outline-info { --bs-btn-color: #0a6e80; --bs-btn-border-color: #0a6e80; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0a6e80; --bs-btn-hover-border-color: #0a6e80; --bs-btn-focus-shadow-rgb: 10, 110, 128; --bs-btn-active-color: #fff; --bs-btn-active-bg: #085a69; --bs-btn-active-border-color: #085a69; --bs-btn-disabled-color: #0a6e80; --bs-btn-disabled-border-color: #0a6e80; } [data-bs-theme="light"] .text-warning { color: #9a6b00 !important; } [data-bs-theme="light"] .text-info { color: #0a6e80 !important; } [data-bs-theme="light"] .border-warning { border-color: #d9a90e !important; } [data-bs-theme="light"] .border-info { border-color: #2da3b8 !important; }