From 521ecd75d5645aac7a51ee01d5052e6bba6bcfbe Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 6 Apr 2022 20:28:15 -0300
Subject: [PATCH] Fix visual bugs

- fix top circle position;
- fix circle background colors for each theme;
- special CSS for LCARS theme;
- change CSS selector for top navbar `<li>`: after removing the first
  item, the "old" second item became the first one.
- use a better color for all themes;
- hide submenu counter during animation;
- hide the other counter when submenu is opened (mobile too)

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/utils.js |  4 +---
 style/pi-hole.css           | 29 ++++++++++++++++++++---------
 style/themes/lcars.css      | 21 +++++++++++++++++++--
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
index d19b40702..f6d2434a9 100644
--- a/scripts/pi-hole/js/utils.js
+++ b/scripts/pi-hole/js/utils.js
@@ -372,12 +372,10 @@ function checkMessages() {
           ? "There are " + data.message_count + " warnings." + more
           : "There is one warning." + more;
 
-      $("#top-warning-count").prop("title", title);
-      $("#top-warning-count").removeClass("hidden");
+      $(".warning-count").prop("title", title);
       $(".warning-count").text(data.message_count);
       $(".warning-count").removeClass("hidden");
     } else {
-      $("#top-warning-count").addClass("hidden");
       $(".warning-count").addClass("hidden");
     }
   });
diff --git a/style/pi-hole.css b/style/pi-hole.css
index c39290c44..b24e71640 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -548,8 +548,7 @@ td.details-control {
   }
 
   /* hide warning icon only when logged in and menu is not collapsed */
-  .logged-in:not(.sidebar-collapse) #top-warning-count,
-  .menu-open > a > span.warning-count {
+  .logged-in:not(.sidebar-collapse) #top-warning-count {
     display: none;
   }
 }
@@ -559,8 +558,8 @@ td.details-control {
   position: absolute;
   display: inline-block;
   text-align: center;
-  background: rgba(127, 127, 127, 0.3);
-  color: #e08e0b;
+  background: #e08e0b;
+  color: #fff;
   line-height: 1;
   padding: 0.25em 0.5em;
   margin: -0.7em 4px;
@@ -568,11 +567,10 @@ td.details-control {
   right: 3em;
   top: 50%;
   font-size: 12px;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 
 #top-warning-count {
-  top: 50%;
+  top: 55%;
   left: 50%;
   right: unset;
   margin: 0;
@@ -583,8 +581,21 @@ td.details-control {
   font-size: 10px;
 }
 
+.menu-open > a > span.warning-count {
+  display: none;
+}
+
+/* hide submenu warning count during animation */
+li:not(.menu-open) .treeview-menu .warning-count {
+  display: none;
+}
+
 /* hide warning count when hover a collapsed sidebar */
-.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span.warning-count {
+.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+  .sidebar-menu
+  > li:hover
+  > a
+  > span.warning-count {
   display: none !important;
 }
 
@@ -731,8 +742,8 @@ td.details-control {
   background: #f60d1a;
 }
 
-.navbar-custom-menu > .navbar-nav > li:nth-child(2) {
-  padding: 0 5px;
+.navbar-custom-menu > .navbar-nav > li:nth-child(1) {
+  padding: 0 10px 0 0;
 }
 
 #apiTokenIframe {
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index 139e6699e..2515c6cd8 100644
--- a/style/themes/lcars.css
+++ b/style/themes/lcars.css
@@ -559,8 +559,25 @@ p.login-box-msg,
   font-size: 28px;
 }
 
-.icon-bounce {
-  animation: none;
+.warning-count {
+  position: relative;
+  margin: 0;
+  padding: 0.2em 0.52em 0.3em;
+  right: 0;
+  top: 0;
+  background: #fa3;
+  color: #000;
+}
+
+.sidebar-menu li > a > .pull-right-container.warning-count {
+  transform: scale(1);
+  position: relative;
+  bottom: 0.15em;
+}
+
+#top-warning-count {
+  position: absolute;
+  top: 60%;
 }
 
 .dropdown.user.user-menu {