Inactive widgets

3 files changed, 100 insertions, 5 deletions

diff --git a/styles/main.css b/styles/main.css
index 56e1c50..6f56806 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -28,7 +28,7 @@ user {
     position: fixed;
     right: 30px;
     top: 10px;
-    z-index: 2;
+    z-index: 91;
 }
 
 user img {
@@ -46,7 +46,7 @@ nav {
     width:calc(100% - 20px);
     height:50px;
     background-color: gray;
-    z-index: 1;
+    z-index: 90;
     border-radius: 10px;
     box-sizing: border-box;
 }
diff --git a/styles/themes/base.css b/styles/themes/base.css
index 24ff4b9..cd59b56 100644
--- a/styles/themes/base.css
+++ b/styles/themes/base.css
@@ -7,6 +7,7 @@
     --w-bg-hover: #eee;
     --w-bg-active: #eee;
     --w-shadow: #aaa;
+    --w-shadow-inactive: #888;
 
     /* Toggle Widget colors */
     --w-tg-inactive-color: #222;
diff --git a/styles/widgets.css b/styles/widgets.css
index 20e4529..9217615 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -30,6 +30,37 @@
     background-color: var(--w-bg-active);
 }
 
+.widget.inactive {
+    box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive);
+}
+
+.widget.inactive::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.2);
+    transition-duration: 0.15s;
+    top: 0;
+    left: 0;
+
+    z-index: 1;
+}
+
+.widget.inactive:hover::before {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.widget.inactive:hover {
+    background-color: var(--w-bg);
+}
+
+.widget.inactive:active {
+    background-color: var(--w-bg);
+}
+
 /**
     Button widget that a lot of other widgets build from
 */
@@ -48,6 +79,12 @@
     border:none;
 }
 
+.button.inactive:active {
+    transform: none;
+    box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
+    border: inherit;
+}
+
 /**
     Toggle widget for things like power buttons
 */
@@ -144,7 +181,7 @@
 
     border-radius: 10px;
 
-    z-index: 1;
+    z-index: 2;
 
     font-weight: bold;
     min-width: var(--base-unit);
@@ -163,6 +200,10 @@
     color: rgba(255, 255, 255, 1);
 }
 
+.slider.inactive > .detail {
+    display: none;
+}
+
 /**
     Checkbox widget
 */
@@ -175,6 +216,8 @@
     border: 7px solid var(--w-cb-inactive-outline);
     box-shadow: 5px 5px inset var(--w-shadow), 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow);
     padding: 0;
+
+    overflow: unset;
 }
 
 .checkbox:hover {
@@ -185,6 +228,26 @@
     border: 7px solid var(--w-cb-inactive-outline-active);
 }
 
+.checkbox.inactive {
+    box-shadow: 5px 5px inset var(--w-shadow-inactive), 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive);
+}
+
+.checkbox.inactive::before {
+    width: calc(100% + 14px);
+    height: calc(100% + 14px);
+    top: -7px;
+    left: -7px;
+}
+
+.checkbox.inactive:hover {
+    border-color: var(--w-cb-inactive-outline);
+}
+
+.checkbox.inactive:active {
+    border: 7px solid var(--w-cb-inactive-outline);
+    box-shadow: 5px 5px inset var(--w-shadow-inactive), 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
+}
+
 .checkbox::after
 {
     height: 24px;
@@ -218,11 +281,28 @@
     border: none;
     box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow);
 }
+
 .checkbox.active::after
 {
     border-width: 0px 5px 5px 0px;
 }
 
+.checkbox.active.inactive {
+    box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive);
+}
+
+.checkbox.active.inactive:active {
+    border: none;
+    box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
+}
+
+.checkbox.active.inactive::before {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
 /**
     Color widget
 */
@@ -254,6 +334,14 @@
     border-color: #888;
 }
 
+.color-wheel.inactive::before {
+    border-radius: 50%;
+}
+
+.color-wheel.inactive::after {
+    border-color: rgb(68, 68, 68, 0);
+}
+
 .color-temp {
     width: var(--base-unit);
     height: calc(3 * var(--base-unit));
@@ -281,6 +369,10 @@
     border-color: #888;
 }
 
+.color-temp.inactive::after {
+    border-color: rgb(68, 68, 68, 0);
+}
+
 .color-light {
     height: var(--base-unit);
     width: calc(3 * var(--base-unit));
@@ -308,6 +400,10 @@
     border-color: #888;
 }
 
+.color-light.inactive::after {
+    border-color: rgb(68, 68, 68, 0);
+}
+
 /**
     Thermostat
 */
@@ -318,8 +414,6 @@
 
     width: calc(6 * var(--base-unit));
     height: calc(3 * var(--base-unit));
-
-    overflow: unset;
 }
 
 .thermostat > .arch {