From b34dd1129098baf134c475e8bb046ed8f492ff23 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sun, 28 Nov 2021 15:44:00 +0100
Subject: [PATCH] Add bounce animation to Pi-hole diagnosis warning triangle

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/header.php |  2 +-
 style/pi-hole.css              | 30 ++++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index 0a30e8436..db6519ae5 100644
--- 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
index 9a9dd29e3..b797c7230 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -411,3 +411,33 @@ 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;
+}