From 00acbff2de959582b91eaab4a024e638e042d134 Mon Sep 17 00:00:00 2001
From: DL6ER <DL6ER@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:58:32 +0100
Subject: [PATCH] Add bounce animation to Pi-hole diagnosis warning triangle
 (#1990)

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 0a30e843..db6519ae 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -263,7 +263,7 @@ if($auth) {
                 <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 9a9dd29e..b797c723 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;
+}