Merge pull request #1067 from XhmikosR/devel

Tweaks and CSS cleanup

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>

index.php

@@ -129,10 +129,10 @@
           <h3 class="box-title">Query Types</h3>
         </div>
         <div class="box-body">
-          <div class="float-left" style="width:50%">
+          <div class="pull-left" style="width:50%">
             <canvas id="queryTypePieChart" width="120" height="120"></canvas>
           </div>
-          <div class="float-left" style="width:50%">
+          <div class="pull-left" style="width:50%">
             <div id="query-types-legend" class="chart-legend"></div>
           </div>
         </div>
@@ -148,10 +148,10 @@
           <h3 class="box-title">Queries answered by</h3>
         </div>
         <div class="box-body">
-          <div class="float-left" style="width:50%">
+          <div class="pull-left" style="width:50%">
             <canvas id="forwardDestinationPieChart" width="120" height="120" class="extratooltipcanvas"></canvas>
           </div>
-          <div class="float-left" style="width:50%">
+          <div class="pull-left" style="width:50%">
             <div id="forward-destinations-legend" class="chart-legend" class="extratooltipcanvas"></div>
           </div>
         </div>

network.php

@@ -52,12 +52,12 @@ $token = $_SESSION['token'];
             </table>
             <label>Background color: Last query from this device seen ...</label>
         <table width="100%">
-          <tr style="text-align: 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>
-            <td style="background: #FFEDD9;" width="20%">&gt; 24 hours ago</td>
-            <td style="background: #FFBFAA;" width="20%">Device does not use Pi-hole</td>
+          <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>
+            <td style="background: #ffedd9;" width="20%">&gt; 24 hours ago</td>
+            <td style="background: #ffbfaa;" width="20%">Device does not use Pi-hole</td>
           </tr>
         </table>
         </div>

scripts/pi-hole/js/auditlog.js

@@ -14,7 +14,7 @@ function escapeHtml(text) {
     "<": "&lt;",
     ">": "&gt;",
     "\"": "&quot;",
-    "\'": "&#039;"
+    "'": "&#039;"
   };
 
   return text.replace(/[&<>"']/g, function(m) { return map[m]; });
@@ -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_graph.js

@@ -52,7 +52,7 @@ function escapeHtml(text) {
     "<": "&lt;",
     ">": "&gt;",
     "\"": "&quot;",
-    "\'": "&#039;"
+    "'": "&#039;"
   };
 
   return text.replace(/[&<>"']/g, function(m) { return map[m]; });

scripts/pi-hole/js/db_lists.js

@@ -51,7 +51,7 @@ function escapeHtml(text) {
     "<": "&lt;",
     ">": "&gt;",
     "\"": "&quot;",
-    "\'": "&#039;"
+    "'": "&#039;"
   };
 
   return text.replace(/[&<>"']/g, function(m) { return map[m]; });

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/header.js

@@ -1,9 +0,0 @@
-/* Pi-hole: A black hole for Internet advertisements
-*  (c) 2017 Pi-hole, LLC (https://pi-hole.net)
-*  Network-wide ad blocking via your own hardware.
-*
-*  This file is copyright under the latest version of the EUPL.
-*  Please see LICENSE file for your rights under this license. */
-// Remove JS warning
-var jswarn = document.getElementById("js-warn-exit");
-jswarn.parentNode.removeChild(jswarn);

scripts/pi-hole/js/index.js

@@ -444,7 +444,7 @@ function escapeHtml(text) {
     "<": "&lt;",
     ">": "&gt;",
     "\"": "&quot;",
-    "\'": "&#039;"
+    "'": "&#039;"
   };
 
   return text.replace(/[&<>"']/g, function(m) { return map[m]; });
@@ -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/network.js

@@ -86,14 +86,14 @@ $(document).ready(function() {
                  {
                      // Last query was longer than 24 hours ago
                      // Color: light-orange
-                     color = "#FFEDD9";
+                     color = "#ffedd9";
                      mark = "<strong>?</strong>";
                  }
              }
              else
              {
                  // This client has never sent a query to Pi-hole, color light-red
-                 color = "#FFBFAA";
+                 color = "#ffbfaa";
                  mark = "&#x2718;";
              }
              // Set determined background color

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)

scripts/pi-hole/js/settings.js

@@ -215,7 +215,7 @@ $(document).ready(function(){
 
 // Handle list deletion
 $("button[id^='adlist-btn-']").on("click", function (e) {
-	var id = parseInt($(this).context.id.replace(/[^0-9\.]/g, ""), 10);
+	var id = parseInt($(this).context.id.replace(/[^0-9.]/g, ""), 10);
 	e.preventDefault();
 
 	var status = $("input[name=\"adlist-del-"+id+"\"]").is(":checked");

scripts/pi-hole/php/footer.php

@@ -22,10 +22,10 @@
                         <input id="customTimeout" class="form-control" type="number" value="60">
                             <div class="input-group-btn" data-toggle="buttons">
                                 <label class="btn btn-default">
-                                    <input type="radio"/> Secs
+                                    <input type="radio"> Secs
                                 </label>
                                 <label id="btnMins" class="btn btn-default active">
-                                    <input type="radio"  /> Mins
+                                    <input type="radio"> Mins
                                 </label>
                             </div>
                     </div>

scripts/pi-hole/php/header.php

@@ -172,69 +172,72 @@
     }
 
 ?>
-<!DOCTYPE html>
+<!doctype html>
 <!-- Pi-hole: A black hole for Internet advertisements
 *  (c) 2017 Pi-hole, LLC (https://pi-hole.net)
 *  Network-wide ad blocking via your own hardware.
 *
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. -->
-<html>
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://api.github.com; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'">
     <title>Pi-hole Admin Console</title>
     <!-- Usually browsers proactively perform domain name resolution on links that the user may choose to follow. We disable DNS prefetching here -->
     <meta http-equiv="x-dns-prefetch-control" content="off">
     <meta http-equiv="cache-control" content="max-age=60,private">
     <!-- Tell the browser to be responsive to screen width -->
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
-    <meta name="theme-color" content="#367fa9">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
     <link rel="apple-touch-icon" sizes="180x180" href="img/favicon.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="img/logo.svg">
-    <link rel="icon" type="image/png" sizes="96x96" href="img/logo.svg">
+    <link rel="icon" href="img/logo.svg" type="image/png" sizes="192x192">
+    <link rel="icon" href="img/logo.svg" type="image/png" sizes="160x160">
+    <link rel="icon" href="img/logo.svg" type="image/png" sizes="96x96">
+    <meta name="theme-color" content="#367fa9">
     <meta name="msapplication-TileColor" content="#367fa9">
     <meta name="msapplication-TileImage" content="img/logo.svg">
     <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <link href="style/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-  
-    <link href="style/vendor/font-awesome-5.11.2/css/all.min.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap.min.css">
 
-    <link href="style/vendor/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <link href="style/vendor/daterangepicker.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="style/vendor/font-awesome-5.11.2/css/all.min.css">
 
-    <link href="style/vendor/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <link href="style/vendor/skin-blue.min.css" rel="stylesheet" type="text/css" />
-    <link href="style/pi-hole.css" rel="stylesheet" type="text/css" />
-    <link rel="icon" type="image/png" sizes="160x160" href="img/logo.svg" />
+    <link rel="stylesheet" href="style/vendor/dataTables.bootstrap.min.css">
+    <link rel="stylesheet" href="style/vendor/daterangepicker.css">
 
+    <link rel="stylesheet" href="style/vendor/AdminLTE.min.css">
+    <link rel="stylesheet" href="style/vendor/skin-blue.min.css">
+
+    <link rel="stylesheet" href="style/pi-hole.css">
+    <noscript><link rel="stylesheet" href="style/vendor/js-warn.css"></noscript>
+
+    <script src="scripts/vendor/jquery.min.js"></script>
+    <script src="scripts/vendor/jquery-ui.min.js"></script>
+    <script src="style/vendor/bootstrap/js/bootstrap.min.js"></script>
+    <script src="scripts/vendor/app.min.js"></script>
+
+    <script src="scripts/vendor/jquery.dataTables.min.js"></script>
+    <script src="scripts/vendor/dataTables.bootstrap.min.js"></script>
+    <script src="scripts/vendor/Chart.bundle.min.js"></script>
 </head>
 <body class="skin-blue sidebar-mini <?php if($boxedlayout){ ?>layout-boxed<?php } ?>">
+ <noscript>
 <!-- JS Warning -->
 <div>
-    <link rel="stylesheet" type="text/css" href="style/vendor/js-warn.css">
-    <input type="checkbox" id="js-hide" />
-    <div class="js-warn" id="js-warn-exit"><h1>JavaScript Is Disabled</h1><p>JavaScript seems to be disabled. This will break some site features.</p>
-        <p>To enable JavaScript click <a href="https://www.enable-javascript.com/" rel="noopener" target="_blank">here</a></p><label for="js-hide">Close</label></div>
+    <input type="checkbox" id="js-hide">
+    <div class="js-warn" id="js-warn-exit"><h1>JavaScript Is Disabled</h1><p>JavaScript is required for the site to function.</p>
+        <p>To learn how to enable JavaScript click <a href="https://www.enable-javascript.com/" rel="noopener" target="_blank">here</a></p><label for="js-hide">Close</label>
+    </div>
 </div>
 <!-- /JS Warning -->
+ </noscript>
 <?php
 if($auth) {
-    echo "<div id='token' hidden>$token</div>";
+    echo "<div id=\"token\" hidden>$token</div>";
 }
 ?>
-<script src="scripts/pi-hole/js/header.js"></script>
-
-<script src="scripts/vendor/jquery.min.js"></script>
-<script src="scripts/vendor/jquery-ui.min.js"></script>
-<script src="style/vendor/bootstrap/js/bootstrap.min.js"></script>
-<script src="scripts/vendor/app.min.js"></script>
-
-<script src="scripts/vendor/jquery.dataTables.min.js"></script>
-<script src="scripts/vendor/dataTables.bootstrap.min.js"></script>
-<script src="scripts/vendor/Chart.bundle.min.js"></script>
 
 <!-- Send token to JS -->
 <div id="token" hidden><?php if($auth) echo $token; ?></div>
@@ -249,23 +252,23 @@ if($auth) {
             <span class="logo-lg">Pi-<b>hole</b></span>
         </a>
         <!-- Header Navbar: style can be found in header.less -->
-        <nav class="navbar navbar-static-top" role="navigation">
+        <nav class="navbar navbar-static-top">
             <!-- Sidebar toggle button-->
             <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                 <span class="sr-only">Toggle navigation</span>
             </a>
             <div class="navbar-custom-menu">
                 <ul class="nav navbar-nav">
-                    <li><a style="pointer-events:none;"><samp><?php echo gethostname(); ?></samp></a></li>
+                    <li><a style="pointer-events:none;">hostname: <code><?php echo gethostname(); ?></code></a></li>
                     <li class="dropdown user user-menu">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
-                            <img src="img/logo.svg" class="user-image" style="border-radius: initial" sizes="160x160" alt="Pi-hole logo" />
+                            <img src="img/logo.svg" class="user-image" style="border-radius: 0" alt="Pi-hole logo" width="25" height="25">
                             <span class="hidden-xs">Pi-hole</span>
                         </a>
                         <ul class="dropdown-menu" style="right:0">
                             <!-- User image -->
                             <li class="user-header">
-                                <img src="img/logo.svg" sizes="160x160" alt="User Image" style="border-color:transparent" />
+                                <img src="img/logo.svg" alt="User Image" style="border-color:transparent" width="90" height="90">
                                 <p>
                                     Open Source Ad Blocker
                                     <small>Designed For Raspberry Pi</small>
@@ -324,33 +327,33 @@ if($auth) {
             <!-- Sidebar user panel -->
             <div class="user-panel">
                 <div class="pull-left image">
-                    <img src="img/logo.svg" class="img-responsive" alt="Pi-hole logo" style="display: table; table-layout: fixed; height: 67px;" />
+                    <img src="img/logo.svg" class="img-responsive" alt="Pi-hole logo" style="display: table; table-layout: fixed; height: 67px;">
                 </div>
                 <div class="pull-left info">
                     <p>Status</p>
                         <?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")
@@ -370,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)
                         {

scripts/pi-hole/php/loginpage.php

@@ -9,11 +9,14 @@
 <div class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" style="float:none">
   <div class="panel panel-default">
     <div class="panel-heading">
-      <div style="text-align: center;"><img src="img/logo.svg" width="<?php if ($boxedlayout) { ?>50%<?php } else { ?>30%<?php } ?>"></div><br>
+      <div class="text-center">
+        <img src="img/logo.svg" alt="" style="width: <?php if ($boxedlayout) { ?>50%<?php } else { ?>30%<?php } ?>;">
+      </div>
+      <br>
 
-        <div class="panel-title text-center"><span class="logo-lg" style="font-size: 25px;">Pi-<b>hole</b></span></div>
+      <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 <samp><?php echo $_SERVER['HTTP_HOST']; ?></samp></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>
@@ -30,15 +33,15 @@
         <div class="row">
           <div class="col-xs-8 hidden-xs hidden-sm">
           <ul>
-            <li><samp>Return</samp> &rarr; Log in and go to requested page (<?php echo $scriptname; ?>)</li>
-            <li><samp>Ctrl+Return</samp> &rarr; Log in and go to Settings page</li>
+            <li><kbd>Return</kbd> &rarr; Log in and go to requested page (<?php echo $scriptname; ?>)</li>
+            <li><kbd>Ctrl</kbd>+<kbd>Return</kbd> &rarr; Log in and go to Settings page</li>
           </ul>
           </div>
           <div class="col-xs-12 col-md-4">
             <div class="form-group pull-left">
               <div class="checkbox pull-right"><label><input type="checkbox" id="logincookie" name="persistentlogin">Remember me for 7 days</label></div>
             </div>
-            <button type="submit" href="#" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-log-in"></i>&nbsp;&nbsp;&nbsp;Log in</button>
+            <button type="submit" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-log-in"></i>&nbsp;&nbsp;&nbsp;Log in</button>
           </div>
         </div>
         <br>

settings.php

@@ -26,7 +26,7 @@ if($last_error["type"] === E_WARNING || $last_error["type"] === E_ERROR)
 }
 
 ?>
-<style type="text/css">
+<style>
 	.tooltip-inner {
 		max-width: none;
 		white-space: nowrap;

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 {
@@ -189,10 +191,6 @@
     text-decoration: line-through !important;
 }
 
-.float-left{
-    float:left;
-}
-
 .fa-paypal-icon {
     width: 18px;
     margin-left: 2px;
@@ -202,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;
+}