From f528829c67c5de2c0e586c7e0b2ee7033db0766c Mon Sep 17 00:00:00 2001
From: RD WebDesign
Date: Sat, 13 Aug 2022 02:00:24 -0300
Subject: [PATCH 01/10] Testing a shorter main menu + top menu
Signed-off-by: RD WebDesign
---
scripts/pi-hole/php/header_authenticated.php | 52 ++---
scripts/pi-hole/php/sidebar.php | 218 ++++++++-----------
style/pi-hole.css | 54 +++--
style/themes/default-dark.css | 19 +-
style/themes/default-darker.css | 20 ++
style/themes/default-light.css | 7 +
6 files changed, 197 insertions(+), 173 deletions(-)
diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
index 9d03aca4..3c1070cc 100644
--- a/scripts/pi-hole/php/header_authenticated.php
+++ b/scripts/pi-hole/php/header_authenticated.php
@@ -185,8 +185,7 @@ if ($auth) {
-
-
-
-
-
- Session is valid for
- 0) {
- echo $maxlifetime;
-} else {
- echo '0';
-} ?>
-
-
-
-
-
-
+
+
diff --git a/scripts/pi-hole/php/sidebar.php b/scripts/pi-hole/php/sidebar.php
index a34cdfea..810670c3 100644
--- a/scripts/pi-hole/php/sidebar.php
+++ b/scripts/pi-hole/php/sidebar.php
@@ -76,31 +76,93 @@
Dashboard
-
- 0 && $auth) {
- ?>
-
-
- Logout
+
+
+
+ Tools
+
+
+
+
+
+
+
+
+ class="active">
+
+ Settings
-
-
- 0 && !$auth) {
- ?>
- class="active">
-
- Login
-
-
-
-
@@ -226,116 +288,6 @@
-
-
-
-
-
- Tools
-
-
-
-
-
-
-
-
- class="active">
-
- Settings
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 3eca6adc..321f8454 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -742,31 +742,59 @@ li:not(.menu-open) .treeview-menu .warning-count {
height: 50px;
}
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
- background: transparent !important;
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
+ height: auto;
+ padding: 15px 15px 5px;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
+ height: 50px;
+ width: 50px;
+ border: none;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+ border-radius: 0;
+ border-color: #fff;
}
/*** Donate button - navbar ***/
-.main-header .navbar-custom-menu .user-footer .donate {
- margin: 15px;
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate {
+ margin: 0;
padding: 0.8em 1em;
- width: calc(100% - 30px);
- color: #fff;
+ width: 100%;
+ color: #fff !important;
background: #96060c;
border: none;
border-radius: 6px;
}
-.main-header .navbar-custom-menu .user-footer .donate:hover,
-.main-header .navbar-custom-menu .user-footer .donate:active,
-.main-header .navbar-custom-menu .user-footer .donate:active:hover,
-.main-header .navbar-custom-menu .user-footer .donate:focus,
-.main-header .navbar-custom-menu .user-footer .donate:active:focus {
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:hover,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:active,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:active:hover,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:focus,
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:active:focus {
background: #f60d1a;
}
-.navbar-custom-menu > .navbar-nav > li:nth-child(1) {
- padding: 0 10px 0 0;
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+ padding: 10px 15px;
+ background: #fff;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
+ background: transparent !important;
+ color: #000 !important;
+ padding: 6px 0;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu {
+ width: 240px;
+}
+
+.user-menu hr {
+ margin: 5px 0;
+ opacity: 0.5;
}
#apiTokenIframe {
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
index 56363758..ac54dd81 100644
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -503,16 +503,33 @@ fieldset[disabled] .form-control {
background-color: #353c42;
opacity: 1;
}
+
.dropdown-menu {
background-color: #22282d;
color: #bec5cb;
border: 1px solid #4c5761;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
- background-color: #4c5761;
+ background-color: #30383f;
color: #bec5cb;
border: 1px solid #171c20;
}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+ border-color: #bec5cb;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+ background-color: #272c30;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
+ color: #bec5cb !important;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
+ color: #fff !important;
+}
+.user-menu hr {
+ border-color: #bec5cb;
+}
+
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: #2d343a;
}
diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
index 8243ccfe..301e512e 100644
--- a/style/themes/default-darker.css
+++ b/style/themes/default-darker.css
@@ -5500,6 +5500,26 @@ link-muted {
.content-header {
background-color: transparent;
}
+
+.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+ background-color: #30383f;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+ border-color: #bec5cb;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+ background-color: #272c30;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
+ color: #bec5cb !important;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
+ color: #fff !important;
+}
+.user-menu hr {
+ border-color: #bec5cb;
+}
+
.wrapper,
.main-sidebar,
.left-side {
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index c808eee1..4371a09c 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -54,6 +54,13 @@
.content-header {
background-color: transparent;
}
+.navbar-nav > .user-menu > .dropdown-menu > .user-body {
+ background: #e4e8f0;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
+ color: #367fa9 !important;
+}
+
.wrapper,
.main-sidebar,
.left-side {
From 46874762d055a210ac7d1eaedf5bd682e2fe44ae Mon Sep 17 00:00:00 2001
From: RD WebDesign
Date: Sat, 13 Aug 2022 02:05:13 -0300
Subject: [PATCH 02/10] Different order
Signed-off-by: RD WebDesign
---
scripts/pi-hole/php/sidebar.php | 114 ++++++++++++++++----------------
1 file changed, 57 insertions(+), 57 deletions(-)
diff --git a/scripts/pi-hole/php/sidebar.php b/scripts/pi-hole/php/sidebar.php
index 810670c3..93ec701d 100644
--- a/scripts/pi-hole/php/sidebar.php
+++ b/scripts/pi-hole/php/sidebar.php
@@ -164,63 +164,6 @@
-
-
- class="active">
-
- Query Log
-
-
-
-
-
- Long-term Data
-
-
-
-
-
-
-
-
-
- class="active">
-
- Groups
-
-
- class="active">
-
- Clients
-
-
- class="active">
-
- Domains
-
-
- class="active">
-
- Adlists
-
-
-
hidden>
@@ -288,6 +231,63 @@
+
+
+
+ class="active">
+
+ Query Log
+
+
+
+
+
+ Long-term Data
+
+
+
+
+
+
+
+
+
+ class="active">
+
+ Groups
+
+
+ class="active">
+
+ Clients
+
+
+ class="active">
+
+ Domains
+
+
+ class="active">
+
+ Adlists
+
+
From 836b7ab7be460b85e7bb7af17dee3fa5706d2fa6 Mon Sep 17 00:00:00 2001
From: RD WebDesign
Date: Sat, 13 Aug 2022 02:07:14 -0300
Subject: [PATCH 03/10] Fix logout link
Signed-off-by: RD WebDesign
---
scripts/pi-hole/php/header_authenticated.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
index 3c1070cc..dc44001c 100644
--- a/scripts/pi-hole/php/header_authenticated.php
+++ b/scripts/pi-hole/php/header_authenticated.php
@@ -227,7 +227,7 @@ if ($auth) {
Pi-hole Forum
GitHub
- Log out
+ Log out
From 17857841abc032ea60cdeda5a26001083ae06c83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20K=C3=B6nig?=
Date: Sat, 13 Aug 2022 11:14:51 +0200
Subject: [PATCH 04/10] Change left hamburger menu icon to arrows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Christian König
---
scripts/pi-hole/php/header_authenticated.php | 2 +-
style/pi-hole.css | 15 +++++++++++++++
2 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
index dc44001c..5905ba4f 100644
--- a/scripts/pi-hole/php/header_authenticated.php
+++ b/scripts/pi-hole/php/header_authenticated.php
@@ -171,7 +171,7 @@ if ($auth) {
-
-
-
-
+
- hidden>
+
-
-
+
-
-
- class="active">
-
- Query Log
-
-
-
-
+
+
+
+
+
-
-
- class="active">
-
- Groups
-
-
- class="active">
-
- Clients
-
-
- class="active">
-
- Domains
-
-
- class="active">
-
- Adlists
+
+
+
diff --git a/style/pi-hole.css b/style/pi-hole.css
index eba3ecac..212278c1 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -408,6 +408,8 @@ td.lookatme {
float: left;
background: none;
padding: 15px;
+ width: 50px;
+ text-align: center;
}
.sidebar-toggle-svg:hover {
@@ -415,6 +417,25 @@ td.lookatme {
background: #367fa9;
}
+/* Hide the "Ph" and move the toggle to the left */
+.sidebar-mini.sidebar-collapse .main-header .logo {
+ width: 0;
+ position: absolute;
+}
+.sidebar-mini.sidebar-collapse .main-header .logo-mini {
+ visibility: hidden;
+}
+.sidebar-mini.sidebar-collapse .main-header .navbar {
+ margin-left: 0;
+}
+
+/* "Hide" all sidebar header titles, but keep them readable to screen readers */
+.sidebar-menu > li.header {
+ color: transparent;
+ font-size: 0;
+ padding: 1px;
+}
+
.box,
.small-box {
border-radius: 10px;
@@ -708,16 +729,16 @@ li:not(.menu-open) .treeview-menu .warning-count {
}
/* reverse side menu collapse arrows when menu is closed */
-.sidebar-collapse .sidebar-toggle-svg {
+.sidebar-collapse .sidebar-toggle-svg svg {
transform: scaleX(-1);
}
/* reverse side menu collapse arrows on mobile screens */
@media (max-width: 767px) {
- .sidebar-toggle-svg {
+ .sidebar-toggle-svg svg {
transform: scaleX(-1);
}
- .sidebar-open .sidebar-toggle-svg {
+ .sidebar-open .sidebar-toggle-svg svg {
transform: scaleX(1);
}
}
@@ -757,6 +778,17 @@ li:not(.menu-open) .treeview-menu .warning-count {
height: 50px;
}
+.navbar-nav > .user-menu {
+ margin-left: 15px;
+ width: 50px;
+ text-align: center;
+}
+@media screen and (min-width: 767px) {
+ .navbar-nav > .user-menu {
+ background: rgba(0, 0, 0, 0.1);
+ }
+}
+
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
height: auto;
padding: 15px 15px 5px;
@@ -773,25 +805,6 @@ li:not(.menu-open) .treeview-menu .warning-count {
border-color: #fff;
}
-/*** Donate button - navbar ***/
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate {
- margin: 0;
- padding: 0.8em 1em;
- width: 100%;
- color: #fff !important;
- background: #96060c !important;
- border: none;
- border-radius: 6px;
-}
-
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:hover,
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:active,
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:active:hover,
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:focus,
-.navbar-nav > .user-menu > .dropdown-menu > .user-body a.donate:active:focus {
- background: #f60d1a;
-}
-
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
padding: 10px 15px;
background: #fff;
@@ -799,12 +812,20 @@ li:not(.menu-open) .treeview-menu .warning-count {
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
background: transparent !important;
- color: #000 !important;
padding: 6px 0;
}
.navbar-nav > .user-menu > .dropdown-menu {
width: 240px;
+ border: none;
+ overflow: hidden;
+ padding: 0;
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
+ margin: 1px;
+}
+
+.dropdown-menu > li > a {
+ color: inherit;
}
.user-menu hr {
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
index ac54dd81..83a19621 100644
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -123,6 +123,13 @@ h4 {
.treeview-menu > li > a:focus {
color: #fff;
}
+/* "Donate" sidebar button */
+.sidebar-menu > li.menu-donate:hover > a,
+.sidebar-menu > li.menu-donate > a:focus {
+ background-color: #3c8dbc;
+ border-left-color: #fff;
+}
+
.sidebar-form {
border-radius: 3px;
border: 1px solid #3e464c;
@@ -511,8 +518,8 @@ fieldset[disabled] .form-control {
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
background-color: #30383f;
- color: #bec5cb;
border: 1px solid #171c20;
+ box-shadow: none;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
border-color: #bec5cb;
@@ -594,11 +601,6 @@ input[type="password"]::-webkit-caps-lock-indicator {
color: #bec5cb !important;
}
-.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
- background-color: #353c42bb;
- padding: 10px;
-}
-
.modal-content {
background: #272c30;
}
diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
index 301e512e..ceacb580 100644
--- a/style/themes/default-darker.css
+++ b/style/themes/default-darker.css
@@ -2710,8 +2710,7 @@ a:focus {
color: rgba(232, 230, 227, 0.8);
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
- border-bottom-color: rgb(51, 55, 57);
- border-top-color: rgb(58, 62, 65);
+ border-color: #1b2428;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
color: rgb(189, 183, 175) !important;
@@ -2724,23 +2723,31 @@ a:focus {
}
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
- background-color: rgb(27, 30, 31);
+ background-color: #1b2428;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
color: rgb(168, 160, 149);
}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
+ color: rgb(194, 189, 181) !important;
+}
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
+ color: rgb(232, 230, 227) !important;
+}
@media (max-width: 991px) {
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
- background-color: rgb(27, 30, 31);
+ background-color: #1b2428;
}
}
-@media (max-width: 991px) {
- .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
- border-color: rgb(58, 62, 65);
- background-color: rgb(24, 26, 27);
- background-image: none;
- }
+.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+ background-color: #283038;
+ border: 1px solid #283038;
+ background-image: none;
}
+.user-menu hr {
+ border-color: #bec5cb;
+}
+
.form-group.has-success label {
color: rgb(88, 255, 178);
}
@@ -5494,32 +5501,10 @@ link-muted {
.main-header .logo:hover {
background-color: rgb(42, 99, 132);
}
-.main-header li.user-header {
- background-color: rgb(48, 113, 150);
-}
.content-header {
background-color: transparent;
}
-.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
- background-color: #30383f;
-}
-.navbar-nav > .user-menu > .dropdown-menu > .user-body {
- border-color: #bec5cb;
-}
-.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
- background-color: #272c30;
-}
-.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
- color: #bec5cb !important;
-}
-.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
- color: #fff !important;
-}
-.user-menu hr {
- border-color: #bec5cb;
-}
-
.wrapper,
.main-sidebar,
.left-side {
@@ -5560,6 +5545,12 @@ link-muted {
.treeview-menu > li > a:focus {
color: rgb(232, 230, 227);
}
+/* "Donate" sidebar button */
+.sidebar-menu > li.menu-donate:hover > a,
+.sidebar-menu > li.menu-donate > a:focus {
+ background-color: #2b6687;
+ border-left-color: rgb(232, 230, 227);
+}
.sidebar-form {
border-color: rgb(118, 109, 97);
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index 4371a09c..2d524ca8 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -33,9 +33,6 @@
.main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255, 255, 255, 0.1);
}
- .main-header .navbar .dropdown-menu li a {
- color: #fff;
- }
.main-header .navbar .dropdown-menu li a:hover {
background-color: #367fa9;
}
@@ -94,6 +91,12 @@
.sidebar a:hover {
text-decoration: none;
}
+/* "Donate" sidebar button */
+.sidebar-menu > li.menu-donate:hover > a,
+.sidebar-menu > li.menu-donate > a:focus {
+ background-color: #367fa9;
+ border-left-color: #fff;
+}
.treeview-menu > li > a {
color: #8aa4af;
}
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index efd79c23..23f2cc1f 100644
--- a/style/themes/lcars.css
+++ b/style/themes/lcars.css
@@ -473,6 +473,9 @@ p.login-box-msg,
.main-header .navbar {
background-image: linear-gradient(#000 36px, transparent 36px);
}
+.sidebar-mini.sidebar-collapse .main-header .navbar {
+ margin-left: 50px;
+}
.main-header .navbar::after {
content: "";
@@ -491,20 +494,20 @@ p.login-box-msg,
padding: 0;
overflow: hidden;
color: #000;
- background: #9ab;
- border: 3px solid #fff;
+ background: #9ab !important;
+ border: 3px solid #fff !important;
border-radius: 8px;
- box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
+ box-shadow: 0 0 0 2000vmax rgba(0, 0, 0, 0.6);
+}
+
+.dropdown-menu > li > a:hover {
+ color: #06c;
}
.dropdown-toggle {
z-index: 2000;
}
-.dropdown-menu > li > a {
- color: inherit;
-}
-
.main-header li.user-header {
background-color: #000;
}
@@ -515,9 +518,10 @@ p.login-box-msg,
.navbar .nav > li > a,
.navbar .nav > li > .navbar-text {
- color: #000;
padding: 0;
margin: 0;
+ width: 100%;
+ color: #000;
line-height: 1.2;
font-size: 1em;
text-align: center;
@@ -537,10 +541,11 @@ p.login-box-msg,
top: 0;
bottom: -6px;
background: #48f;
+ padding: 0 20px;
}
.navbar-custom-menu > .navbar-nav > li {
- padding: 0 4px;
+ flex: 1 1 auto;
}
#pihole-diagnosis {
@@ -573,7 +578,12 @@ p.login-box-msg,
}
.dropdown.user.user-menu {
- min-width: 84px;
+ margin-left: 20px;
+ width: 1.6em;
+ flex: 0 1 auto;
+ padding: 0 5px 5px;
+ border-radius: 4px;
+ background: none;
}
.navbar-text code {
@@ -741,17 +751,10 @@ p.login-box-msg,
}
.sidebar-menu > li.header {
- margin: 4px 0 0;
- padding: 0.5em 1em;
- text-align: left;
- color: #000;
- background: #cce6ff;
- font-size: 11px;
-}
-
-/* Hide menu headers if not logged in */
-body:not(.logged-in) .sidebar-menu > li.header {
- display: none;
+ margin: 0;
+ padding: 0;
+ color: transparent;
+ font-size: 0;
}
.sidebar-menu > li > a {
@@ -763,7 +766,6 @@ body:not(.logged-in) .sidebar-menu > li.header {
.sidebar-menu > li.active > a {
background-color: #eda;
- box-shadow: inset 0 0 18px #ba7;
}
.sidebar-menu > li > a.menu-support {
@@ -772,8 +774,7 @@ body:not(.logged-in) .sidebar-menu > li.header {
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:focus {
- background-color: #48f;
- box-shadow: none;
+ background-color: #cce6ff;
}
.sidebar-menu > li > .treeview-menu {
@@ -790,6 +791,33 @@ body:not(.logged-in) .sidebar-menu > li.header {
transform: scaleX(-1);
}
+.sidebar-menu > .menu-main a,
+.sidebar-menu > .menu-system a {
+ background-color: #8bf;
+}
+
+.sidebar-menu > .menu-analysis a {
+ background-color: #48f;
+}
+
+.sidebar-menu > .menu-group a {
+ background-color: #aaf;
+}
+
+.sidebar-menu > .menu-dns a {
+ background-color: #26f;
+}
+
+/* Donate sidebar button */
+.sidebar-menu > li.menu-donate a {
+ background: #c78;
+}
+.sidebar-menu > li.menu-donate:hover a,
+.sidebar-menu > li.menu-donate a:focus {
+ background: #e9a;
+ box-shadow: inset 0 0 18px #c78;
+}
+
.treeview-menu > li > a {
margin: 4px 0 0;
padding: 23px 38px 4px 0;
@@ -797,17 +825,17 @@ body:not(.logged-in) .sidebar-menu > li.header {
overflow: hidden;
color: #000;
background: #8bf;
- background-image: linear-gradient(to right, #48f 36px, #000 36px, #000 40px, transparent 40px);
+ background-image: linear-gradient(to right, #cce6ff 36px, #000 36px, #000 40px, transparent 40px);
border-radius: 22px;
}
.treeview-menu > li.active > a {
- background-color: #48f;
+ background-color: #cce6ff;
}
.treeview-menu > li > a:hover {
- background-color: #aad0ff;
- background-image: linear-gradient(to right, #48f 36px, #000 36px, #000 40px, transparent 40px);
+ background-color: #cce6ff;
+ background-image: linear-gradient(to right, #cce6ff 36px, #000 36px, #000 40px, #cce6ff 40px);
box-shadow: inset 0 0 18px rgba(68, 136, 255, 0.4);
}
@@ -1566,9 +1594,6 @@ table.dataTable {
.main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255, 255, 255, 0.1);
}
- .main-header .navbar .dropdown-menu li a {
- color: #fff;
- }
.main-header .logo {
width: 150px;
float: left;
@@ -1609,9 +1634,6 @@ table.dataTable {
.nav > li > a {
padding: 6px 10px;
}
- .dropdown.user.user-menu {
- min-width: 40px;
- }
.user-panel {
border-radius: 0;
}
From 5b4f8d87d6d797d133b15d91999258ba2ae1cb40 Mon Sep 17 00:00:00 2001
From: RD WebDesign
Date: Sun, 14 Aug 2022 04:10:49 -0300
Subject: [PATCH 10/10] Improve pi-hole SVG icon
- keep using inline SVG to allow color change via CSS;
- Reuse the SVG icon in all instances, using SVG symbol;
- Simplify/reduce inline SVG code;
Signed-off-by: RD WebDesign
---
scripts/pi-hole/php/header_authenticated.php | 25 ++++++++++----------
scripts/pi-hole/php/sidebar.php | 22 ++---------------
2 files changed, 14 insertions(+), 33 deletions(-)
diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
index 0bcd1b6a..815f0232 100644
--- a/scripts/pi-hole/php/header_authenticated.php
+++ b/scripts/pi-hole/php/header_authenticated.php
@@ -158,6 +158,17 @@ if ($auth) {
+
+
+