active and hover interaction + colours system buttons and selector options, recommit

djster_webcontrol.js

@@ -304,7 +304,7 @@ function bang() {
             }*/
         });
 
-    addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none");
+    addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;margin-left:125px;", "none");
 
     elements.push(
         {
@@ -333,7 +333,7 @@ function bang() {
             }*/
         });
 
-    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 + "';");
+    addButton("systemDIV", "cancelbutton", "Cancel", "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 + "';");
     addButton("systemDIV", "proceedbutton", "Shut Down", "background-color:" + alert + ";margin-left:15vw;", "drawsocket.send({system: {shutdown : true}})");
 
     elements.push(

ui-style.css

@@ -1,5 +1,5 @@
 :root {
-    --background: white;
+    --background: ivory;
     --active: royalblue;
     --nonactive: lightsteelblue;
     --alert: red;
@@ -20,6 +20,7 @@ p,
 label,
 input[type=text] {
     font-size: 13px;
+    background-color: var(--background);
 }
 
 /*navigation*/
@@ -45,13 +46,18 @@ input[type=text] {
 
 .menu {
     background-color: var(--background);
-    border: 1px solid + var(--active);
+    border: 1px solid var(--active);
     color: var(--active);
-    padding: 5px 5px;
     text-align: left;
     display: inline-block;
     font-size: 12px;
     margin: 4px 2px;
+    height: 20px;
+}
+
+.menu option {
+    background-color: var(--background);
+    color: var(--active);
 }
 
 .but {
@@ -68,6 +74,11 @@ input[type=text] {
     border-radius: 25px;
 }
 
+.but:hover, .but:active {
+    background-color: var(--nonactive);
+    color: var(--active) !important;
+}
+
 .toggle {
     background-color: var(--background);
     border: 1px solid + var(--active);
@@ -93,7 +104,7 @@ input[type=text] {
     overflow: hidden;
 }
 
-.slider:hover {
+.slider:hover, .slider:active {
     opacity: 1;
 }
 
@@ -117,24 +128,7 @@ input[type=text] {
 .slider::-moz-range-progress {
     background-color: var(--active);
 }
-/*
 
-input[type='range']::-webkit-slider-runnable-track {
-    height: 10px;
-    -webkit-appearance: none;
-    color: #13bba4;
-    margin-top: -1px;
-}
-
-input[type='range']::-webkit-slider-thumb {
-    width: 10px;
-    -webkit-appearance: none;
-    height: 10px;
-    cursor: ew-resize;
-    background: #434343;
-    box-shadow: -80px 0 0 80px #43e5f7;
-}
-*/
 label {
     position: absolute;
     color: var(--textcolor);
@@ -142,14 +136,65 @@ label {
 
 input[type=text] {
     position: absolute;
-    color: var(--textcolor);
+    color: var(--active);
+    border: 1px solid var(--active);
+}
+
+input[type=text]:hover:not([disabled]),
+input[type=checkbox]:hover,
+.menu:hover,
+.menu:active,
+.option:hover,
+.option:active {
+    background-color: var(--nonactive);
+    color: var(--active) !important;
 }
 
 input[type=checkbox] {
     position: absolute;
     border: none;
-    width: 20px;
+    background-color: var(--background);
-    height: 20px;
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+    width: 20px !important;
+    height: 20px !important;
+    appearance: none;
+    border-radius: 10%;
+    box-shadow: none;
+    font-size: 1em;
+    border: 1px solid var(--active);
+}
+
+input[type='checkbox']:checked {
+    background-color: var(--active);
+}
+
+input[type='checkbox']:checked:after {
+    content: '\2713';
+    color: var(--background);
+}
+
+#oph_-1 {
+    width: 174px !important;
+}
+
+/*System page*/
+
+#proceedbutton {
+    background-color: var(--background)!important;
+    color: red!important;
+    border: 1px solid red;
+}
+
+#proceedbutton:hover,
+#proceedbutton:active {
+    background-color: red !important;
+    color: white !important;
+}
+
+#versionbutton, #cancelbutton {
+    background-color: var(--background) !important;
 }
 
 #updateheader,