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>
Bump @fortawesome/fontawesome-free 6.7.2 -> 7.3.0 (the only remaining
outdated dependency; everything else was already at latest). Drop the
now-unused .ttf webfonts - FA7's dist CSS only references .woff2.
Rename the same AdminLTE2/Bootstrap3 selectors across all 6 theme files
under style/themes/ that were already renamed everywhere else in this
migration: .main-header/.main-sidebar/.main-footer -> .app-header/
.app-sidebar/.app-footer, .wrapper -> .app-wrapper, .content-wrapper ->
.app-main (this one predates AdminLTE 4 entirely and no longer exists
anywhere - confirmed dead in the current markup), .treeview-menu ->
.nav-treeview, sidebar .header list items -> .nav-header, and the full
box/panel -> card component family (including collapsed-box -> collapsed-
card and the color/state variants). Also removed now-dead bootstrap-select/
icheck-bootstrap selectors that can never match anything anymore.
All 7 theme options (default-auto/-light/-dark/-darker, high-contrast,
high-contrast-dark, lcars) are genuinely selectable in Settings -> Web
interface/API, confirmed via the live theme dropdown - none of these
files were dead code, despite "default-darker" not being referenced by
name anywhere else in this repo (themes are loaded via string
concatenation of a backend-supplied name).
Removed pi-hole.css's ~210-line hand-rolled polyfill of Bootstrap 4/5's
margin/padding/display utility classes (.m-0.../.py-3/.d-none) - these
exist natively in Bootstrap 5 now (confirmed present with identical
values in the vendored adminlte.min.css), so the polyfill was pure dead
weight.
Verified against a live container: switched the active theme through
default-darker, lcars, and high-contrast and reloaded the dashboard for
each - all three render correctly (LCARS's very custom skin in
particular came through intact) with zero console errors. FA7 icons
render correctly across the sidebar and dashboard.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
- fix broken visual after initial changes;
- remove donate button from topmenu;
- re-add donate button to the sidebar and add hover color;
- remove "Ph" when collapsed;
- add icon and background to topmenu button;
- hide main menu headers (using lines as separators);
- reorder the main menu;
- adjust each theme to the new visual (CSS and HTML tweaks).
- new menu colors for LCARS theme
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add a message to show while loading content;
- add CSS to format the loading message;
- fix yellow log color (light theme);
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add Datatables extension Select (CSS and js);
- add Datatables extension Buttons (CSS and js);
- allow selection of multiple warnings;
- new button to select all;
- new button to delete all selected warnings;
- add icons for the buttons;
- hide buttons if all messages were deleted;
- update CSS themes to format the new items;
- Fix: update icon count after warning deletion;
- Fix: remove triangle icon after delete last warning;
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
* format code
* use `background-color` instead of the `background` shorthand
* use the `animation` shorthand
* remove unneeded CSS prefixes
Signed-off-by: XhmikosR <xhmikosr@gmail.com>
yubiuser
XhmikosR
RD WebDesign
DL6ER
Christian König
