From ff7769c0ba25e9f654e7608c11afcab58f3b0ff0 Mon Sep 17 00:00:00 2001
From: Sebastien Clement <sebastien.clement@univ-pau.fr>
Date: Tue, 27 Apr 2021 01:17:40 +0200
Subject: [PATCH] :pencil2: Add shadow on button hover

---
 .../static/css/simpleemergencystop.css           | 16 ++++++++++++++++
 .../templates/simpleemergencystop_navbar.jinja2  |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/octoprint_simpleemergencystop/static/css/simpleemergencystop.css b/octoprint_simpleemergencystop/static/css/simpleemergencystop.css
index e8cb5d0..e1766b1 100644
--- a/octoprint_simpleemergencystop/static/css/simpleemergencystop.css
+++ b/octoprint_simpleemergencystop/static/css/simpleemergencystop.css
@@ -2,6 +2,10 @@
     padding: 12px 0px 12px;
 }
 
+.ses_small:hover .fa-circle{
+    text-shadow: grey 1px 0px 3px ;
+}
+
 .ses_small i {
     color: red;
 }
@@ -64,6 +68,10 @@
     display: inline;
 }
 
+.ses_big_middle span{
+    font-size: 11px;
+}
+
 .ses_big i {
     /*font-size: 20px;*/
     /*font-weight: bold;*/
@@ -72,3 +80,11 @@
     text-shadow: none;
     vertical-align: middle;
 }
+
+.ses_big:hover .fa-circle{
+    text-shadow: grey 1px 0px 8px ;
+}
+
+.ses_big:hover h5{
+    text-shadow: grey 1px 0px 8px ;
+}
diff --git a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
index ad43ab5..b9340e8 100644
--- a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
+++ b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
@@ -12,12 +12,12 @@
     <a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
         href="#">
         <div class="ses_big_middle">
-            <span class="fa-stack" style="font-size: 11px">
+            <span class="fa-stack">
                 <i class="far fa-circle fa-stack-2x"></i>
                 <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
             </span>
             <h5>{{ _("Emergency Stop") }}</h5>
-            <span class="fa-stack" style="font-size: 11px">
+            <span class="fa-stack">
                 <i class="far fa-circle fa-stack-2x"></i>
                 <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
             </span>