mirror of
https://github.com/pi-hole/web.git
synced 2026-08-23 14:51:12 +01:00
646a3ef6ab
Reviewed and built on top of a round of fixes already applied to the working tree (boxed layout, badge alignment, sidebar treeview links, bootstrap5-toggle's on/off->onlabel/offlabel rename, and forcing data-bs-theme explicitly instead of leaving Bootstrap 5 to fall back to the OS's prefers-color-scheme, plus the new scripts/js/theme.js that locks the resolved theme so AdminLTE's own color-mode logic can't silently override Pi-hole's own theme selection). On top of that: - Fixed the "day theme still shows dark" gap: the anti-FOUC inline background style in header.lp only covered the case where the theme is unconditionally dark, never the "auto" theme (whose Lua-side flag is literally the string "auto", not "dark") - added a prefers-color-scheme media query fallback so the auto theme also avoids a white flash without needing to wait for theme.js/CSS to load. - Fixed a strict Content-Security-Policy (img-src 'self', set by FTL's webserver) blocking every checkbox/radio checkmark, the modal close button, and the select2 dropdown arrow/clear icon: Bootstrap 5 and its plugins ship these as inline data: URI SVGs, which the CSP rejects outright. Re-hosted the exact same icons as local files under style/icons/ and pointed the same CSS custom properties at them. Learned the hard way that a url() stored in a custom property resolves relative to the stylesheet that *consumes* it via var(), not the one that declares it - the consumer here is always vendor/adminLTE/adminlte.min.css, so the override paths needed to account for that rather than being relative to pi-hole.css itself. - Found and fixed three more leftover .box-* selectors in pi-hole.css that never got updated to .card-* during the earlier card-conversion phase: the query-types/forward-destinations pie chart flex layout, the domains-list filter row header, and the dynamically-generated settings cards' sizing/hidden-state selectors - all on pages that render in normal use, unlike the handful of genuinely-unreachable .box-solid/.box-comment selectors left alone in the theme files (those modifier classes are never applied by any current markup). Verified against a live container: boxed layout now visibly constrains and centers the page, day theme renders light content with checkmarks/ close icons/dropdown arrows all visible with zero console errors, clicking Settings/Tools now expands the submenu instead of navigating to the dashboard, and sidebar badges are aligned to a consistent right edge. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Signed-off-by: Adam Warner <me@adamwarner.co.uk>