Improved unit button

2 files changed, 38 insertions, 2 deletions

diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js
index 8da265e..b8fe01f 100644
--- a/scripts/gui-common/widgets.js
+++ b/scripts/gui-common/widgets.js
@@ -938,6 +938,7 @@ class WidgetThermostat extends Widget
         this.element.appendChild(this.#gague);
 
         this.#unit = new WidgetButton();
+        this.#unit.element.classList.add("unit");
         this.element.appendChild(this.#unit.element);
         this.#unit.addEventListener("change", this.#unit_handler.bind(this));
 
@@ -978,8 +979,8 @@ class WidgetThermostat extends Widget
         let unit = WidgetThermostat.#UNIT_MAP[this.get("unit")];
         let temp = this.get()[unit[1]]()
         let gague = this.get("gague")[unit[1]]();
-        this.#gague.innerText = `${Math.fround(gague)}`;
-        this.#temp.innerText = `${Math.fround(temp)}`;
+        this.#gague.innerText = `${Math.round(gague * 10)/10}`;
+        this.#temp.innerText = `${Math.round(temp * 10)/10}`;
         this.#unit.element.innerText = `${unit[0]}`;
 
         // Generate a percentage relative to the deviation
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
 */