Initial Gridlock

2 files changed, 41 insertions, 28 deletions

diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js
index 458aabd..829e76f 100644
--- a/scripts/gui-common/widgets.js
+++ b/scripts/gui-common/widgets.js
@@ -23,6 +23,7 @@ class Widget extends EventTarget{
         super();
         this.element = document.createElement("div");
         this.element.classList.add("widget");
+        this.element.classList.add("gridlock");
 
         this.element.addEventListener("mousedown", this.#emitMouseEvent.bind(this));
         this.element.addEventListener("mouseup", this.#emitMouseEvent.bind(this));
diff --git a/styles/widgets.css b/styles/widgets.css
index 1ca4ce2..40ec4fc 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -11,7 +11,7 @@
     box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow);
 
     padding: 5px;
-    margin: 10px 15px 15px 10px;
+    margin: 5px 10px 10px 5px;
     border-radius: 10px;
     box-sizing: border-box;
 
@@ -20,6 +20,7 @@
     overflow: hidden;
 
     --base-unit: 36px;
+    --alt-unit: 15px;
 
     min-width: var(--base-unit);
     min-height: var(--base-unit);
@@ -30,6 +31,11 @@
     user-select: none;
 }
 
+.grid > .widget, .gridlock {
+    width: calc(var(--width) * var(--base-unit) + (var(--width) - 1) * var(--alt-unit));
+    height: calc(var(--height) * var(--base-unit) + (var(--height) - 1) * var(--alt-unit));
+}
+
 .widget:hover {
     background-color: var(--w-bg-hover);
 }
@@ -77,6 +83,9 @@
     align-content: center;
     text-align: center;
 
+    --width: 2;
+    --height: 1;
+
     user-select: none;
     -webkit-user-select: none;
 }
@@ -98,8 +107,8 @@
 */
 
 .toggle {
-    width: calc(3 * var(--base-unit));
-    height: calc(3 * var(--base-unit));
+    --width: 2;
+    --height: 2;
     --w-bg: var(--w-tg-inactive-bg);
     --w-bg-hover: var(--w-tg-inactive-bg-hover);
     --w-bg-active: var(--w-tg-inactive-bg-active);
@@ -119,14 +128,14 @@
 */
 
 .slider {
-    width: var(--base-unit);
-    height: calc(3 * var(--base-unit));
+    --width: 1;
+    --height: 3;
     overflow: unset;
 }
 
 .slider.h {
-    height: var(--base-unit);
-    width: calc(3 * var(--base-unit));
+    --width: 3;
+    --height: 1;
 }
 
 .slider > .fill, .color-light > .fill, .color-temp > .fill {
@@ -247,8 +256,8 @@
     --w-bg-hover: rgba(0, 0, 0, 0);
     --w-bg-active: rgba(0, 0, 0, 0);
 
-    width: var(--base-unit);
-    height: var(--base-unit);
+    --width: 1;
+    --height: 1;
 
     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);
@@ -350,10 +359,11 @@
 */
 
 .color-wheel {
-    background: radial-gradient(white, transparent calc(1.5 * var(--base-unit))), conic-gradient(from 90deg, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
+    --scale: 3;
+    background: radial-gradient(white, transparent calc(var(--scale) * var(--base-unit) / 2)), conic-gradient(from 90deg, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
     border-radius: 50%;
-    width: calc(3 * var(--base-unit));
-    height: calc(3 * var(--base-unit));
+    --width: var(--scale);
+    --height : var(--scale);
     --side-color: #aaa;
     overflow: unset;
 }
@@ -402,30 +412,30 @@
 }
 
 .color-temp {
-    width: var(--base-unit);
-    height: calc(3 * var(--base-unit));
+    --width: 1;
+    --height: 3;
     background: linear-gradient(rgb(190, 200, 255), white 15%, rgb(250, 160, 100));
     --side-color: #aaa;
     overflow: unset;
 }
 
 .color-temp.h {
-    height: var(--base-unit);
-    width: calc(3 * var(--base-unit));
+    --width: 3;
+    --height: 1;
     background: linear-gradient(to left, rgb(190, 200, 255), white 15%, rgb(250, 160, 100));
 }
 
 .color-light {
-    width: var(--base-unit);
-    height: calc(3 * var(--base-unit));
+    --width: 1;
+    --height: 3;
     background: linear-gradient(white, black);
     --side-color: #aaa;
     overflow: unset;
 }
 
 .color-light.h {
-    height: var(--base-unit);
-    width: calc(3 * var(--base-unit));
+    --width: 3;
+    --height: 1;
     background: linear-gradient(to left, white, black);
 }
 
@@ -478,8 +488,8 @@
     align-content: center;
     text-align: center;
 
-    width: calc(6 * var(--base-unit));
-    height: calc(3 * var(--base-unit));
+    --width: 5;
+    --height: 3;
 }
 
 .thermostat > arch {
@@ -598,9 +608,8 @@
 */
 
 .scrubber {
-    width: calc(var(--base-unit) + 5px);
-    height: calc(4 * var(--base-unit) + 5px);
-    margin: 10px;
+    --width: 1;
+    --height: 3;
     box-shadow: inset 5px 5px var(--w-shadow);
     --w-bg-hover: var(--w-bg);
     --w-bg-active: var(--w-bg);
@@ -608,8 +617,8 @@
 }
 
 .scrubber.h {
-    height: calc(var(--base-unit) + 5px);
-    width: calc(6 * var(--base-unit) + 5px);
+    --width: 44;
+    --height: 1;
 }
 
 .scrubber > .fill {
@@ -729,6 +738,9 @@
 */
 
 .radio {
+    --width: 1;
+    --height: 1;
+    
     --w-bg: rgba(0, 0, 0, 0);
     --w-bg-hover: rgba(0, 0, 0, 0);
     --w-bg-active: rgba(0, 0, 0, 0);
@@ -848,4 +860,4 @@
     height: 100%;
     top: 0;
     left: 0;
-}
\ No newline at end of file
+}