improves design and adds status bar to cover

MMM-HomeAssistant-Touch.css

@@ -1,6 +1,7 @@
 #MMM-HomeAssistant-Touch {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 #MMM-HomeAssistant-Touch .ha-entity {
@@ -8,6 +9,9 @@
   border-radius: 0.5rem;
   padding: 0.5rem;
   margin: 0.5rem;
+  height: 7rem;
+  width: 7rem;
+  font-size: 18px;
 }
 
 #MMM-HomeAssistant-Touch .ha-entity .title,
@@ -20,6 +24,26 @@
   background-color: #2af20261;
 }
 
+#MMM-HomeAssistant-Touch .ha-entity.ha-cover {
+    padding: 0;
+    padding-left: .5rem;
+    height: 8rem;
+    display: flex;
+}
+#MMM-HomeAssistant-Touch .ha-entity.ha-cover .title{
+    flex-grow: 1;
+}
+#MMM-HomeAssistant-Touch .ha-entity.ha-cover .status {
+    width: .5rem;
+    background-color: #2af20261;
+    border-bottom-right-radius: 0.4rem;
+    align-self: flex-end;
+    z-index: -1;
+}
+#MMM-HomeAssistant-Touch .ha-entity.ha-cover .status.full {
+    border-top-right-radius: 0.4rem;
+}
+
 .ha-slider {
   width: 3rem;
   height: 200px;

UIClasses/Cover.js

@@ -11,4 +11,20 @@ class Cover extends Slider {
       position: this.sliderState,
     });
   }
+
+  render() {
+      super.render()
+      const container = document.getElementById(this.id)
+      if(container) {
+        const status = document.createElement('div')
+        status.classList.add('status')
+        status.style.height = `${this.state}%`
+
+        if(this.state === 100) {
+            status.classList.add('full')
+        }
+
+        container.appendChild(status)
+    }
+  }
 }