duplicate styling to css file, comment out in js

djster_webcontrol.js

@@ -80,6 +80,8 @@ function bang() {
             "val": body
         }]
     };
+
+    /*
     css.push({
         "selector": ".menu",
         "props": {
@@ -157,6 +159,21 @@ function bang() {
             "position": "relative"
         }
     });
+    */
+
+    //add css sheet to html
+    elements.push({
+        "new": "link",
+        "parent": "log",
+        "rel": "stylesheet",
+        "href": "ui-style.css" //href is not working for some reason?
+    });
+
+    //currently, the file is added by having changed the drawsocket-page.html with the following:
+    /*
+    <!-- HSS -->
+    <link rel="stylesheet" href="../../../../../Library/healing-soundscapes/ui-style.css">
+    */
 
     svg.push({
         "new": "rect",
@@ -207,6 +224,7 @@ function bang() {
     //navPlayers nav bar for player selectors
     addDiv("expertDIV", "navPlayers", "display:block");
     //add buttons to navPlayers instead of to expertDIV directly
+    addButton()
     addButton("navPlayers", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
     addButton("navPlayers", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
     addButton("navPlayers", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
@@ -264,12 +282,12 @@ function bang() {
             "new": "h2",
             "parent": "systemDIV",
             "id": "updateheader",
-            "text": "Updates",
+            "text": "Updates"/*,
             "style": {
                 "left": "10px",
                 "font-family": "Arial",
                 "margin-left": "10px"
-            }
+            }*/
         });
 
     elements.push(
@@ -277,13 +295,13 @@ function bang() {
             "new": "p",
             "parent": "systemDIV",
             "id": "update",
-            "text": "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions.",
+            "text": "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions."//,
-            "style": {
+            /*"style": {
                 "left": "10px",
                 "font-family": "Arial",
                 "font-size": 12,
                 "margin-left": "10px"
-            }
+            }*/
         });
 
     addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none");
@@ -293,12 +311,12 @@ function bang() {
             "new": "h2",
             "parent": "systemDIV",
             "id": "shutdownheader",
-            "text": "Shut Down",
+            "text": "Shut Down"/*,
             "style": {
                 "left": "10px",
                 "font-family": "Arial",
                 "margin-left": "10px"
-            }
+            }*/
         });
 
     elements.push(
@@ -306,13 +324,13 @@ function bang() {
             "new": "p",
             "parent": "systemDIV",
             "id": "shutdown",
-            "text": "Shutting the system down, will require you to unplug and replug the speakers before they can be operated again.",
+            "text": "Shutting the system down, will require you to unplug and replug the speakers before they can be operated again."/*,
             "style": {
                 "left": "10px",
                 "font-family": "Arial",
                 "font-size": 12,
                 "margin-left": "10px"
-            }
+            }*/
         });
 
     addButton("systemDIV", "cancelbutton", "Cancel", "background-color:" + nonactive + ";margin-left:20vw;", "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['background-color']='" + active + "';document.getElementById('expert').style['background-color']='" + nonactive + "';document.getElementById('room').style['background-color']='" + nonactive + "';document.getElementById('system').style['background-color']='" + nonactive + "';document.getElementById('manual').style['background-color']='" + nonactive + "';");
@@ -324,9 +342,9 @@ function bang() {
             "parent": "manualDIV",
             "id": "manualdoc",
             "style": {
-                "position": "absolute",
+                /*"position": "absolute",
                 "top": "0px",
-                "left": "0px",
+                "left": "0px",*/
                 "width": "100vw",
                 "height": "100vh"
             },
@@ -389,13 +407,13 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
         "id": id + "-label" + "_" + index,
         "text": name + ":",
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": (offset - 1 + position * 30) + "px",
             "left": "10px",
             "width": "160px",
-            "font-family": "Arial",
+            /*"font-family": "Arial",
             "font-size": 10,
-            "color": textcolor
+            "color": textcolor*/
         }
     },
     {
@@ -408,11 +426,11 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
         "value": value,
         "disabled": true,
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": (offset + position * 30) + "px",
             "left": "320px",
             "width": "30px",
-            "color": textcolor
+            //"color": textcolor
         }
     },
     {
@@ -427,10 +445,10 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
         "value": value,
         "step": step,
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": (offset + 5 + position * 30) + "px",
-            "left": "135px",
+            /*"left": "135px",
-            "width": "170px"
+            "width": "170px"*/
         },
         "oninput": "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]"
     }];
@@ -479,13 +497,13 @@ function addMenu(index, parent, name, id, position, value, array, type) {
         "id": id + "-label" + "_" + index,
         "text": name + ":",
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": position + "px",
             "left": "10px",
             "width": "120px",
-            "font-family": "Arial",
+            /*"font-family": "Arial",
             "font-size": 10,
-            "color": textcolor
+            "color": textcolor*/
         }
     }
         , {
@@ -528,13 +546,13 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
         "id": id + "-label" + "_" + index,
         "text": name + ":",
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": position + "px",
             "left": left + "px",
             "width": "80px",
-            "font-family": "Arial",
+            /*"font-family": "Arial",
             "font-size": 10,
-            "color": textcolor
+            "color": textcolor*/
         }
     },
     {
@@ -546,12 +564,12 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
         "name": id + "_" + index,
         "value": checked,
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": position - 2 + "px",
             "left": left + leftoffset + "px",
-            "border": "none",
+            /*"border": "none",
             "width": "20px",
-            "height": "20px"
+            "height": "20px"*/
         },
         "oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})"
     }];
@@ -568,13 +586,13 @@ function addText(index, parent, name, id, position, type) {
         "id": id + "-label" + "_" + index,
         "text": name + ":",
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": position + "px",
             "left": "10px",
             "width": "120px",
-            "font-family": "Arial",
+            /*"font-family": "Arial",
             "font-size": 10,
-            "color": textcolor
+            "color": textcolor*/
         }
     },
     {
@@ -587,11 +605,11 @@ function addText(index, parent, name, id, position, type) {
         "size": 10,
         "onkeydown": "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}",
         "style": {
-            "position": "absolute",
+            //"position": "absolute",
             "top": position - 1 + "px",
             "left": "139px",
             "width": width - 11 + "px",
-            "color": textcolor
+            //"color": textcolor
         }
     }];
     var obj2 = {
@@ -617,7 +635,6 @@ function createSpatBox() {
         "parent": "main-svg",
         "new": "g",
         "id": "spat",
-        //"display" : "none",
         "display": "none",
         "transform": "matrix(1,0,0,1,0,50)",
         "child": [
@@ -798,12 +815,12 @@ function param() {
                 "name": msg + "_" + (index1 - 1),
                 "value": val,
                 "style": {
-                    "position": "absolute",
+                    //"position": "absolute",
                     "top": checkboxes[index1][msg].pos[1] + "px",
                     "left": checkboxes[index1][msg].pos[0] + "px",
-                    "border": "none",
+                    /*"border": "none",
                     "width": "20px",
-                    "height": "20px"
+                    "height": "20px"*/
                 },
                 "oninput": "drawsocket.send({" + "djster" + ": {player: " + index1 + ", " + msg + ": this.checked}})"
 

ui-style.css

@@ -0,0 +1,128 @@
+:root {
+    --background: ivory;
+    --active: royalblue;
+    --nonactive: lightsteelblue;
+    --alert: red;
+    --textcolor: #737373;
+}
+
+html {
+    background-color: var(--background);
+}
+
+/*navigation*/
+#nav,
+#navPlayers {
+    z-index: 99;
+    display: flex !important;
+    flex-flow: row nowrap;
+    position: relative;
+}
+
+#navPlayers>button {
+    width: 24.9vw;
+    color: var(--nonactive);
+}
+
+#navPlayers>button:active {
+    color: var(--active);
+}
+
+.menu {
+    background-color: var(--background);
+    border: 1px solid + var(--active);
+    color: var(--active);
+    padding: 5px 5px;
+    text-align: left;
+    display: inline-block;
+    font-size: 12px;
+    margin: 4px 2px;
+}
+
+.but {
+    background-color: var(--background);
+    border: 1px solid + var(--active);
+    color: var(--active);
+    padding: 4px 0;
+    text-align: center;
+    display: inline-block;
+    font-size: 11px;
+    margin: 4px 0px;
+    width: 20vw;
+}
+
+.toggle {
+    background-color: var(--background);
+    border: 1px solid + var(--active);
+    color: var(--active);
+    padding: 4px 7.8px;
+    margin: 4px 0px;
+}
+
+.slider {
+    -webkit-appearance: none;
+    height: 6px;
+    border-radius: 6px;
+    background: #737373;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+
+    position: absolute;
+    left: 135px;
+    width: 170px;
+}
+
+.slider:hover {
+    opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: active;
+}
+
+label {
+    position: absolute;
+    font-family: Arial;
+    font-size: 10;
+    color: var(--textcolor);
+}
+
+input[type=text] {
+    position: absolute;
+    color: var(--textcolor);
+}
+
+input[type=checkbox] {
+    position: absolute;
+    border: none;
+    width: 20px;
+    height: 20px;
+}
+
+#updateheader,
+#shutdownheader {
+    left: 10px;
+    font-family: Arial;
+    margin-left: 10px;
+}
+
+#update,
+#shutdown {
+    left: 10px;
+    font-family: Arial;
+    font-size: 12;
+    margin-left: 10px;
+}
+
+iframe #manualdoc {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}