A few CSS tweaks.

Add utilities classes and fix a few CSS issues.

Signed-off-by: XhmikosR <xhmikosr@gmail.com>

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> ");
                 }
             }
         }

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;

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;

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();

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)