/* ------------------------------------------------------------------------- LeeStack.Core dark-mode refinements. Every rule is scoped to `.dark-mode` (toggled on by leestack.core.js) so this file is completely inert in light mode. It patches gaps that AdminLTE's built-in dark mode and the host site.css leave behind. ------------------------------------------------------------------------- */ /* site.css sets `.card-body { color: darkslategrey !important }`, which is a near-black green that is unreadable on dark cards. Restore readable text and keep muted/secondary helpers legible inside cards. */ .dark-mode .card-body { color: #e9ecef !important; } /* ------------------------------------------------------------------ * * WCAG 2.1 AA contrast fixes for dark mode. * Targets >= 4.5:1 for body text on BOTH dark surfaces AdminLTE uses: * - content-wrapper / body #454d55 (the lighter surface) * - cards / modals #343a40 * ------------------------------------------------------------------ */ /* Links: site.css uses a{color:#0366d6}, which is only ~1.6-2.1:1 on dark (unreadable). #9ec5ff = 4.86:1 on #454d55, 6.51:1 on #343a40. */ .dark-mode a, .dark-mode .btn-link { color: #9ec5ff; } .dark-mode a:hover, .dark-mode a:focus, .dark-mode .btn-link:hover { color: #c7d9ff; } /* Keep coloured buttons / badges that happen to wrap text in a link or use the link/contextual text classes from being recoloured. */ .dark-mode a.btn:not(.btn-link), .dark-mode .nav-link.active { color: inherit; } /* Muted / secondary text. Bootstrap's #6c757d and the inline #8b949e used in the feature _Edit forms fall to ~3.7:1 on dark. #b8c0c9 = 4.67:1 / 6.26:1. */ .dark-mode .text-muted, .dark-mode small.text-muted, .dark-mode .card-body .text-muted, .dark-mode .card-body small, .dark-mode .setting-desc, .dark-mode .setting-group-header span { color: #b8c0c9 !important; } /* Header nav icons: navbar-dark renders nav links at white@50% (~4.24:1) and the custom .header-button colour (#555) is far too dark. #dee2e6 = 8.84:1. */ .dark-mode .main-header .nav-link, .dark-mode .main-header .header-button { color: #dee2e6; } .dark-mode .main-header .nav-link:hover, .dark-mode .main-header .nav-link:focus, .dark-mode .main-header .header-button:hover { color: #fff; } /* ------------------------------------------------------------------ * * Feature Management page (Settings/Features). * ------------------------------------------------------------------ */ /* The page header hardcodes an inline light background (#f5f6fa), which leaves the white (dark-mode) brand text invisible on a near-white bar. Theme it. */ .dark-mode nav.navbar.bg-body-tertiary { background-color: #343a40 !important; border-color: #4b545c !important; } /* ------------------------------------------------------------------ * * Status pills / badges — full contextual palette. * * Solid Bootstrap badge colours are over-saturated ("intense") on dark, and * some (e.g. white-on-success = 3.13:1) fail WCAG AA. These rules replace the * whole contextual set with softer tinted pills + light accent text. Every * text/background pair below clears AA (5.98:1 - 11.21:1). * * Each colour is covered across all three Bootstrap badge syntaxes so it works * regardless of version / future markup: * - Bootstrap 4: .badge-success * - Bootstrap 5: .badge.bg-success * - Bootstrap 5.2: .text-bg-success * `!important` is required because Bootstrap's `.bg-*` utilities and * `.text-*` helpers are themselves `!important`. * ------------------------------------------------------------------ */ /* Faint border gives the tinted pills definition on any dark surface (card #343a40, body #454d55, modal, table row, etc.). */ .dark-mode .badge { border: 1px solid rgba(255, 255, 255, 0.12); } .dark-mode .badge-primary, .dark-mode .badge.bg-primary, .dark-mode .text-bg-primary { background-color: #11314f !important; /* text #9ec5ff -> 7.54:1 */ color: #9ec5ff !important; } .dark-mode .badge-secondary, .dark-mode .badge.bg-secondary, .dark-mode .text-bg-secondary { background-color: #3a4047 !important; /* text #ced4da -> 7.01:1 */ color: #ced4da !important; } .dark-mode .badge-success, .dark-mode .badge.bg-success, .dark-mode .text-bg-success { background-color: #1e3a2a !important; /* text #87d6a3 -> 7.19:1 */ color: #87d6a3 !important; } .dark-mode .badge-danger, .dark-mode .badge.bg-danger, .dark-mode .text-bg-danger { background-color: #4a2326 !important; /* text #f1929b -> 5.98:1 */ color: #f1929b !important; } .dark-mode .badge-warning, .dark-mode .badge.bg-warning, .dark-mode .badge.bg-warning.text-dark, .dark-mode .text-bg-warning { background-color: #3d3413 !important; /* text #ffd451 -> 8.70:1 */ color: #ffd451 !important; } .dark-mode .badge-info, .dark-mode .badge.bg-info, .dark-mode .text-bg-info { background-color: #0c3a42 !important; /* text #7adcef -> 7.83:1 */ color: #7adcef !important; } .dark-mode .badge-light, .dark-mode .badge.bg-light, .dark-mode .text-bg-light { background-color: #565e66 !important; /* text #fff -> 6.59:1 */ color: #ffffff !important; } .dark-mode .badge-dark, .dark-mode .badge.bg-dark, .dark-mode .text-bg-dark { background-color: #1b1e21 !important; /* text #ced4da -> 11.21:1 */ color: #ced4da !important; } /* ------------------------------------------------------------------ * * Login / unauthenticated pages (_Layout_Empty). * The login card is themed by `.dark-mode .card`, but a few elements carry * hardcoded light-theme colours that are unreadable on a dark card. * ------------------------------------------------------------------ */ /* .login-box-msg ("Please Login") is rendered with an inline color:black; override it for dark mode (the !important rule beats the inline style). */ .dark-mode .login-box-msg { color: #e9ecef !important; } /* Keep the card surface and its outline readable on the dark login background. */ .dark-mode .login-box .card, .dark-mode .register-box .card { background-color: #343a40; color: #e9ecef; } /* Bootstrap's default `.close` is a black "x" with a white text-shadow, which is invisible on AdminLTE's dark modal headers. AdminLTE only restyles it for coloured modals (.bg-primary, .bg-warning, ...), so fix the default case. */ .dark-mode .modal-content .close { color: #e9ecef; text-shadow: 0 1px 0 #000; opacity: 0.8; } .dark-mode .modal-content .close:hover, .dark-mode .modal-content .close:focus { color: #fff; opacity: 1; } /* `.btn-default` (the modal Cancel buttons) is styled as a light button globally and AdminLTE provides no dark-mode override, so it renders as a pale, unthemed button next to the coloured Save button. Theme it to match the dark surface. */ .dark-mode .btn-default { background-color: #3a4047; border-color: #5a6268; color: #e9ecef; } .dark-mode .btn-default:hover, .dark-mode .btn-default:focus, .dark-mode .btn-default:active { background-color: #4b545c; border-color: #6c757d; color: #fff; }