mirror of
https://github.com/pi-hole/web.git
synced 2026-08-23 14:51:12 +01:00
b7bd4cb6d1
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>
574 lines
12 KiB
CSS
574 lines
12 KiB
CSS
/* Pi-hole: A black hole for Internet advertisements
|
|
* (c) 2020 Pi-hole, LLC (https://pi-hole.net)
|
|
* Network-wide ad blocking via your own hardware.
|
|
*
|
|
* This file is copyright under the latest version of the EUPL.
|
|
* Please see LICENSE file for your rights under this license. */
|
|
|
|
:root {
|
|
--primary-color: #0078a0;
|
|
--primary-color-darker: #00445b;
|
|
--darker-bgcolor: #101c20;
|
|
|
|
--info-color: var(--primary-color);
|
|
--danger-color: #a83333;
|
|
--warning-color: #a86600;
|
|
--success-color: #027744;
|
|
|
|
--menu-hover-bgcolor: var(--darker-bgcolor);
|
|
--submenu-hover-bgcolor: rgba(0, 0, 0, 0.15);
|
|
|
|
--network-recent: #f4fcfa;
|
|
--network-old: #ddefff;
|
|
--network-older: #cce6fe;
|
|
--network-never: #ffca98;
|
|
|
|
/* Dashboard graphic bars colors */
|
|
--allowed-color: #009960;
|
|
--blocked-color: #b00000;
|
|
--cached-color: #acf;
|
|
--other-color: #908878;
|
|
|
|
--overlay-bgcolor: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* removing transition for every element, to avoid unnecessary movement */
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
|
|
body {
|
|
font-size: 15px;
|
|
}
|
|
.layout-boxed {
|
|
background: #abc;
|
|
}
|
|
|
|
a {
|
|
color: #1e6188;
|
|
}
|
|
a:hover {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.logo-img {
|
|
filter: saturate(0) brightness(4.6) contrast(0.9);
|
|
}
|
|
|
|
.app-header .navbar {
|
|
background-color: var(--primary-color);
|
|
}
|
|
.app-header .navbar .nav > li > a,
|
|
.app-header .navbar .nav > li > .navbar-text {
|
|
color: #fff;
|
|
max-height: 50px;
|
|
}
|
|
.app-header .navbar .nav > li > a:hover,
|
|
.app-header .navbar .nav > li > a:active,
|
|
.app-header .navbar .nav > li > a:focus,
|
|
.app-header .navbar .nav .open > a,
|
|
.app-header .navbar .nav .open > a:hover,
|
|
.app-header .navbar .nav .open > a:focus {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
color: #f6f6f6;
|
|
}
|
|
.app-header .navbar .nav > li > .navbar-text code {
|
|
color: #900;
|
|
}
|
|
.app-header .navbar .sidebar-toggle {
|
|
color: #fff;
|
|
}
|
|
.app-header .navbar .sidebar-toggle:hover {
|
|
color: #f6f6f6;
|
|
background-color: var(--primary-color-darker);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.app-header .navbar .dropdown-menu li.divider {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.app-header .navbar .dropdown-menu li a:hover {
|
|
background-color: var(--primary-color-darker);
|
|
}
|
|
}
|
|
.app-header .logo {
|
|
background-color: var(--primary-color-darker);
|
|
color: #fff;
|
|
border-bottom: 0 solid transparent;
|
|
}
|
|
.app-header .logo:hover {
|
|
background-color: var(--menu-hover-bgcolor);
|
|
}
|
|
.app-header li.user-header {
|
|
background-color: var(--primary-color-darker);
|
|
}
|
|
.content-header {
|
|
background-color: transparent;
|
|
}
|
|
.navbar-nav > .user-menu > .dropdown-menu {
|
|
margin: 0;
|
|
border: 2px solid var(--primary-color-darker);
|
|
}
|
|
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
|
|
padding: 0;
|
|
color: var(--primary-color-darker);
|
|
}
|
|
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
|
|
padding: 8px 12px;
|
|
}
|
|
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
|
|
background-color: var(--primary-color) !important;
|
|
color: #fff;
|
|
}
|
|
.user-menu hr {
|
|
margin: 0;
|
|
opacity: 1;
|
|
border-color: var(--primary-color-darker);
|
|
}
|
|
|
|
.app-wrapper,
|
|
.app-sidebar,
|
|
.left-side {
|
|
background-color: #222d32;
|
|
}
|
|
.user-panel > .info,
|
|
.user-panel > .info > a {
|
|
color: #fff;
|
|
}
|
|
.sidebar-menu > li.nav-header {
|
|
color: #808a90;
|
|
background-color: var(--menu-hover-bgcolor);
|
|
}
|
|
.sidebar-menu > li > a {
|
|
border-left: 3px solid transparent;
|
|
}
|
|
.sidebar-menu > li:hover > a,
|
|
.sidebar-menu > li > a:focus,
|
|
.sidebar-menu > li.active > a {
|
|
color: #fff;
|
|
background-color: var(--menu-hover-bgcolor);
|
|
border-left-color: #fff;
|
|
}
|
|
.sidebar-menu > li > .nav-treeview {
|
|
margin: 0 3px;
|
|
background-color: #2c3b41;
|
|
}
|
|
.sidebar a {
|
|
color: #d2dde1;
|
|
}
|
|
.sidebar a:hover {
|
|
text-decoration: none;
|
|
}
|
|
/* "Donate" sidebar button */
|
|
.sidebar-menu > li.menu-donate:hover > a,
|
|
.sidebar-menu > li.menu-donate > a:focus {
|
|
color: #fff;
|
|
background-color: #a03333;
|
|
}
|
|
.nav-treeview {
|
|
padding: 0;
|
|
}
|
|
.nav-treeview > li > a {
|
|
padding: 5px 5px 5px 17px;
|
|
}
|
|
.nav-treeview > li.active > a,
|
|
.nav-treeview > li > a:hover,
|
|
.nav-treeview > li > a:focus {
|
|
color: #fff;
|
|
background: var(--menu-hover-bgcolor);
|
|
}
|
|
|
|
.nav-tabs-custom > .nav-tabs {
|
|
background: #e4e8f0;
|
|
}
|
|
.nav-tabs-custom > .nav-tabs > li {
|
|
margin-right: 1px;
|
|
}
|
|
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
|
|
background: #fff;
|
|
border-top-color: #d2d6de;
|
|
}
|
|
.nav-tabs-custom > .nav-tabs > li > a,
|
|
.nav-tabs-custom > .nav-tabs > li > a:hover {
|
|
color: #567;
|
|
}
|
|
.nav-tabs-custom > .nav-tabs > li > a:focus {
|
|
border-top-color: var(--primary-color-darker);
|
|
}
|
|
.nav-tabs-custom > .nav-tabs > li.active {
|
|
border-top-color: var(--primary-color);
|
|
}
|
|
|
|
.form-control {
|
|
color: #000;
|
|
}
|
|
.form-control::-moz-placeholder {
|
|
color: #6c747b;
|
|
}
|
|
.form-control::placeholder {
|
|
color: #6c747b;
|
|
}
|
|
.form-control::-webkit-input-placeholder {
|
|
color: #6c747b;
|
|
}
|
|
|
|
.login-box {
|
|
background: #fff;
|
|
}
|
|
.form-group.has-error label {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.not-used {
|
|
background-color: #eee;
|
|
}
|
|
.not-used:hover {
|
|
background-color: #c5c5c5;
|
|
}
|
|
.used {
|
|
background-color: #fff;
|
|
}
|
|
.used:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.graphs-grid {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
.graphs-ticks {
|
|
color: #000;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #eee;
|
|
}
|
|
|
|
/* Used in the Query Log table */
|
|
.text-black {
|
|
color: #000 !important;
|
|
}
|
|
.text-green-light {
|
|
color: #8fa !important;
|
|
}
|
|
.text-green {
|
|
color: #008000 !important;
|
|
}
|
|
.text-orange {
|
|
color: #f80 !important;
|
|
}
|
|
.text-red {
|
|
color: #c00 !important;
|
|
}
|
|
.text-vivid-blue {
|
|
color: #39f !important;
|
|
}
|
|
|
|
/* Used in debug log page */
|
|
.log-red {
|
|
color: #d00;
|
|
font-weight: bold;
|
|
}
|
|
.log-green {
|
|
color: #071;
|
|
font-weight: bold;
|
|
}
|
|
.log-yellow {
|
|
color: #b05000;
|
|
font-weight: bold;
|
|
}
|
|
.log-blue {
|
|
color: #04d;
|
|
font-weight: bold;
|
|
}
|
|
.log-purple {
|
|
color: #a0c;
|
|
font-weight: bold;
|
|
}
|
|
.log-cyan {
|
|
color: #07a;
|
|
font-weight: bold;
|
|
}
|
|
.log-gray {
|
|
color: #999;
|
|
}
|
|
#output {
|
|
font-size: 14px;
|
|
}
|
|
#output .log-red {
|
|
background: #c00;
|
|
color: #fff;
|
|
}
|
|
|
|
.warning-count {
|
|
color: #000;
|
|
background: #eb4;
|
|
}
|
|
|
|
.datatable-bt,
|
|
.datatable-bt:active,
|
|
.datatable-bt:active:focus,
|
|
.datatable-bt:focus {
|
|
background: #fff;
|
|
border-color: #ddd;
|
|
color: #345;
|
|
}
|
|
|
|
.datatable-bt:hover,
|
|
.datatable-bt:active:hover {
|
|
background: #337ab7;
|
|
border-color: #337ab7;
|
|
color: #fff;
|
|
}
|
|
|
|
/*** Overwrite chrome's input field auto-filling ***/
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill,
|
|
select:-webkit-autofill {
|
|
-webkit-text-fill-color: #666 !important;
|
|
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
|
|
-webkit-transition: background-color 1s ease-in-out 0s;
|
|
transition: background-color 1s ease-in-out 0s;
|
|
}
|
|
|
|
.sidebar-toggle-svg:hover {
|
|
color: #fff;
|
|
background: var(--primary-color-darker);
|
|
}
|
|
|
|
/* Small box and alert colors */
|
|
.bg-aqua,
|
|
.callout.callout-info,
|
|
.alert-info,
|
|
.label-info,
|
|
.modal-info .modal-body {
|
|
background: var(--info-color) !important;
|
|
}
|
|
.bg-red,
|
|
.callout.callout-danger,
|
|
.alert-danger,
|
|
.alert-error,
|
|
.label-danger,
|
|
.modal-danger .modal-body {
|
|
background: var(--danger-color) !important;
|
|
}
|
|
.bg-yellow,
|
|
.callout.callout-warning,
|
|
.alert-warning,
|
|
.label-warning,
|
|
.modal-warning .modal-body {
|
|
background: var(--warning-color) !important;
|
|
}
|
|
.bg-green,
|
|
.callout.callout-success,
|
|
.alert-success,
|
|
.label-success,
|
|
.modal-success .modal-body {
|
|
background: var(--success-color) !important;
|
|
}
|
|
|
|
.small-box > .small-box-footer {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Tables and Datatables */
|
|
.table-bordered,
|
|
.table-bordered > thead > tr > th,
|
|
.table-bordered > tbody > tr > th,
|
|
.table-bordered > tfoot > tr > th,
|
|
.table-bordered > thead > tr > td,
|
|
.table-bordered > tbody > tr > td,
|
|
.table-bordered > tfoot > tr > td {
|
|
border: 1px solid #d0d0d0;
|
|
}
|
|
.table-striped > tbody > tr:nth-of-type(2n + 1) {
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
#StaticDHCPTable .table-danger,
|
|
.blocked-row td {
|
|
background-color: rgba(230, 160, 160, 0.3);
|
|
}
|
|
|
|
#StaticDHCPTable .table-success,
|
|
.allowed-row td {
|
|
background-color: rgba(236, 255, 246, 0.3);
|
|
}
|
|
|
|
td.highlight {
|
|
background-color: rgba(255, 204, 0, 0.333);
|
|
}
|
|
|
|
table.dataTable thead .sorting:after,
|
|
table.dataTable thead .sorting_asc:after,
|
|
table.dataTable thead .sorting_desc:after,
|
|
table.dataTable thead .sorting_asc_disabled:after,
|
|
table.dataTable thead .sorting_desc_disabled:after {
|
|
opacity: 1;
|
|
width: 20px;
|
|
padding: 0 1px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
table.dataTable thead .sorting:after {
|
|
opacity: 0.6;
|
|
}
|
|
table.dataTable thead th:hover.sorting::after,
|
|
table.dataTable thead th:hover.sorting_asc::after,
|
|
table.dataTable thead th:hover.sorting_desc::after,
|
|
table.dataTable thead th:hover.sorting_asc_disabled::after,
|
|
table.dataTable thead th:hover.sorting_desc_disabled::after {
|
|
color: #fff;
|
|
background: #000;
|
|
}
|
|
|
|
#domain-frequency .table-responsive table tr th:nth-child(3),
|
|
#domain-frequency .table-responsive table tr td:nth-child(3),
|
|
#ad-frequency .table-responsive table tr th:nth-child(3),
|
|
#ad-frequency .table-responsive table tr td:nth-child(3) {
|
|
width: 146px;
|
|
text-align: center;
|
|
}
|
|
|
|
#network-entries td {
|
|
border-color: #bbb;
|
|
}
|
|
.network-never {
|
|
background-color: var(--network-never);
|
|
}
|
|
.network-recent {
|
|
background-color: var(--network-recent);
|
|
}
|
|
.network-old {
|
|
background-color: var(--network-old);
|
|
}
|
|
.network-older {
|
|
background-color: var(--network-older);
|
|
}
|
|
.network-gradient {
|
|
background-image: linear-gradient(to right, var(--network-recent) 0%, var(--network-old) 100%);
|
|
}
|
|
|
|
/* Buttons and controls */
|
|
.pagination > .active > a,
|
|
.pagination > .active > a:focus,
|
|
.pagination > .active > a:hover,
|
|
.pagination > .active > span,
|
|
.pagination > .active > span:focus,
|
|
.pagination > .active > span:hover {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
.pagination > .disabled > a,
|
|
.pagination > .disabled > a:focus,
|
|
.pagination > .disabled > a:hover,
|
|
.pagination > .disabled > span,
|
|
.pagination > .disabled > span:focus,
|
|
.pagination > .disabled > span:hover {
|
|
color: #747474;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: #fff;
|
|
}
|
|
.btn-primary:active,
|
|
.btn-primary:focus,
|
|
.btn-primary.hover {
|
|
background-color: var(--primary-color-darker);
|
|
}
|
|
.btn-primary:hover {
|
|
color: var(--primary-color-darker);
|
|
background-color: #fff;
|
|
border-color: var(--primary-color-darker);
|
|
}
|
|
|
|
.btn-info {
|
|
background: var(--info-color);
|
|
border-color: var(--info-color) !important;
|
|
color: #fff;
|
|
}
|
|
.btn-danger {
|
|
background: var(--danger-color);
|
|
border-color: var(--danger-color) !important;
|
|
color: #fff;
|
|
}
|
|
.btn-warning {
|
|
background: var(--warning-color);
|
|
border-color: var(--warning-color) !important;
|
|
color: #fff;
|
|
}
|
|
.btn-success {
|
|
background: var(--success-color);
|
|
border-color: var(--success-color) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-default:hover {
|
|
color: #fff;
|
|
background: #444;
|
|
}
|
|
.btn-info:hover {
|
|
color: var(--info-color);
|
|
background: #fff;
|
|
}
|
|
.btn-danger:hover {
|
|
color: var(--danger-color);
|
|
background: #fff;
|
|
}
|
|
.btn-warning:hover {
|
|
color: var(--warning-color);
|
|
background: #fff;
|
|
}
|
|
.btn-success:hover {
|
|
color: var(--success-color);
|
|
background: #fff;
|
|
}
|
|
|
|
.btn-blacklist,
|
|
.btn-whitelist {
|
|
background-color: #fff;
|
|
}
|
|
.btn-audit {
|
|
color: #90c !important;
|
|
background-color: #fff;
|
|
}
|
|
.btn-blacklist:hover {
|
|
background-color: var(--danger-color);
|
|
color: #fff !important;
|
|
}
|
|
.btn-whitelist:hover {
|
|
background-color: var(--success-color);
|
|
color: #fff !important;
|
|
}
|
|
.btn-audit:hover {
|
|
background-color: #90c;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.lookatme {
|
|
color: #000 !important;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lookatme::after {
|
|
background: #eb4;
|
|
text-shadow: none;
|
|
content: "";
|
|
inset: -2px -4px;
|
|
z-index: -100;
|
|
animation: none;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
kbd {
|
|
color: #ffffff;
|
|
background-color: rgb(51, 51, 51);
|
|
box-shadow:
|
|
inset 1px 1px 2px 0 rgba(255, 255, 255, 0.2),
|
|
inset -1px -1px 2px 0 rgba(0, 0, 0, 0.5);
|
|
vertical-align: middle;
|
|
}
|