diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js index 3663822f..c348e5f4 100644 --- a/scripts/pi-hole/js/settings.js +++ b/scripts/pi-hole/js/settings.js @@ -213,9 +213,15 @@ function loadCacheInfo() { var cachelivefreed = parseInt(data.cacheinfo["cache-live-freed"], 10); $("#cache-live-freed").text(cachelivefreed); if (cachelivefreed > 0) { - $("#cache-live-freed").parent("tr").addClass("lookatme"); + $("#cache-live-freed").parent("tr").children("th").children("span").addClass("lookatme"); + $("#cache-live-freed").parent("tr").children("td").addClass("lookatme"); + $("#cache-live-freed") + .parent("tr") + .children("td") + .attr("lookatme-text", cachelivefreed.toString()); } else { - $("#cache-live-freed").parent("tr").removeClass("lookatme"); + $("#cache-live-freed").parent("tr").children("th").children("span").removeClass("lookatme"); + $("#cache-live-freed").parent("tr").children("td").removeClass("lookatme"); } // Update cache info every 10 seconds diff --git a/scripts/pi-hole/php/footer.php b/scripts/pi-hole/php/footer.php index 0d2d2485..d279a567 100644 --- a/scripts/pi-hole/php/footer.php +++ b/scripts/pi-hole/php/footer.php @@ -82,17 +82,17 @@
hidden>Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!
+hidden>Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!
The privacy level may be increased at any time without having to restart the DNS resolver. However, note that the DNS resolver needs to be restarted when lowering the privacy level. This restarting is automatically done when saving.
0 && $piHoleLogging){ ?> -Warning: Pi-hole's query logging is activated. Although the dashboard will hide the requested details, all queries are still fully logged to the pihole.log file.
+Warning: Pi-hole's query logging is activated. Although the dashboard will hide the requested details, all queries are still fully logged to the pihole.log file.
diff --git a/style/pi-hole.css b/style/pi-hole.css index 25ce570f..6ddb5e69 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -19,41 +19,58 @@ @-webkit-keyframes Pulse { from { - color: #630030; - text-shadow: 0 0 2px transparent; + opacity: 0; } 50% { - color: #e33100; - text-shadow: 0 0 5px #e33100; + opacity: 1; } to { - color: #630030; - text-shadow: 0 0 2px transparent; + opacity: 0; } } @keyframes Pulse { from { - color: #630030; - text-shadow: 0 0 2px transparent; + opacity: 0; } 50% { - color: #e33100; - text-shadow: 0 0 5px #e33100; + opacity: 1; } to { - color: #630030; - text-shadow: 0 0 2px transparent; + opacity: 0; } } .lookatme { - -webkit-animation: 2s infinite Pulse; - animation: 2s infinite Pulse; + color: #630030; + opacity: 1; + position: relative; + display: inline-block; +} + +td.lookatme { + display: table-cell; +} + +/* this pseudo element will be faded in and out in front /* +/* of the lookatme element to create an efficient animation. */ +.lookatme:after { + color: #e33100; + text-shadow: 0 0 5px #e33100; + /* in the html, the lookatme-text attribute must */ + /* contain the same text as the .lookatme element */ + content: attr(lookatme-text); + padding: inherit; + position: absolute; + inset: 0 0 0 0; + z-index: 1; + /* 20 steps / 2 seconds = 10fps */ + -webkit-animation: 2s infinite Pulse steps(20); + animation: 2s infinite Pulse steps(20); } .table-responsive {