many style improvements

7 files changed, 72 insertions, 25 deletions

diff --git a/web/share/css/main.css b/web/share/css/main.css
index ce6fdb15..92959f25 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -90,12 +90,10 @@ img.inline-lamp {
 
 button,
 select {
-	box-shadow: none;
-	border: var(--border-key-thin);
+	border: none;
 	border-radius: 4px;
 	color: var(--cs-control-default-fg);
 	background-color: var(--cs-control-default-bg);
-	box-shadow: var(--shadow-micro);
 	display: block;
 	width: 100%;
 	height: 30px;
@@ -107,6 +105,11 @@ select {
 	padding-left: 5px;
 	padding-right: 25px;
 }
+button.key,
+select.key {
+	border: var(--border-key-thin);
+	box-shadow: var(--shadow-micro);
+}
 @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
 	/* If we have a mouse cursor */
 	button:enabled:hover,
@@ -118,6 +121,9 @@ select {
 	select:active {
 		color: var(--cs-control-pressed-fg) !important;
 		background-color: var(--cs-control-pressed-bg) !important;
+	}
+	button.key:active,
+	select.key:active {
 		box-shadow: none;
 	}
 	select:enabled:hover {
@@ -154,7 +160,6 @@ select:disabled {
 }
 select:active {
 	color: var(--cs-control-intensive-fg) !important;
-	background-color: var(--cs-bg-control-intensive) !important;
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
 select option {
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index b6e19db0..aa5043e0 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -149,8 +149,6 @@ ul#navbar li div.menu table.kv td.value {
 
 ul#navbar li div.menu div.buttons button,
 ul#navbar li div.menu div.buttons select {
-	box-shadow: none;
-	border: none;
 	border-radius: 0;
 	text-align: left;
 	padding: 0 16px;
diff --git a/web/share/css/radio.css b/web/share/css/radio.css
index c81adfcf..70336497 100644
--- a/web/share/css/radio.css
+++ b/web/share/css/radio.css
@@ -30,7 +30,8 @@ div.radio-box input[type=radio] {
 }
 
 div.radio-box label {
-	display: inline-block;
+	display: flex;
+	align-items: center;
 	text-align: center;
 	vertical-align: middle;
 	user-select: none;
@@ -38,6 +39,11 @@ div.radio-box label {
 	cursor: pointer;
 	position: relative;
 }
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	div.radio-box label {
+		height: 30px !important;
+	}
+}
 div.radio-box label:first-of-type {
 	border-top-left-radius: 4px;
 	border-bottom-left-radius: 4px;
@@ -49,8 +55,10 @@ div.radio-box label:last-of-type {
 
 @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
 	/* If we have a mouse cursor */
-	div.radio-box input[type=radio]:not(:disabled) + label:hover {
+	div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
+		border: var(--border-hovered-2px);
 		color: var(--cs-control-hovered-fg) !important;
+		background-color: var(--cs-control-hovered-bg) !important;
 	}
 }
 
diff --git a/web/share/css/slider.css b/web/share/css/slider.css
index c62b6fda..e9928118 100644
--- a/web/share/css/slider.css
+++ b/web/share/css/slider.css
@@ -61,6 +61,13 @@ input[type=range].slider::-webkit-slider-runnable-track {
 input[type=range].slider:disabled::-webkit-slider-runnable-track {
 	cursor: default;
 }
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
+	/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
+	input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
+		background-color: var(--cs-control-hovered-bg);
+	}
+}
 
 input[type=range].slider::-webkit-slider-thumb {
 	border: var(--border-intensive-2px);
@@ -85,6 +92,13 @@ input[type=range].slider::-moz-range-track {
 input[type=range].slider:disabled::-moz-range-track {
 	cursor: default;
 }
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
+	/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
+	input[type=range].slider:not(:disabled):hover::-moz-range-track {
+		background-color: var(--cs-control-hovered-bg);
+	}
+}
 
 input[type=range].slider::-moz-range-thumb {
 	border: var(--border-intensive-2px);
diff --git a/web/share/css/switch.css b/web/share/css/switch.css
index 425d7578..48889bea 100644
--- a/web/share/css/switch.css
+++ b/web/share/css/switch.css
@@ -29,11 +29,11 @@ div.switch-box {
 	-moz-user-select: none;
 }
 
-div.switch-box input[type=checkbox].switch-checkbox {
+div.switch-box input[type=checkbox] {
 	display: none;
 }
 
-div.switch-box label.switch-label {
+div.switch-box label {
 	display: block;
 	overflow: hidden;
 	cursor: pointer;
@@ -41,14 +41,14 @@ div.switch-box label.switch-label {
 	border-radius: 15px;
 }
 
-div.switch-box label.switch-label span.switch-inner {
+div.switch-box label span.switch-inner {
 	display: block;
 	width: 200%;
 	margin-left: -100%;
 }
 
-div.switch-box label.switch-label span.switch-inner:before,
-div.switch-box label.switch-label span.switch-inner:after {
+div.switch-box label span.switch-inner:before,
+div.switch-box label span.switch-inner:after {
 	display: block;
 	float: left;
 	width: 50%;
@@ -61,15 +61,14 @@ div.switch-box label.switch-label span.switch-inner:after {
 	box-sizing: border-box;
 }
 
-div.switch-box label.switch-label span.switch-inner:before {
+div.switch-box label span.switch-inner:before {
 	content: "ON";
 	padding-left: 5px;
 	background-color: var(--cs-control-default-bg);
 	color: var(--cs-control-default-fg);
 	text-align: left;
 }
-
-div.switch-box label.switch-label span.switch-inner:after {
+div.switch-box label span.switch-inner:after {
 	content: "OFF";
 	padding-right: 5px;
 	background-color: var(--cs-control-default-bg);
@@ -77,7 +76,17 @@ div.switch-box label.switch-label span.switch-inner:after {
 	text-align: right;
 }
 
-div.switch-box label.switch-label span.switch {
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
+	div.switch-box label span.switch-inner:not(:disabled):hover::before {
+		background-color: var(--cs-control-hovered-bg);
+	}
+	div.switch-box label span.switch-inner:not(:disabled):hover::after {
+		background-color: var(--cs-control-hovered-bg);
+	}
+}
+
+div.switch-box label span.switch {
 	display: block;
 	width: 15px;
 	margin: 0px;
@@ -89,15 +98,15 @@ div.switch-box label.switch-label span.switch {
 	border-radius: 15px;
 }
 
-div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch-inner {
+div.switch-box input[type=checkbox]:checked + label span.switch-inner {
 	margin-left: 0;
 }
 
-div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch {
+div.switch-box input[type=checkbox]:checked + label span.switch {
 	right: 0px;
 }
 
-div.switch-box input[type=checkbox].switch-checkbox:disabled + label.switch-label span.switch {
+div.switch-box input[type=checkbox]:disabled + label span.switch {
 	background: var(--cs-thumb-disabled-bg);
 	border: var(--border-default-2px);
 }
diff --git a/web/share/css/tabs.css b/web/share/css/tabs.css
index 9dfd66db..b622494d 100644
--- a/web/share/css/tabs.css
+++ b/web/share/css/tabs.css
@@ -39,7 +39,8 @@ div.tabs-box div.tab {
 
 div.tabs-box label {
 	order: 1;
-	display: block;
+	display: flex;
+	align-items: center;
 	text-align: center;
 	vertical-align: middle;
 	user-select: none;
@@ -50,15 +51,26 @@ div.tabs-box label {
 	position: relative;
 	top: 1px;
 }
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	div.tabs-box label {
+		height: 30px !important;
+	}
+}
 
 div.tabs-box label:last-of-type {
 	border-right: var(--border-default-thin);
 }
 
-div.tabs-box input[type="radio"]:checked+label {
+div.tabs-box input[type="radio"]:checked + label {
 	background-color: var(--cs-control-default-bg);
 }
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
+	div.tabs-box input[type="radio"]:not(:checked):hover + label {
+		color: var(--cs-control-hovered-fg);
+	}
+}
 
-div.tabs-box input[type="radio"]:checked+label+.tab {
+div.tabs-box input[type="radio"]:checked + label + .tab {
 	display: block;
 }
diff --git a/web/share/css/vars.css b/web/share/css/vars.css
index 46ccf0a7..20d9ed10 100644
--- a/web/share/css/vars.css
+++ b/web/share/css/vars.css
@@ -28,7 +28,7 @@
 	--cs-control-default-bg: #36393f;
 	--cs-control-default-fg: #c3c3c3;
 	--cs-control-intensive-fg: white;
-	--cs-control-hovered-bg: #202225;
+	--cs-control-hovered-bg: #2a2d31;
 	--cs-control-hovered-fg: white;
 	--cs-control-pressed-bg: #17191d;
 	--cs-control-pressed-fg: #6c7481;
@@ -60,7 +60,7 @@
 
 	--cs-key-default-bg: #3b3e43;
 	--cs-key-default-fg: #c3c3c3;
-	--cs-key-hovered-bg: #202225;
+	--cs-key-hovered-bg: #2a2d31;
 	--cs-key-hovered-fg: white;
 	--cs-key-pressed-bg: #17191d;
 	--cs-key-pressed-fg: #6c7481;
@@ -73,6 +73,7 @@
 
 	--border-default-thin: thin solid #36393f;
 	--border-default-2px: 2px solid #36393f;
+	--border-hovered-2px: 2px solid #2a2d31;
 	--border-navbar-item-thin: thin solid black;
 	--border-control-thin: thin solid #17191d;
 	--border-window-thin: thin solid #17191d;