many style improvements

web/kvm/index.html

@@ -147,10 +147,10 @@
             <table class="one-line-switch">
               <td>Auto-resize stream:</td>
               <td align="right">
-                    <div class="switch-box">
+                <div class="switch-box">
-                      <input class="switch-checkbox" checked type="checkbox" id="stream-auto-resize-checkbox">
+                  <input checked type="checkbox" id="stream-auto-resize-checkbox">
-                      <label class="switch-label" for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
+                  <label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
+                </div>
               </td>
             </table>
           </div>

web/kvm/navbar-system.pug

@@ -39,7 +39,11 @@ li(class="right")
 			table(class="one-line-switch")
 				td Auto-resize stream:
 				td(align="right")
-					+switch("stream-auto-resize-checkbox")
+					div(class="switch-box")
+						input(checked type="checkbox" id="stream-auto-resize-checkbox")
+						label(for="stream-auto-resize-checkbox")
+							span(class="switch-inner")
+							span(class="switch")
 		hr
 		div(class="buttons")
 			button(disabled data-force-hide-menu id="stream-reset-button") • Reset stream

web/kvm/navbar.pug

@@ -13,13 +13,6 @@ mixin menu_message(icon, short, classes="")
 						sup(style="line-height:1")
 							block
 
-mixin switch(id)
-	div(class="switch-box")
-		input(checked type="checkbox" id=id class="switch-checkbox")
-		label(class="switch-label" for=id)
-			span(class="switch-inner")
-			span(class="switch")
-
 ul(id="navbar")
 	li(class="left")
 		a(id="logo" href="/") ←  

web/login/index.html

@@ -61,7 +61,7 @@
           <tr>
             <td></td>
             <td>
-              <button id="login-button">Login</button>
+              <button class="key" id="login-button">Login</button>
             </td>
           </tr>
         </table>

web/login/index.pug

@@ -17,7 +17,7 @@ block body
 					td #[input(type="password" id="passwd-input")]
 				tr
 					td
-					td #[button(id="login-button") Login]
+					td #[button(id="login-button" class="key") Login]
 
 	ul(class="footer")
 		li(class="footer-left")

web/share/css/main.css

@@ -90,12 +90,10 @@ img.inline-lamp {
 
 button,
 select {
-	box-shadow: none;
+	border: none;
-	border: var(--border-key-thin);
 	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 {

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;

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;
 	}
 }
 

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);

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 span.switch-inner:before,
-div.switch-box label.switch-label span.switch-inner:after {
+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 span.switch-inner:after {
-div.switch-box label.switch-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);
 }

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;
 }

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;