The new theme doesn't use background colors for striped tables and to show
selected rows. Instead, it adds box-shadow to table cells to simulate
background colors. The original theme uses a opaque color and white text,
breaking the Pi-hle themes.
The fix replaces the original box-shadow with a semi-transparent shadow
and uses the theme text color.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- The multi-line comments added in the previous UI-fix commits aligned their
continuation lines with an odd number of leading spaces, which the
editorconfig check rejects (it wants multiples of two). Re-indent them.
- Equalise the two single-icon columns (list status and list type) on the
subscribed-lists table so the type column is no longer noticeably wider than
the status one, and centre their icons.
Signed-off-by: DL6ER <dl6er@dl6er.de>
- Bootstrap 5 also removed `.form-group` (row bottom margin) and `.help-block`
(muted helper text); both are used across the settings and query-log forms,
so restore them. This recovers the vertical spacing that was missing between
form rows throughout the interface.
- Dark theme: mute the active pagination link and the filled `.card-info` /
`.card-primary` card headers (e.g. the query-log "Advanced filtering" box),
which used Bootstrap's over-bright `#0d6efd`/`#0dcaf0` on the dark background.
The headers are recoloured via AdminLTE 4's `--lte-card-variant-*` variables.
- Widen the reverse-DNS servers table's "Enabled" column so its header no
longer overflows into the next column.
Signed-off-by: DL6ER <dl6er@dl6er.de>
The Bootstrap 3 -> 5 jump silently dropped several utilities and defaults the
templates still relied on, leaving elements mis-rendered:
- `.hidden` no longer exists in Bootstrap 5, so every element toggled via it
(the 2FA login field, the diagnosis `warning-count` badge, the "reset
sorting" and "enable 2FA" buttons) was permanently visible. Restore it.
- `.btn-block` was removed; restore it so the settings "Actions" and gravity
buttons fill their grid column again instead of collapsing left-aligned.
- AdminLTE 4 resets `.card` bottom margin to 0, removing the vertical rhythm
between stacked cards. Restore a consistent `margin-bottom`.
- `.btn-toolbar` no longer spaces its button groups; add a small gap.
- The header logo/wordmark is no longer swapped when the sidebar collapses, so
"Pi-hole" wrapped in the narrow header. Show the compact "Ph" mark instead.
- The domain-management tab links were missing the `nav-item`/`nav-link`
classes Bootstrap 5 requires, so they rendered as bare text.
Also tone down the over-bright `h4` heading colour (`#44def1`) in the dark
theme to the theme's own accent blue, and hide the Tom Select "none selected"
placeholder once a group is selected.
Signed-off-by: DL6ER <dl6er@dl6er.de>
Follows up on rdwebdesign's comment about themes needing a rewrite to use v4's CSS custom properties instead of piles of one-off rules.
Verified against the live DOM in a Docker container that these selectors no longer match anything: they targeted AdminLTE2/Bootstrap 3 markup (.sidebar-form, .nav-stacked, .left-side/.right-side, box-solid, box-comment...) or old DataTables classnames replaced by the dt-* build in this PR (dataTables_wrapper, dataTables_paginate). Bootstrap 5's native [data-bs-theme=dark] cascade already covers the pagination/search styling those rules used to provide.
Also pulled the two most-repeated literal colours (#bec5cb text, #353c42 background, appearing 34/35 times each) out into --theme-text/--theme-bg custom properties.
default-darker.css is a separate, much larger (5600+ line) machine-generated Darkreader dump and needs its own dedicated pass, not attempted here.
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <github@promofaux.dev>
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 fixes for mobile and medium screens
- new style selectors
- button background-color (tablets / medium screens)
- small adjustments
- remove unused image file
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>
RD WebDesign
DL6ERandAdam Warner
yubiuser
XhmikosR
SodaWithoutSparkles
Christian König
Iksas
Robin Tweedie
Kenneth Chew
Gontier Julien
KevinandGitHub