Widen the select column from 15px to 2rem so the checkbox is no longer cramped
against the column edges, centre it horizontally and vertically, and draw a
slightly larger, rounded box (dimmed until the row is selected) so the control
reads as a proper checkbox.
Signed-off-by: DL6ER <dl6er@dl6er.de>
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>
WebKit-based browsers (Safari, DuckDuckGo on macOS) don't yet support
the ES2024 Unicode Sets `v` regex flag, causing a SyntaxError that
prevents all dashboard JavaScript from executing — stats show `---` and
charts spin indefinitely.
None of the affected patterns use v-exclusive features (set notation
`[A--B]`, `[A&&B]`), so downgrading to `u` is fully equivalent and
restores broad compatibility without any functional change.
Also updates xo.config.js to enforce `requireFlag: "u"` so the linter
stays consistent with the codebase.
Affected files (16 occurrences across 8 files):
- scripts/js/utils.js
- scripts/js/index.js
- scripts/js/footer.js
- scripts/js/groups-domains.js
- scripts/js/settings-teleporter.js
- scripts/js/gravity.js
- scripts/js/groups.js
- scripts/js/groups-clients.js
- scripts/js/groups-lists.js
- scripts/js/settings-dns-records.js
- scripts/js/network.js
- scripts/js/taillog.js
Signed-off-by: Austin Gilmour <gilmoursa@gmail.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
DL6ERandAdam Warner
yubiuser
Austin GilmourandClaude Sonnet 4.6
XhmikosR