/* * Theme bridge: makes the existing custom CSS play nicely with * Bootstrap 5.3's data-bs-theme system. * * Load AFTER bootstrap.min.css, style.css, and light.css so these rules * take precedence. * * What this fixes: * - Modals, tables, dropdowns, form controls all follow data-bs-theme * automatically in BS5 — but we need them to be themed at all, * which requires either the attribute on (done in layout.php) * or these explicit fallbacks if the attribute is missing. * - text-muted / text-body-secondary on dark background were invisible * because the old style.css forced a dark text colour for them. * - The .table renders white-on-white in dark mode because Bootstrap's * .table defaults to a light variant. */ /* ------------------------------------------------------------------ */ /* Dark theme — variables that match the cover-template look */ /* ------------------------------------------------------------------ */ [data-bs-theme="dark"] { /* Background and base text already inherited from BS5 dark mode. */ /* Just adjust the muted/secondary so it's readable on dark bg. */ --bs-secondary-color: rgba(255, 255, 255, 0.6); --bs-secondary-bg: #2b2b2b; --bs-border-color: rgba(255, 255, 255, 0.15); } [data-bs-theme="dark"] body { background-color: #1a1a1a; color: #eee; } /* The cover template's masthead links should remain visible */ [data-bs-theme="dark"] .nav-masthead .nav-link { color: rgba(255, 255, 255, 0.6); } [data-bs-theme="dark"] .nav-masthead .nav-link:hover, [data-bs-theme="dark"] .nav-masthead .nav-link.active { color: #fff; } /* Tables in dark mode — invert defaults */ [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #eee; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-border-color: rgba(255, 255, 255, 0.15); } /* Modals in dark mode */ [data-bs-theme="dark"] .modal-content { background-color: #2b2b2b; color: #eee; border: 1px solid rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-control { background-color: #1a1a1a; color: #eee; border-color: rgba(255, 255, 255, 0.2); } [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] .form-control:focus { background-color: #1a1a1a; color: #fff; border-color: #e83e8c; box-shadow: 0 0 0 0.2rem rgba(232, 62, 140, 0.25); } /* Main search input keeps a white background in both themes — matches the look of the original site. Modal form controls above are not affected. */ #query, #query:focus { background-color: #fff; color: #222; border-color: rgba(0, 0, 0, 0.15); } #query::placeholder { color: #999; } [data-bs-theme="dark"] .btn-outline-secondary { color: #eee; border-color: rgba(255, 255, 255, 0.3); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.5); } /* Force readable muted text on dark — the old style.css may have set this to a near-black that disappears against the dark bg */ [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-body-secondary, [data-bs-theme="dark"] small.text-muted, [data-bs-theme="dark"] .recently-added p { color: rgba(255, 255, 255, 0.6) !important; } /* Flag link blends with secondary text in both themes */ .flag-link { text-decoration: none; opacity: 0.5; transition: opacity 0.15s; } .flag-link:hover { opacity: 1; } /* ------------------------------------------------------------------ */ /* Light theme — make sure custom muted text doesn't go too pale */ /* ------------------------------------------------------------------ */ [data-bs-theme="light"] { --bs-secondary-color: #6c757d; } [data-bs-theme="light"] body { background-color: #fff; color: #222; }