Allow for dynamic window colour with inline CSS variables

build.js

@@ -12,7 +12,6 @@ const plugins = [
   require("autoprefixer"),
   require("postcss-import"),
   require("postcss-nested"),
-  require("postcss-css-variables"),
   require("postcss-calc"),
   require("postcss-base64")({
     root: process.cwd() + "/gui",

docs/components/window/frame.ejs

@@ -37,20 +37,12 @@
     `) %>
 
     <p>
-      If you want to override the default color of the window, you can specify the
-      <code>background-color</code> attribute in the <code>before</code> pseudo element
-      and the <code>title-bar</code> under the same parent class as <code>window</code>.
+      If you want to override the default color of the window, you can redefine the 
+      <code>--window-background-color</code> variable as an inline value of the <code>style</code> attribute.
     </p>
 
     <%- example(`
-      <style>
-        .violet::before,
-        .violet > .title-bar {
-          background-color: #805ba5;
-        }
-      </style>
-
-      <div class="window violet active" style="max-width: 100%; margin: 0 1.5em;">
+      <div class="window active" style="max-width: 100%; margin: 0 1.5em; --window-background-color: #805ba5;">
         <div class="title-bar">
           <div class="title-bar-text">A violet window frame</div>
           <div class="title-bar-controls">
@@ -64,7 +56,7 @@
       </div>
 
       <div class="background">
-        <div class="window violet glass active" style="max-width: 100%">
+        <div class="window glass active" style="max-width: 100%; --window-background-color: #805ba5;">
           <div class="title-bar">
             <div class="title-bar-text">A glass violet window frame</div>
             <div class="title-bar-controls">

gui/_balloon.scss

@@ -20,7 +20,7 @@
     background: var(--balloon-tail-top);
     width: var(--balloon-tail-size);
     height: var(--balloon-tail-size);
-    top: -var(--balloon-tail-size);
+    top: calc(var(--balloon-tail-size) * -1);
     left: var(--balloon-tail-offset);
   }
 
@@ -31,7 +31,7 @@
   &.is-top {
     &::before {
       background: var(--balloon-tail-bottom);
-      bottom: -var(--balloon-tail-size);
+      bottom: calc(var(--balloon-tail-size) * -1);
       top: unset;
       transform: scale(-1);
     }

gui/_radiobutton.scss

@@ -4,9 +4,10 @@
   --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
   --radio-total-width: calc(var(--radio-total-width-precalc));
   --radio-dot-width: 8px;
-  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
+  --radio-dot-offset: calc(var(--radio-width) / 2);
+  --radio-dot-top: calc(var(--radio-dot-offset) - var(--radio-dot-width) / 2);
   --radio-dot-left: calc(
-    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
+    -1 * (var(--radio-total-width)) + var(--radio-width) / 2 - var(
         --radio-dot-width
       ) / 2
   );
@@ -33,7 +34,7 @@ input[type="radio"] {
       content: "";
       position: absolute;
       top: 0;
-      left: calc(-1 * (var(--radio-total-width-precalc)));
+      left: calc(var(--radio-total-width) * -1);
       display: inline-block;
       width: var(--radio-width);
       height: var(--radio-width);

gui/_slider.scss

@@ -43,7 +43,14 @@ input[type="range"] {
     }
   }
 
-  &::-webkit-slider-runnable-track,
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    background: var(--surface);
+    box-sizing: border-box;
+    box-shadow: inset 1px 1px 1px #999, inset -1px 0 #999, 0 1px #fff;
+  }
+
   &::-moz-range-track {
     width: 100%;
     height: 3px;

gui/_treeview.scss

@@ -34,7 +34,7 @@ ul.tree-view {
     > summary::before {
       content: "\002b";
       top: calc(50% - var(--treeview-square-size) / 2);
-      left: calc(-var(--treeview-square-size) * 2);
+      left: calc(var(--treeview-square-size) * 2 * -1);
       right: unset;
       width: var(--treeview-square-size);
       height: var(--treeview-square-size);

gui/_window.scss

@@ -132,7 +132,8 @@
     height: 100%;
     border-radius: var(--window-border-radius);
     background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%),
-      var(--window-background);
+    var(--window-background);
+    background-color: var(--window-background-color);
     box-shadow: inset 0 0 0 1px #fffd;
   }
 
@@ -148,7 +149,7 @@
     }
 
     pre {
-      margin: -var(--window-spacing);
+      margin: calc(var(--window-spacing) * -1);
     }
   }
 
@@ -248,15 +249,18 @@
   border: var(--window-border) var(--window-border-color);
   border-radius: var(--window-border-radius) var(--window-border-radius) 0 0;
   padding: var(--window-spacing);
+  padding-top: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--window-background);
+  background-color: var(--window-background-color);
 
   &-text {
     color: #000;
     letter-spacing: 0;
     line-height: 15px;
+    padding-top: var(--window-spacing);
     text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff,
       0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
   }
@@ -267,7 +271,6 @@
     border: var(--window-border) var(--control-border-color);
     border-top: 0;
     border-radius: 0 0 var(--control-border-radius) var(--control-border-radius);
-    margin-top: -var(--window-spacing);
     box-shadow: 0 1px 0 #fffa, 1px 0 0 #fffa, -1px 0 0 #fffa;
 
     button {
@@ -501,7 +504,7 @@
 
 .status-bar {
   margin: var(--window-spacing);
-  margin-top: -var(--window-spacing);
+  margin-top: calc(var(--window-spacing) * -1);
   background: var(--surface);
   border: var(--window-border) var(--window-border-color);
   border-top: 0;

package.json

@@ -44,7 +44,6 @@
     "postcss": "^8.3.5",
     "postcss-base64": "^0.7.1",
     "postcss-calc": "^7.0.2",
-    "postcss-css-variables": "^0.14.0",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "postcss-prefix-selector": "^1.15.0"