- add `data-bs-theme` to the body, accordingly to the current theme;
- add `data-bs-theme=dark` the the top bar, because we always use some
background color with white text, on this element;
- change the default theme font-size to 15px. The previous theme used 14px
(too small) and the original AdminLTE uses 16px (maybe too big);
- use `bg-body-secondary` class on the body to match the previous gray
background color on the content area;
- use `bg-body-tertiary` class on the sidebar. It is still a dark color,
but it will be changed according to the selected themes (when all themes
are implemented);
- adjust the top bar text color and border color to match the previous
theme look;
- adjust (or remove) the height on some elements on the top bar, to avoid
breaking the layout;
- move the old "logo" element to the sidebar (`.sidebar-brand` element);
- use CSS to show a smaller "Pi-hole" text logo in the collapse sidebar;
- adjust the collapsed sidebar layout, adding `.nav-badge` class to the
every badge on the sidebar;
- remove the outdated `pull-left` class;
- remove other outdated CSS rules;
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
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>
Swap vendored AdminLTE 2.4.18 + Bootstrap 3.4.1 for AdminLTE 4.1.0 +
Bootstrap 5.3.8 (AdminLTE's dist CSS now bundles Bootstrap, so the
separate Bootstrap stylesheet is dropped; only its JS bundle remains).
Rewrite the page shell (header, header_authenticated, sidebar, footer)
to AdminLTE 4's app-wrapper/app-header/app-sidebar/app-main/app-content
structure and nav-sidebar/nav-treeview markup, and convert the dashboard
(index.lp) box/small-box markup to Bootstrap 5 cards as the first fully
migrated page.
Verified against a live container: fixed a chart.js tooltip lookup that
still targeted the old .box selector, restored the header logo mini/full
swap and sidebar user-panel collapse behavior that AdminLTE 2 used to
provide for free, and resolved a duplicate id="navigation" collision
with AdminLTE 4's own accessibility skip-link script.
Every other page still uses the old box/Bootstrap-3-grid/BS3-plugin
markup and will render incorrectly until the remaining migration phases
land.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
RD WebDesignandAdam Warner
yubiuser
casperklein
XhmikosR