Visual adjustments

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

index.php

@@ -20,7 +20,7 @@ require_once 'scripts/pi-hole/php/gravity.php';
 <div class="row">
     <div class="col-lg-3 col-sm-6">
         <!-- small box -->
-        <div class="small-box bg-green no-user-select" id="total_queries" title="only A + AAAA queries">
+        <div class="small-box bg-aqua no-user-select" id="total_queries" title="only A + AAAA queries">
             <div class="inner">
                 <p>Total queries</p>
                 <h3 class="statistic"><span id="dns_queries_today">---</span></h3>
@@ -36,7 +36,7 @@ require_once 'scripts/pi-hole/php/gravity.php';
     <!-- ./col -->
     <div class="col-lg-3 col-sm-6">
         <!-- small box -->
-        <div class="small-box bg-aqua no-user-select">
+        <div class="small-box bg-red no-user-select">
             <div class="inner">
                 <p>Queries Blocked</p>
                 <h3 class="statistic"><span id="queries_blocked_today">---</span></h3>
@@ -68,7 +68,7 @@ require_once 'scripts/pi-hole/php/gravity.php';
     <!-- ./col -->
     <div class="col-lg-3 col-sm-6">
         <!-- small box -->
-        <div class="small-box bg-red no-user-select" title="<?php echo gravity_last_update(); ?>">
+        <div class="small-box bg-green no-user-select" title="<?php echo gravity_last_update(); ?>">
             <div class="inner">
                 <p>Domains on Adlists</p>
                 <h3 class="statistic"><span id="domains_being_blocked">---</span></h3>

style/pi-hole.css

@@ -9,14 +9,6 @@
   background: url("../img/boxed-bg.png") repeat fixed;
 }
 
-.small-box span {
-  transition-duration: 0.5s;
-}
-
-.small-box span.glow {
-  text-shadow: 0 0 5px currentColor;
-}
-
 @-webkit-keyframes Pulse {
   from {
     opacity: 0;
@@ -434,12 +426,29 @@ td.lookatme {
   overflow: hidden;
 }
 
+.small-box span {
+  transition-duration: 0.5s;
+}
+
+.small-box-footer span {
+  transition-duration: 0s;
+}
+
+.small-box span.glow {
+  text-shadow: 0 0 5px currentColor;
+}
+
 .small-box p {
   margin: 0 0 5px;
 }
 
 .small-box > .inner {
-  padding: 10px 10px 0 10px;
+  padding: 10px 10px 0;
+}
+
+.small-box > .small-box-footer {
+  color: rgba(255, 255, 255, 0.5);
+  transition: all 0.5s;
 }
 
 @media screen and (min-width: 768px) {
@@ -448,6 +457,7 @@ td.lookatme {
     padding: 3px 7px;
   }
 }
+
 .small-box-footer svg {
   margin: 0 5px;
   font-size: 13px;

style/themes/lcars.css

@@ -1999,6 +1999,14 @@ td.highlight {
   color: #000 !important;
 }
 
+.small-box > .small-box-footer:hover {
+  color: #000;
+}
+
+.small-box > .small-box-footer {
+  color: rgba(0, 0, 0, 0.5);
+}
+
 .small-box .icon,
 .select2-selection__clear {
   font-family: sans-serif;