add log features adaptation, add minor corrections

src/webui/www/private/css/lib/vanillaSelectBox.css

@@ -1,8 +1,9 @@
+@import url("../palette.css");
+
 .hidden-search {
 	display: none !important;
 }
 
-
 li[data-parent].closed{
 	display:none !important;
 }
@@ -17,13 +18,10 @@ li[data-parent].open:not(.hidden-search){
 	display:block;
 	visibility: hidden;
 	position:absolute;/*Don't change*/
-  border:1px solid #B2B2B2;
-  background-color: #fff;
 	background-clip: padding-box;
-  border: 1px solid rgba(0,0,0,.15);
-  box-shadow: 0 6px 12px rgba(0,0,0,.175);
-  border-radius:4px;
 	font-size : 11px;
+	background-color: var(--color-background-default);
+	border: 1px solid var(--color-border-default);
 }
 
 .vsb-js-search-zone{
@@ -31,12 +29,9 @@ li[data-parent].open:not(.hidden-search){
     z-index:1001;
 	width: 80%;
 	min-height:1.8em;
-	padding: 2px;
+	padding: 2px;}
-	background-color: #fff;
-}
 
 .vsb-js-search-zone input{
-	border: 1px solid grey;
 	margin-left: 2px;
 	width: 96%;
 	border-radius: 4px;
@@ -46,24 +41,16 @@ li[data-parent].open:not(.hidden-search){
 .vsb-main{
 	position: relative;/*Don't change*/
 	display: inline-block;
-	vertical-align: middle;
+	vertical-align: top;
 	text-align:left;
 }
 
-.vsb-menu li:hover {
-	background: linear-gradient(#f5f5f5, #e8e8e8);
-}
-
 .vsb-menu ul{
 	user-select:none;
 	list-style:none;
 	white-space: nowrap;
-	margin:0px;
+	margin:0;
-	margin-top:4px;
+	padding:0;
-	padding-left:10px;
-	padding-right:10px;
-	padding-bottom:3px;
-	color: #333;
 	cursor:pointer;
 	overflow-y:auto;
 }
@@ -87,15 +74,11 @@ li.short{
 
 .vsb-main button{
 	min-width: 120px;
-	border-radius: 0;
+	border: 1px solid var(--color-border-default);
+	border-radius: 4px;
 	width: 100%;
 	text-align: left;
 	z-index: 1;
-	color: #333;
-	background: white !important;
-	border: 1px solid #999 !important;
-	line-height:20px;
-	font-size:14px;
 	padding:6px 12px;
 }
 
@@ -109,24 +92,22 @@ li.short{
 	user-select:none;
 }
 
-.vsb-main li:hover {
-	background: linear-gradient(#f5f5f5, #e8e8e8);
-}
-
 .vsb-main ul{
 	white-space: nowrap;
 }
 
 .vsb-menu li {
-	font-size: 14px;
+	font-size: 12px;
-	background-color: #fff;
+	padding: 4px 26px;
-	min-height:1.4em;
+}
-	padding: 0.2em 2em 0.2em 1em;
+
+.vsb-menu li:hover {
+	background-color: var(--color-background-blue);
+	color: var(--color-text-white);
 }
 
 .vsb-menu li.grouped-option b {
 	display: inline-block;
-	font-size: 15px;
 	margin-left:10px;
 	transform: translate(-18px);
 }
@@ -138,8 +119,6 @@ li.short{
 	height: 8px;
 	width:  8px;
 	transform: translate(-38px) rotate(45deg);
-	border-bottom:  3px solid black;
-	border-right:  3px solid black;
 	border-radius:2px;
 }
 
@@ -149,8 +128,6 @@ li.short{
 	height: 8px;
 	width:  8px;
 	transform: translate(-38px) rotate(-45deg);
-	border-bottom:  3px solid black;
-	border-right:  3px solid black;
 	border-radius:2px;
 }
 
@@ -167,22 +144,18 @@ li.short{
 	border-radius : 3px;
 	padding: 1px 3px 2px 3px;
 	margin-top:0px;
-	color:black;
 }
 
 .vsb-menu li.grouped-option.checked i::after {
 	content: "";
 	display: inline-block;
 	font-size: inherit;
-	color: #333;
 	float:left;
 	margin-left:0px;
 	display: inline-block;
 	transform: rotate(45deg);
 	height: 8px;
 	width:  5px;
-	border-bottom: 3px solid black;
-	border-right:  3px solid black;
 }
 
 .vsb-menu :not(.multi) li.active {
@@ -197,20 +170,12 @@ li.short{
 	transform: rotate(45deg);
 	height: 10px;
 	width:  5px;
-	border-bottom:  3px solid black;
-	border-right:  3px solid black;
 	border-radius:2px;
-}
+	border-bottom: 3px solid var(--color-border-blue);
-
+	border-right:  3px solid var(--color-border-blue);
-.vsb-menu .multi li {
-	font-size: 14px;
-	background-color: #fff;
-	min-height:1.4em;
-	padding: 0.2em 2em 0.2em 26px;
 }
 
 .vsb-menu .multi li.grouped-option {
-	font-size: 15px;
 	padding-left: 5px;
 }
 
@@ -222,6 +187,7 @@ li.short{
 }
 
 .vsb-menu .multi li:not(.grouped-option)::before{
+	background: var(--color-background-popup);
 	content: "";
 	display: inline-block;
 	font-size: inherit;
@@ -233,14 +199,12 @@ li.short{
 	border-radius : 3px;
 	padding : 7px;
 	margin-top:0px;
-	color:black;
 }
 
 .vsb-menu .multi li:not(.grouped-option).active::after {
 	content: "";
 	display: inline-block;
 	font-size: inherit;
-	color: #333;
 	float:left;
 	margin-left:-18px;
 	display: inline-block;
@@ -248,8 +212,8 @@ li.short{
 	margin-top:1px;
 	height: 8px;
 	width:  5px;
-	border-bottom: 3px solid black;
+	border-bottom: 3px solid var(--color-border-blue);
-	border-right:  3px solid black;
+	border-right:  3px solid var(--color-border-blue);
 }
 
 .caret {
@@ -268,4 +232,3 @@ li.short{
 li[data-parent]{
 	padding-left: 50px !important;
 }
-

src/webui/www/private/css/palette.css

@@ -12,6 +12,7 @@
     --color-background-blue: hsl(210deg 42% 48%);
     --color-background-popup: hsl(0deg 0% 100%);
     --color-background-default: hsl(0deg 0% 94%);
+    --color-border-blue: hsl(210deg 100% 55%);
     --color-border-default: hsl(0deg 0% 85%);
 }
 
@@ -33,9 +34,10 @@
     }
 
     * {
+        --color-text-blue: hsl(210.3, 88.1%, 73.5%);
         --color-text-default: hsl(0deg 0% 90%);
         --color-background-popup: hsl(0deg 0% 20%);
-        --color-background-default: hsl(0deg 0% 30%);
+        --color-background-default: hsl(0deg 0% 25%);
         --color-border-default: hsl(0deg 0% 33%);
     }
 }

src/webui/www/private/css/style.css

@@ -8,6 +8,19 @@ a img,
     border: none;
 }
 
+/* Forms */
+
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="button"],
+button,
+select {
+    border-radius: 3px;
+    border: 1px solid var(--color-border-default);
+    padding: 4px;
+}
+
 /*table { border-collapse: collapse; border-spacing: 0; }*/
 
 :focus {

src/webui/www/private/scripts/lib/vanillaSelectBox.js

@@ -208,16 +208,9 @@ function vanillaSelectBox(domSelector, options) {
         if (selector === ".vsb-main button") {
             cssArray = [
                 { "key": "min-width", "value": "120px" },
-                { "key": "border-radius", "value": "0" },
                 { "key": "width", "value": "100%" },
                 { "key": "text-align", "value": "left" },
-                { "key": "z-index", "value": "1" },
+                { "key": "z-index", "value": "1" }
-                { "key": "color", "value": "#333" },
-                { "key": "background", "value": "white !important" },
-                { "key": "border", "value": "1px solid #999 !important" },
-                { "key": "line-height", "value": "20px" },
-                { "key": "font-size", "value": "14px" },
-                { "key": "padding", "value": "6px 12px" }
             ]
         }
 
@@ -299,7 +292,7 @@ function vanillaSelectBox(domSelector, options) {
         if(this.keepInlineCaretStyles) {
             caret.style.position = "absolute";
             caret.style.right = "8px";
-            caret.style.marginTop = "8px";
+            caret.style.marginTop = "6px";
         }
 
         if (self.userOptions.stayOpen) {

src/webui/www/private/views/log.html

@@ -9,13 +9,12 @@
 
     #logFilterBar>label {
         font-weight: bold;
-        margin-right: 10px;
+        margin-right: .3em;
     }
 
     #logFilterBar>button {
         display: inline-block;
-        height: 24px;
+        padding: 4px 15px;
-        padding: 0 .5em;
         margin-left: .3em;
         font-weight: bold;
     }
@@ -40,9 +39,11 @@
         background-repeat: no-repeat;
         background-position: left;
         background-size: 1.5em;
-        padding: 1px 5px 1px 2em;
+        padding: 4px 5px 4px 2em;
-        margin-left: 20px;
+        margin-left: .3em;
         width: 200px;
+        border: 1px solid var(--color-border-default);
+        border-radius: 3px;
     }
 
     #logFilterSummary {
@@ -56,24 +57,24 @@
     }
 
     .logNormal {
-        color: #80766e;
+        color: var(--color-text-default);
     }
 
     .logInfo {
-        color: #1781b5;
+        color: var(--color-text-blue);
     }
 
     .logWarning {
-        color: #f97d1c;
+        color: var(--color-text-orange);
     }
 
     .logCritical,
     .peerBlocked {
-        color: #ee3f4d;
+        color: var(--color-text-red);
     }
 
     .vsb-main>button {
-        padding: 0 12px !important;
+        padding: 4px 12px !important;
     }
 
     .contextMenu>li>a>img {

src/webui/www/private/views/search.html

@@ -7,7 +7,7 @@
         background-position: left;
         border: 1px solid var(--color-border-default);
         border-radius: 3px;
-        padding: 2px 2px 2px 25px;
+        padding: 4px 2px 4px 25px;
     }
 
     #categorySelect {

src/webui/www/public/css/login.css

@@ -8,6 +8,18 @@ body {
     text-align: left;
 }
 
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="button"],
+input[type="submit"],
+button,
+select {
+    border-radius: 3px;
+    border: 1px solid var(--color-border-default);
+    padding: 4px;
+}
+
 .col {
     display: inline-block;
     vertical-align: middle;

src/webui/www/public/css/palette.css

@@ -3,6 +3,7 @@
 /* Default rules */
 * {
     --color-text-red: hsl(0deg 100% 65%);
+    --color-border-default: hsl(0deg 0% 85%);
 }
 
 :root {