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

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;
-    height: 20px;
+    background-color: var(--background);
+    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,