Tweak bar colors used by "Total queries" graphic (#3198)

pi-hole · Jan 29, 2025 · ee75f51 · ee75f51
2 parents 98696d4 + 2d68446
commit ee75f51
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 85 deletions.
diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -11,6 +11,26 @@
 
   /* Used in settings save button */
   --overlay-bgcolor: rgba(212, 220, 232, 0.55);
+
+  /* Dashboard graphic bars colors */
+  --allowed-color: #00a65a;
+  --blocked-color: #b00000;
+  --cached-color: #9be;
+  --other-color: #908878;
+}
+
+/* Dashboard graphic bars */
+.queries-permitted {
+  background-color: var(--allowed-color);
+}
+.queries-blocked {
+  background-color: var(--blocked-color);
+}
+.queries-cached {
+  background-color: var(--cached-color);
+}
+.queries-other {
+  background-color: var(--other-color);
 }
 
 .layout-boxed {

diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
@@ -11,6 +11,12 @@
 :root {
   --datatable-bgcolor: rgba(64, 76, 88, 0.8);
   --overlay-bgcolor: var(--datatable-bgcolor);
+
+  /* Dashboard graphic bars */
+  --allowed-color: #12b660;
+  --blocked-color: #822d21;
+  --cached-color: #44649c;
+  --other-color: #969798;
 }
 
 /* fix #2554: browser not detecting dark mode */
@@ -368,18 +374,7 @@ h4 {
 .graphs-ticks {
   color: #b8c7ce;
 }
-.queries-permitted {
-  background-color: #00a65a;
-}
-.queries-other {
-  background-color: #0077a6;
-}
-.queries-blocked {
-  background-color: #999;
-}
-.queries-cached {
-  background-color: #295340;
-}
+
 .progress {
   background-color: #333;
 }

diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
@@ -110,6 +110,12 @@ select:-webkit-autofill {
   --darkreader-selection-text: #e8e6e3;
   --datatable-bgcolor: rgb(35, 47, 52);
   --overlay-bgcolor: rgba(35, 47, 52, 0.7);
+
+  /* Dashboard graphic bars */
+  --allowed-color: #12b660;
+  --blocked-color: #822d21;
+  --cached-color: #44649c;
+  --other-color: #969798;
 }
 
 /* Modified CSS */
@@ -5619,18 +5625,7 @@ link-muted {
 .graphs-ticks {
   color: rgb(232, 230, 227);
 }
-.queries-permitted {
-  background-color: rgb(0, 133, 72);
-}
-.queries-other {
-  background-color: #0077a6;
-}
-.queries-blocked {
-  background-color: rgb(82, 88, 92);
-}
-.queries-cached {
-  background-color: rgb(0, 57, 24);
-}
+
 .text-green-light {
   color: rgb(140, 255, 26) !important;
 }

diff --git a/style/themes/default-light.css b/style/themes/default-light.css
@@ -191,18 +191,7 @@
 .graphs-ticks {
   color: #000;
 }
-.queries-permitted {
-  background-color: #00a65a;
-}
-.queries-other {
-  background-color: #0077a6;
-}
-.queries-blocked {
-  background-color: #999;
-}
-.queries-cached {
-  background-color: #59ac86;
-}
+
 .progress {
   background-color: #eee;
 }

diff --git a/style/themes/high-contrast-dark.css b/style/themes/high-contrast-dark.css
@@ -25,10 +25,11 @@
   --network-older: #182840;
   --network-never: #182028;
 
-  --allowed-color: var(--primary-color);
-  --blocked-color: var(--danger-color);
-  --cached-color: #a86600;
-  --other-color: #0077a6;
+  /* Dashboard graphic bars */
+  --allowed-color: #12b660;
+  --blocked-color: #822d21;
+  --cached-color: #44649c;
+  --other-color: #969798;
 
   --datatable-bgcolor: rgba(18, 44, 68, 0.3);
   --overlay-bgcolor: rgba(24, 28, 32, 0.8);
@@ -446,19 +447,6 @@ div.dataTables_wrapper div.dataTables_length select {
   background-color: #181c20;
 }
 
-.queries-permitted {
-  background-color: var(--allowed-color);
-}
-.queries-blocked {
-  background-color: var(--blocked-color);
-}
-.queries-cached {
-  background-color: var(--cached-color);
-}
-.queries-other {
-  background-color: var(--other-color);
-}
-
 code,
 pre {
   padding: 2px 4px;

diff --git a/style/themes/high-contrast.css b/style/themes/high-contrast.css
@@ -23,10 +23,11 @@
   --network-older: #cce6fe;
   --network-never: #ffca98;
 
-  --allowed-color: #3c7;
-  --blocked-color: var(--danger-color);
-  --cached-color: var(--primary-color);
-  --other-color: #0077a6;
+  /* Dashboard graphic bars colors */
+  --allowed-color: #009960;
+  --blocked-color: #b00000;
+  --cached-color: #acf;
+  --other-color: #908878;
 
   --overlay-bgcolor: rgba(255, 255, 255, 0.8);
 }
@@ -234,18 +235,7 @@ a:hover {
 .graphs-ticks {
   color: #000;
 }
-.queries-permitted {
-  background-color: var(--allowed-color);
-}
-.queries-blocked {
-  background-color: var(--blocked-color);
-}
-.queries-cached {
-  background-color: var(--cached-color);
-}
-.queries-other {
-  background-color: var(--other-color);
-}
+
 .progress {
   background-color: #eee;
 }

diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -11,6 +11,12 @@
   --net-old-color: #125;
   --net-older-color: #1c2228;
   --datatable-bgcolor: var(--net-old-color);
+
+  /* Dashboard graphic bars */
+  --allowed-color: #073;
+  --blocked-color: #d43;
+  --cached-color: #7bf;
+  --other-color: #eca;
 }
 
 .sidebar-collapse {
@@ -2005,22 +2011,6 @@ input[type="password"]::-webkit-caps-lock-indicator {
   background-color: #48f;
 }
 
-.queries-permitted {
-  background-color: rgb(0, 133, 72);
-}
-
-.queries-blocked {
-  background-color: rgb(196, 50, 50);
-}
-
-.queries-cached {
-  background-color: rgb(37, 88, 64);
-}
-
-.queries-other {
-  background-color: #0077a6;
-}
-
 /*--- Used in the Query Log table ---*/
 .text-black {
   color: #000 !important;