From 369170105a6dc990eb9a2c7f15e719acd974cebc Mon Sep 17 00:00:00 2001 From: Iksas Date: Fri, 24 Dec 2021 03:32:24 +0100 Subject: [PATCH 1/3] improve efficiency of the lookatme animation Signed-off-by: Iksas --- scripts/pi-hole/js/settings.js | 10 ++++++-- scripts/pi-hole/php/footer.php | 6 ++--- settings.php | 6 ++--- style/pi-hole.css | 45 +++++++++++++++++++++++----------- 4 files changed, 45 insertions(+), 22 deletions(-) diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js index 3663822f8..c348e5f43 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 0d2d2485d..d279a5670 100644 --- a/scripts/pi-hole/php/footer.php +++ b/scripts/pi-hole/php/footer.php @@ -82,17 +82,17 @@
  • Pi-hole " rel="noopener" target="_blank"> - · " rel="noopener" target="_blank">Update available! + · " rel="noopener" target="_blank">Update available!
  • FTL " rel="noopener" target="_blank"> - · " rel="noopener" target="_blank">Update available! + · " rel="noopener" target="_blank">Update available!
  • Web Interface " rel="noopener" target="_blank"> - · " rel="noopener" target="_blank">Update available! + · " rel="noopener" target="_blank">Update available!
    • diff --git a/settings.php b/settings.php index ec75d9e84..642b6958e 100644 --- a/settings.php +++ b/settings.php @@ -287,7 +287,7 @@ function get_FTL_data($arg) - DNS cache evictions: + DNS cache evictions:   @@ -457,7 +457,7 @@ function get_FTL_data($arg)
    checked>

    -

    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!

    @@ -1263,7 +1263,7 @@ function convertseconds($argument)

    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 25ce570f3..6ddb5e69a 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 { From 8fa0d8d01800f19ece64250e829b27e51640fc49 Mon Sep 17 00:00:00 2001 From: Iksas Date: Sat, 22 Jan 2022 15:23:57 +0100 Subject: [PATCH 2/3] improve efficiency of the warningPulse animation Signed-off-by: Iksas --- style/themes/lcars.css | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/style/themes/lcars.css b/style/themes/lcars.css index 6267f1b48..20e5a25d0 100644 --- a/style/themes/lcars.css +++ b/style/themes/lcars.css @@ -1460,30 +1460,46 @@ table.dataTable { @-webkit-keyframes warningPulse { 0% { - border-color: rgba(255, 153, 0, 0.4); + opacity: 0; } 50% { - border-color: rgba(255, 150, 0, 1); + opacity: 1; } 100% { - border-color: rgba(255, 153, 0, 0.4); + opacity: 0; } } @keyframes warningPulse { 0% { - border-color: rgba(255, 153, 0, 0.4); + opacity: 0; } 50% { - border-color: rgba(255, 150, 0, 1); + opacity: 1; } 100% { - border-color: rgba(255, 153, 0, 0.4); + opacity: 0; } } -.box-warning { - animation: 3s infinite warningPulse; +.box.box-warning { + border-top-color: #71480a; + position: relative; +} + +.box.box-warning:after { + content: ""; + border-top: 3px solid #f89201; + border-radius: 12px; + position: absolute; + margin-top: -3px; + inset: 0 0 0 0; + z-index: -1; + animation: 3s infinite warningPulse steps(30); +} + +.box.box-warning div { + z-index: 2; } /*** MEDIA QUERIES ***/ From 867fb48902f99d10dda76c861b22e0506cdbfc6b Mon Sep 17 00:00:00 2001 From: Iksas Date: Sat, 22 Jan 2022 19:07:45 +0100 Subject: [PATCH 3/3] improve efficiency of the LCARS login screen error message Signed-off-by: Iksas --- style/pi-hole.css | 16 +++++++++---- style/themes/lcars.css | 51 +++++++++++++++++++++++++++++------------- 2 files changed, 47 insertions(+), 20 deletions(-) diff --git a/style/pi-hole.css b/style/pi-hole.css index 6ddb5e69a..caf7c247a 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -45,6 +45,18 @@ } } +p#dhcpnotice[hidden] { + display: none; +} + +.lookatme #dhcpnotice { + display: block; +} + +td.lookatme { + display: table-cell; +} + .lookatme { color: #630030; opacity: 1; @@ -52,10 +64,6 @@ 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 { diff --git a/style/themes/lcars.css b/style/themes/lcars.css index 20e5a25d0..b9cd419e6 100644 --- a/style/themes/lcars.css +++ b/style/themes/lcars.css @@ -312,6 +312,13 @@ label { font-weight: bold !important; } +div .panel-title, +p.login-box-msg, +.form-group.has-error label { + position: relative; + z-index: 1; +} + .form-control::placeholder { color: #456; } @@ -329,24 +336,34 @@ label { .form-group.has-error.login-box-msg::before { content: "ACCESS DENIED"; - display: block; margin: -20px -20px 20px; padding: calc(45px + 0.7em) 0 0; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 130px; - color: #d43; + inset: 0 0 0 0; + color: #630030; font-size: 3.825em; font-size: calc((100vw - var(--sidebar-width) - 60px) / 12); line-height: 1; - animation: 3s infinite Pulse; background: rgba(0, 0, 0, 0.88); - z-index: 0; } -.layout-boxed .form-group.has-error.login-box-msg::before { +.form-group.has-error.login-box-msg::after { + content: "ACCESS DENIED"; + margin: -20px -20px 20px; + padding: calc(45px + 0.7em) 0 0; + position: absolute; + inset: 0 0 0 0; + color: #e33100; + font-size: 3.825em; + font-size: calc((100vw - var(--sidebar-width) - 60px) / 12); + line-height: 1; + text-shadow: 0 0 5px #e33100; + animation: 3s infinite Pulse steps(30); + z-index: 1; +} + +.layout-boxed .form-group.has-error.login-box-msg::before, +.layout-boxed .form-group.has-error.login-box-msg::after { padding: calc(50% - 0.5em) 0 0; } @@ -1506,7 +1523,8 @@ table.dataTable { /*--- Media - max-width ---*/ @media (max-width: 991px) { - .form-group.has-error.login-box-msg::before { + .form-group.has-error.login-box-msg::before, + .form-group.has-error.login-box-msg::after { font-size: calc((100vw - var(--sidebar-width) - 60px) / 9); } } @@ -1597,7 +1615,8 @@ table.dataTable { .main-footer { margin-left: 0; } - .form-group.has-error.login-box-msg::before { + .form-group.has-error.login-box-msg::before, + .form-group.has-error.login-box-msg::after { font-size: calc((100vw - 60px) / 6); } } @@ -1668,18 +1687,18 @@ table.dataTable { } @media (min-width: 1320px) { - .layout-boxed .form-group.has-error.login-box-msg::before { + .layout-boxed .form-group.has-error.login-box-msg::before, + .layout-boxed .form-group.has-error.login-box-msg::after { font-size: calc((1320px - var(--sidebar-width) - 60px) / 12); } } -@media (min-width: 1920px) { - .layout-boxed .form-group.has-error.login-box-msg::before { +@media (min-width: 1960px) { + .layout-boxed .form-group.has-error.login-box-msg::before, + .layout-boxed .form-group.has-error.login-box-msg::after { font-size: calc((1920px - var(--sidebar-width) - 60px) / 12); } -} -@media (min-width: 1960px) { .layout-boxed .wrapper { box-shadow: none; max-width: 1920px;