From 1ac7e1b50a211c3fd60e7d2952af93f6e40f5cfb Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 4 Oct 2021 17:22:38 -0300
Subject: [PATCH] Dashboard icons - send to back and fixing position when
 scaled up (#1915)

* Dashboard icons - send to back and fixing position when scaled up

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index fc02a660..729ba5d9 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -329,6 +329,17 @@
 .box,
 .small-box {
   border-radius: 10px;
+  z-index: 0; /* fix the small-box z-index (related to '.small-box .icon') */
+}
+
+.small-box .icon {
+  z-index: -1; /* sends the icon behind the text */
+}
+
+/*** Icons grow on hover, but remain centered ***/
+.small-box:hover .icon {
+  font-size: 90px; /* keep the same font-size, to avoid shifting the position */
+  transform: scale(106%);
 }
 
 .list-status-0 {