Add bounce animation to Pi-hole diagnosis warning triangle

Signed-off-by: DL6ER <[email protected]>
pi-hole · Nov 29, 2021 · 7dc10b0 · 7dc10b0
1 parent e091b1f
commit 7dc10b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
@@ -263,7 +263,7 @@ function pidofFTL()
                 <ul class="nav navbar-nav">
                     <li id="pihole-diagnosis" class="hidden">
                         <a href="messages.php">
-                            <i class="fa fa-exclamation-triangle"></i>
+                            <i class="fa fa-exclamation-triangle fa-2x icon-bounce"></i>
                             <span class="label label-warning" id="pihole-diagnosis-count"></span>
                         </a>
                     </li>

diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -411,3 +411,28 @@ td.details-control {
 .form-control-feedback {
   right: 12px;
 }
+
+.icon-bounce {
+  display: inline-block;
+  position: relative;
+  animation: icon-bounce 1.5s infinite linear;
+}
+
+@keyframes icon-bounce {
+  0%, 20%, 50%, 70%, 90%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-15px);
+  }
+  60% {
+    transform: translateY(-8px);
+  }
+  80% {
+    transform: translateY(-4px);
+  }
+}
+
+.navbar-nav {
+  height: 50px;
+}