Improved unit button

1 files changed, 35 insertions, 0 deletions

diff --git a/styles/widgets.css b/styles/widgets.css
index 9483a81..870d2aa 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -558,6 +558,41 @@
     text-align: center;
 }
 
+.thermostat > .unit {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    --width: 1;
+    --height: 1;
+    border-radius: 50%;
+    margin: 5px;
+    background-color: white;
+    box-shadow: none;
+    overflow: visible;
+}
+
+.thermostat > .unit::after {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow: none;
+    transition-duration: 0.15s;
+}
+
+.thermostat > .unit:active::after, .thermostat > .unit.touch::after {
+    transform: translate(-5px, -5px);
+    box-shadow: inset 5px 5px var(--w-shadow) !important;
+}
+
+.thermostat > .unit:active, .thermostat > .unit.touch {
+    box-shadow: inset -5px -5px var(--w-bg-hover) !important;
+}
+
 /*
     Button Select
 */