From d65b5be5e2e313abbea7ab08168ecfc1705ad5e1 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Mon, 9 Dec 2019 15:57:02 +0200
Subject: [PATCH] A few CSS tweaks.

Add utilities classes and fix a few CSS issues.

Signed-off-by: XhmikosR <xhmikosr@gmail.com>
---
 help.php                          |  2 +-
 network.php                       |  2 +-
 scripts/pi-hole/js/auditlog.js    |  6 ++--
 scripts/pi-hole/js/db_queries.js  | 10 +++---
 scripts/pi-hole/js/footer.js      |  4 +--
 scripts/pi-hole/js/index.js       |  2 +-
 scripts/pi-hole/js/queries.js     | 44 +++++++++++++-------------
 scripts/pi-hole/php/header.php    | 28 ++++++++---------
 scripts/pi-hole/php/loginpage.php |  2 +-
 style/pi-hole.css                 | 51 +++++++++++++++++++++++++------
 10 files changed, 91 insertions(+), 60 deletions(-)

diff --git a/help.php b/help.php
index e69ca500..c3e41fe6 100644
--- a/help.php
+++ b/help.php
@@ -24,7 +24,7 @@
     <h4>Top left: Status display</h4>
     <p>Shows different status messages:</p>
     <ul>
-        <li>Status: Current status of the Pi-hole - Active (<i class="fa fa-circle" style="color:#7fff00"></i>), Offline (<i class="fa fa-circle" style="color:#ff0000"></i>), or Starting (<i class="fa fa-circle" style="color:#ff9900"></i>)</li>
+        <li>Status: Current status of the Pi-hole - Active (<i class="fa fa-circle text-green-light"></i>), Offline (<i class="fa fa-circle text-red"></i>), or Starting (<i class="fa fa-circle text-orange"></i>)</li>
         <li>Temp: Current CPU temperature</li>
         <li>Load: load averages for the last minute, 5 minutes and 15 minutes, respectively. A load average of 1 reflects the full workload of a single processor on the system. We show a red icon if the current load exceeds the number of available processors on this machine (which is <?php echo $nproc; ?>)</li>
         <li>Memory usage: Shows the percentage of memory actually blocked by applications. We show a red icon if the memory usage exceeds 75%</li>
diff --git a/network.php b/network.php
index ff856bc9..7c1f9b02 100644
--- a/network.php
+++ b/network.php
@@ -52,7 +52,7 @@ $token = $_SESSION['token'];
             </table>
             <label>Background color: Last query from this device seen ...</label>
         <table width="100%">
-          <tr style="text-align: center;">
+          <tr class="text-center">
             <td style="background: #e7ffde;" width="15%">just now</td>
             <td style="background-image: linear-gradient(to right, #e7ffde 0%, #ffffdf 100%)" width="30%"><center>... to ...</center></td>
             <td style="background: #ffffdf;" width="15%">24 hours ago</td>
diff --git a/scripts/pi-hole/js/auditlog.js b/scripts/pi-hole/js/auditlog.js
index 12abb205..dc8df8b8 100644
--- a/scripts/pi-hole/js/auditlog.js
+++ b/scripts/pi-hole/js/auditlog.js
@@ -40,7 +40,7 @@ function updateTopLists() {
                 domain = escapeHtml(domain);
                 url = "<a href=\"queries.php?domain="+domain+"\">"+domain+"</a>";
                 domaintable.append("<tr> <td>" + url +
-                    "</td> <td>" + data.top_queries[domain] + "</td> <td> <button style=\"color:red; white-space: nowrap;\"><i class=\"fa fa-ban\"></i> Blacklist</button> <button style=\"color:orange; white-space: nowrap;\"><i class=\"fa fa-balance-scale\"></i> Audit</button> </td> </tr> ");
+                    "</td> <td>" + data.top_queries[domain] + "</td> <td> <button class=\"text-red text-nowrap\"><i class=\"fa fa-ban\"></i> Blacklist</button> <button class=\"text-orange text-nowrap\"><i class=\"fa fa-balance-scale\"></i> Audit</button> </td> </tr> ");
             }
         }
 
@@ -53,13 +53,13 @@ function updateTopLists() {
                 {
                     url = "<a href=\"queries.php?domain="+printdomain+"\">"+printdomain+"</a> (wildcard blocked)";
                     adtable.append("<tr> <td>" + url +
-                    "</td> <td>" + data.top_ads[domain] + "</td> <td> <button style=\"color:orange; white-space: nowrap;\"><i class=\"fa fa-balance-scale\"></i> Audit</button> </td> </tr> ");
+                    "</td> <td>" + data.top_ads[domain] + "</td> <td> <button class=\"text-orange text-nowrap\"><i class=\"fa fa-balance-scale\"></i> Audit</button> </td> </tr> ");
                 }
                 else
                 {
                     url = "<a href=\"queries.php?domain="+printdomain+"\">"+printdomain+"</a>";
                     adtable.append("<tr> <td>" + url +
-                    "</td> <td>" + data.top_ads[domain] + "</td> <td> <button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button> <button style=\"color:orange; white-space: nowrap;\"><i class=\"fa fa-balance-scale\"></i> Audit</button> </td> </tr> ");
+                    "</td> <td>" + data.top_ads[domain] + "</td> <td> <button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button> <button class=\"text-orange text-nowrap\"><i class=\"fa fa-balance-scale\"></i> Audit</button> </td> </tr> ");
                 }
             }
         }
diff --git a/scripts/pi-hole/js/db_queries.js b/scripts/pi-hole/js/db_queries.js
index c7a746b3..76ec1f93 100644
--- a/scripts/pi-hole/js/db_queries.js
+++ b/scripts/pi-hole/js/db_queries.js
@@ -250,31 +250,31 @@ $(document).ready(function() {
                 blocked = true;
                 color = "red";
                 fieldtext = "Blocked (gravity)";
-                buttontext = "<button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button>";
+                buttontext = "<button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button>";
                 break;
               case 2:
                 blocked = false;
                 color = "green";
                 fieldtext = "OK <br class='hidden-lg'>(forwarded)";
-                buttontext = "<button style=\"color:red; white-space: nowrap;\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
+                buttontext = "<button class=\"text-red text-nowrap\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
                 break;
               case 3:
                 blocked = false;
                 color = "green";
                 fieldtext = "OK <br class='hidden-lg'>(cached)";
-                buttontext = "<button style=\"color:red; white-space: nowrap;\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
+                buttontext = "<button class=\"text-red text-nowrap\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
                 break;
               case 4:
                 blocked = true;
                 color = "red";
                 fieldtext = "Blocked <br class='hidden-lg'>(regex/wildcard)";
-                buttontext = "<button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
+                buttontext = "<button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
                 break;
               case 5:
                 blocked = true;
                 color = "red";
                 fieldtext = "Blocked <br class='hidden-lg'>(blacklist)";
-                buttontext = "<button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
+                buttontext = "<button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
                 break;
               case 6:
                 blocked = true;
diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js
index 1e166d15..ccdf67a8 100644
--- a/scripts/pi-hole/js/footer.js
+++ b/scripts/pi-hole/js/footer.js
@@ -23,14 +23,14 @@ function piholeChanged(action)
 
     switch(action) {
         case "enabled":
-            status.html("<i class='fa fa-circle' style='color:#7fff00'></i> Active");
+            status.html("<i class='fa fa-circle text-green-light'></i> Active");
             ena.hide();
             dis.show();
             dis.removeClass("active");
             break;
 
         case "disabled":
-            status.html("<i class='fa fa-circle' style='color:#ff0000'></i> Offline");
+            status.html("<i class='fa fa-circle text-red'></i> Offline");
             ena.show();
             dis.hide();
             break;
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 9ed318ac..c162d354 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -633,7 +633,7 @@ function updateSummaryData(runOnce) {
             data["ads_percentage_today"] = "to";
             data["domains_being_blocked"] = "API";
             // Adjust text
-            $("#temperature").html("<i class=\"fa fa-circle\" style=\"color:#ff0000\"></i> FTL offline");
+            $("#temperature").html("<i class=\"fa fa-circle text-red\"></i> FTL offline");
             // Show spinner
             $("#queries-over-time .overlay").show();
             $("#forward-destinations-pie .overlay").show();
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index 69a5c84a..5ab26bd1 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -155,83 +155,83 @@ $(document).ready(function() {
             switch (data[5])
             {
             case "1":
-                dnssec_status = "<br><span style=\"color:green\">SECURE</span>";
+                dnssec_status = "<br><span class=\"text-green\">SECURE</span>";
                 break;
             case "2":
-                dnssec_status = "<br><span style=\"color:orange\">INSECURE</span>";
+                dnssec_status = "<br><span class=\"text-orange\">INSECURE</span>";
                 break;
             case "3":
-                dnssec_status = "<br><span style=\"color:red\">BOGUS</span>";
+                dnssec_status = "<br><span class=\"text-red\">BOGUS</span>";
                 break;
             case "4":
-                dnssec_status = "<br><span style=\"color:red\">ABANDONED</span>";
+                dnssec_status = "<br><span class=\"text-red\">ABANDONED</span>";
                 break;
             case "5":
-                dnssec_status = "<br><span style=\"color:orange\">UNKNOWN</span>";
+                dnssec_status = "<br><span class=\"text-orange\">UNKNOWN</span>";
                 break;
             default: // No DNSSEC
                 dnssec_status = "";
             }
 
             // Query status
-            var blocked, fieldtext, buttontext, color;
+            var blocked, fieldtext, buttontext, colorClass;
             switch (data[4])
             {
             case "1":
                 blocked = true;
-                color = "red";
+                colorClass = "text-red";
                 fieldtext = "Blocked (gravity)";
-                buttontext = "<button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button>";
+                buttontext = "<button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button>";
                 break;
             case "2":
                 blocked = false;
-                color = "green";
+                colorClass = "text-green";
                 fieldtext = "OK <br class='hidden-lg'>(forwarded)"+dnssec_status;
-                buttontext = "<button style=\"color:red; white-space: nowrap;\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
+                buttontext = "<button class=\"text-red text-nowrap\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
                 break;
             case "3":
                 blocked = false;
-                color = "green";
+                colorClass = "text-green";
                 fieldtext = "OK <br class='hidden-lg'>(cached)"+dnssec_status;
-                buttontext = "<button style=\"color:red; white-space: nowrap;\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
+                buttontext = "<button class=\"text-red text-nowrap\"><i class=\"fa fa-ban\"></i> Blacklist</button>";
                 break;
             case "4":
                 blocked = true;
-                color = "red";
+                colorClass = "text-red";
                 fieldtext = "Blocked <br class='hidden-lg'>(regex/wildcard)";
-                buttontext = "<button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
+                buttontext = "<button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
                 break;
             case "5":
                 blocked = true;
-                color = "red";
+                colorClass = "text-red";
                 fieldtext = "Blocked <br class='hidden-lg'>(blacklist)";
-                buttontext = "<button style=\"color:green; white-space: nowrap;\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
+                buttontext = "<button class=\"text-green text-nowrap\"><i class=\"fas fa-check\"></i> Whitelist</button>" ;
                 break;
             case "6":
                 blocked = true;
-                color = "red";
+                colorClass = "text-red";
                 fieldtext = "Blocked <br class='hidden-lg'>(external, IP)";
                 buttontext = "" ;
                 break;
             case "7":
                 blocked = true;
-                color = "red";
+                colorClass = "text-red";
                 fieldtext = "Blocked <br class='hidden-lg'>(external, NULL)";
                 buttontext = "" ;
                 break;
             case "8":
                 blocked = true;
-                color = "red";
+                colorClass = "text-red";
                 fieldtext = "Blocked <br class='hidden-lg'>(external, NXRA)";
                 buttontext = "" ;
                 break;
             default:
                 blocked = false;
-                color = "black";
+                colorClass = "text-black";
                 fieldtext = "Unknown ("+parseInt(data[4])+")";
                 buttontext = "";
             }
-            $(row).css("color", color);
+            $(row).addClass(colorClass);
             $("td:eq(4)", row).html(fieldtext);
             $("td:eq(6)", row).html(buttontext);
 
@@ -282,7 +282,7 @@ $(document).ready(function() {
             {
                 replytext = "-";
             }
-            $("td:eq(5)", row).css("color","black");
+            $("td:eq(5)", row).addClass("text-black");
             $("td:eq(5)", row).html(replytext);
 
             if(data.length > 7 && data[7] > 0)
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index ff121571..78a5cf1e 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -334,26 +334,26 @@ if($auth) {
                         <?php
                         $pistatus = exec('sudo pihole status web');
                         if ($pistatus == "1") {
-                            echo '<a id="status"><i class="fa fa-circle" style="color:#7fff00"></i> Active</a>';
+                            echo '<a id="status"><i class="fa fa-circle text-green-light"></i> Active</a>';
                         } elseif ($pistatus == "0") {
-                            echo '<a id="status"><i class="fa fa-circle" style="color:#ff0000"></i> Offline</a>';
+                            echo '<a id="status"><i class="fa fa-circle text-red"></i> Offline</a>';
                         } elseif ($pistatus == "-1") {
-                            echo '<a id="status"><i class="fa fa-circle" style="color:#ff0000"></i> DNS service not running</a>';
+                            echo '<a id="status"><i class="fa fa-circle text-red"></i> DNS service not running</a>';
                         } else {
-                            echo '<a id="status"><i class="fa fa-circle" style="color:#ff9900"></i> Unknown</a>';
+                            echo '<a id="status"><i class="fa fa-circle text-orange"></i> Unknown</a>';
                         }
 
                         // CPU Temp
                         if($FTL)
                         {
                             if ($celsius >= -273.15) {
-                                echo "<a id=\"temperature\"><i class=\"fa fa-fire\" style=\"color:";
+                                echo "<a id=\"temperature\"><i class=\"fa fa-fire ";
                                 if ($celsius > $temperaturelimit) {
-                                    echo "#ff0000";
+                                    echo "text-red";
                                 }
                                 else
                                 {
-                                    echo "#3366ff";
+                                    echo "text-vivid-blue";
                                 }
                                 echo "\"></i> Temp:&nbsp;";
                                 if($temperatureunit === "F")
@@ -373,30 +373,30 @@ if($auth) {
                         }
                         else
                         {
-                            echo '<a id=\"temperature\"><i class="fa fa-circle" style="color:#ff0000"></i> FTL offline</a>';
+                            echo '<a id=\"temperature\"><i class="fa fa-circle text-red"></i> FTL offline</a>';
                         }
                     ?>
                     <br/>
                     <?php
-                    echo "<a title=\"Detected $nproc cores\"><i class=\"fa fa-circle\" style=\"color:";
+                    echo "<a title=\"Detected $nproc cores\"><i class=\"fa fa-circle ";
                         if ($loaddata[0] > $nproc) {
-                            echo "#ff0000";
+                            echo "text-red";
                         }
                         else
                         {
-                            echo "#7fff00";
+                            echo "text-green-light";
                         }
                         echo "\"></i> Load:&nbsp;&nbsp;" . $loaddata[0] . "&nbsp;&nbsp;" . $loaddata[1] . "&nbsp;&nbsp;". $loaddata[2] . "</a>";
                     ?>
                     <br/>
                     <?php
-                    echo "<a><i class=\"fa fa-circle\" style=\"color:";
+                    echo "<a><i class=\"fa fa-circle ";
                         if ($memory_usage > 0.75 || $memory_usage < 0.0) {
-                            echo "#ff0000";
+                            echo "text-red";
                         }
                         else
                         {
-                            echo "#7fff00";
+                            echo "text-green-light";
                         }
                         if($memory_usage > 0.0)
                         {
diff --git a/scripts/pi-hole/php/loginpage.php b/scripts/pi-hole/php/loginpage.php
index c8f6bdc6..1b67510b 100644
--- a/scripts/pi-hole/php/loginpage.php
+++ b/scripts/pi-hole/php/loginpage.php
@@ -13,7 +13,7 @@
 
         <div class="panel-title text-center"><span class="logo-lg" style="font-size: 25px;">Pi-<b>hole</b></span></div>
       <p class="login-box-msg">Sign in to start your session</p>
-      <div id="cookieInfo" class="panel-title text-center" style="color:#f00; font-size: 150%" hidden>Verify that cookies are allowed for <code><?php echo $_SERVER['HTTP_HOST']; ?></code></div>
+      <div id="cookieInfo" class="panel-title text-center text-red" style="font-size: 150%" hidden>Verify that cookies are allowed for <code><?php echo $_SERVER['HTTP_HOST']; ?></code></div>
       <?php if ($wrongpassword) { ?>
         <div class="form-group has-error login-box-msg">
           <label class="control-label"><i class="fa fa-times-circle"></i> Wrong password!</label>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 19dbbb87..125c7e82 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -19,7 +19,7 @@
 	transition-duration: 500ms;
 }
 .small-box span.glow {
-	text-shadow: 0px 0px 5px #fff;
+	text-shadow: 0 0 5px #fff;
 }
 .skin-blue .list-group-item:hover {
 	background: #ddd;
@@ -30,7 +30,7 @@
 }
 
 .skin-blue .not-used:hover {
-	background: #c5c5c95;
+	background: #c5c5c5;
 }
 
 .skin-blue .used {
@@ -100,13 +100,14 @@
     }
 }
 
-.main-header>.navbar, .navbar>.sidebar-toggle {
+.main-header > .navbar,
+.navbar > .sidebar-toggle {
   height: 50px;
 }
 
 #resetButton {
-	color: red;
-	font-weight: bold;
+	color: #f00;
+	font-weight: 700;
 }
 
 .vertical-alignment-helper {
@@ -133,7 +134,7 @@
     width: 0.8em;
     height: 0.8em;
     border-radius: 50%;
-    border: 4px solid silver;
+    border: 4px solid #c0c0c0;
     border-right-color: transparent;
     -webkit-animation: fa-spin 1s infinite linear;
     animation: fa-spin 1s infinite linear;
@@ -143,13 +144,14 @@
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+    user-select: none
 }
 
 #chartjs-tooltip {
     opacity: 1;
     position: absolute;
     background: rgba(0, 0, 0, .7);
-    color: white;
+    color: #fff;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
@@ -166,8 +168,8 @@
 }
 
 .chart-legend {
-    height:250px;
-    overflow:auto;
+    height: 250px;
+    overflow: auto;
 }
 
 .chart-legend ul {
@@ -175,7 +177,7 @@
 }
 
 .chart-legend li {
-    cursor:pointer;
+    cursor: pointer;
 }
 
 .chart-legend li span {
@@ -198,3 +200,32 @@
     font-weight: 900;
     font-family: "Font Awesome 5 Free";
 }
+
+/* Utilities */
+.text-nowrap {
+    white-space: nowrap !important;
+}
+
+.text-black {
+    color: #000 !important;
+}
+
+.text-green-light {
+    color: #7fff00 !important;
+}
+
+.text-green {
+    color: #080 !important;
+}
+
+.text-orange {
+    color: #ffa500 !important;
+}
+
+.text-red {
+    color: #f00 !important;
+}
+
+.text-vivid-blue {
+    color: #36f !important;
+}