fixed browser detection, loading css from js

15 files changed, 295 insertions, 203 deletions

diff --git a/web/share/css/index/index.css b/web/share/css/index/index.css
index 001abefb..314b96f4 100644
--- a/web/share/css/index/index.css
+++ b/web/share/css/index/index.css
@@ -90,7 +90,7 @@ tr.server {
 	font-family: monospace;
 }
 
-@media all and (display-mode: standalone) {
+@media only screen and (display-mode: standalone) {
 	div#app-keyboard-warning {
 		display: none;
 	}
diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css
index e8c2d404..f3f16834 100644
--- a/web/share/css/keypad.css
+++ b/web/share/css/keypad.css
@@ -139,15 +139,3 @@ div.keypad div.label {
 div.keypad b {
 	color: var(--cs-key-holded-bg);
 }
-
-@media only screen and (pointer: coarse) {
-	div.keypad {
-		zoom: 1.28 !important;
-	}
-
-	div.keypad div.key:hover,
-	div.keypad div.modifier:hover {
-		color: var(--cs-key-default-fg);
-		background-color: var(--cs-key-default-bg);
-	}
-}
diff --git a/web/share/css/kvm/keyboard.css b/web/share/css/kvm/keyboard.css
index 96d67132..6f410b3f 100644
--- a/web/share/css/kvm/keyboard.css
+++ b/web/share/css/kvm/keyboard.css
@@ -20,38 +20,9 @@
 *****************************************************************************/
 
 
-@media only screen and (pointer: coarse) {
-	div#keyboard-window {
-		visibility: visible !important;
-		padding-top: 9px !important;
-		padding-bottom: 30px !important;
-		border-bottom: 0 !important;
-		border-left: 0 !important;
-		border-right: 0 !important;
-		border-radius: 0 !important;
-		top: unset !important;
-		bottom: 0 !important;
-		width: 100% !important;
-		left: 50% !important;
-		-webkit-transform: translateX(-50%) !important;
-		transform: translateX(-50%) !important;
-	}
-	div#keyboard-window-header {
-		display: none !important
-	}
-}
-
 div#keyboard-desktop {
 	display: block;
 }
 div#keyboard-mobile {
 	display: none;
 }
-@media only screen and (pointer: coarse) {
-	div#keyboard-desktop {
-		display: none !important;
-	}
-	div#keyboard-mobile {
-		display: block !important;
-	}
-}
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index 57bcf25e..9cbd608f 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -102,33 +102,3 @@ div#stream-window.window-active:fullscreen div#stream-box div#stream-fullscreen-
 div#stream-mouse-buttons {
 	display: none;
 }
-
-@media only screen and (pointer: coarse) {
-	div#stream-window {
-		padding-top: 3px !important;
-		padding-bottom: 80px !important;
-		border-top: 0 !important;
-		border-left: 0 !important;
-		border-right: 0 !important;
-		border-radius: 0 !important;
-		top: 50px !important;
-		left: 50% !important;
-		width: 100% !important;
-		-webkit-transform: translateX(-50%) !important;
-		transform: translateX(-50%) !important;
-	}
-	div#stream-window-header {
-		display: none !important;
-	}
-	div#stream-info {
-		display: block !important;
-		margin: 0;
-		padding: 0;
-		padding-bottom: 3px;
-		font-size: 0.8em;
-		color: var(--cs-window-header-default-fg);
-	}
-	div#stream-mouse-buttons {
-		display: block !important;
-	}
-}
diff --git a/web/share/css/kvm/x-mobile.css b/web/share/css/kvm/x-mobile.css
new file mode 100644
index 00000000..d41b9b4f
--- /dev/null
+++ b/web/share/css/kvm/x-mobile.css
@@ -0,0 +1,85 @@
+/*****************************************************************************
+#                                                                            #
+#    KVMD - The main PiKVM daemon.                                           #
+#                                                                            #
+#    Copyright (C) 2018-2022  Maxim Devaev <[email protected]>               #
+#                                                                            #
+#    This program is free software: you can redistribute it and/or modify    #
+#    it under the terms of the GNU General Public License as published by    #
+#    the Free Software Foundation, either version 3 of the License, or       #
+#    (at your option) any later version.                                     #
+#                                                                            #
+#    This program is distributed in the hope that it will be useful,         #
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of          #
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           #
+#    GNU General Public License for more details.                            #
+#                                                                            #
+#    You should have received a copy of the GNU General Public License       #
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.  #
+#                                                                            #
+*****************************************************************************/
+
+
+/* ===== stream.css ===== */
+
+div#stream-window {
+	padding-top: 3px !important;
+	padding-bottom: 80px !important;
+	border-top: 0 !important;
+	border-left: 0 !important;
+	border-right: 0 !important;
+	border-radius: 0 !important;
+	top: 50px !important;
+	left: 50% !important;
+	width: 100% !important;
+	-webkit-transform: translateX(-50%) !important;
+	transform: translateX(-50%) !important;
+}
+
+div#stream-window-header {
+	display: none !important;
+}
+
+div#stream-info {
+	display: block !important;
+	margin: 0;
+	padding: 0;
+	padding-bottom: 3px;
+	font-size: 0.8em;
+	color: var(--cs-window-header-default-fg);
+}
+
+div#stream-mouse-buttons {
+	display: block !important;
+}
+
+
+/* ===== keyboard.css ===== */
+
+div#keyboard-window {
+	visibility: visible !important;
+	padding-top: 9px !important;
+	padding-bottom: 30px !important;
+	border-bottom: 0 !important;
+	border-left: 0 !important;
+	border-right: 0 !important;
+	border-radius: 0 !important;
+	top: unset !important;
+	bottom: 0 !important;
+	width: 100% !important;
+	left: 50% !important;
+	-webkit-transform: translateX(-50%) !important;
+	transform: translateX(-50%) !important;
+}
+
+div#keyboard-window-header {
+	display: none !important
+}
+
+div#keyboard-desktop {
+	display: none !important;
+}
+
+div#keyboard-mobile {
+	display: block !important;
+}
diff --git a/web/share/css/main.css b/web/share/css/main.css
index eda90875..9b2f078b 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -134,40 +134,6 @@ 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,
-	select:enabled:hover,
-	input[type=file]:enabled:hover::-webkit-file-selector-button,
-	input[type=file]:enabled:hover::file-selector-button {
-		color: var(--cs-control-hovered-fg);
-		background-color: var(--cs-control-hovered-bg);
-	}
-	button:active,
-	select:active,
-	input[type=file]:active::-webkit-file-selector-button,
-	input[type=file]:active::file-selector-button {
-		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 {
-		background-image: url("../svg/select-arrow-intensive.svg") !important;
-	}
-}
-@media (hover: none) {
-	/* If we DON'T have a mouse cursor */
-	button:active,
-	select:active,
-	input[type=file]:active::-webkit-file-selector-button,
-	input[type=file]:active::file-selector-button {
-		color: var(--cs-control-hovered-fg);
-		background-color: var(--cs-control-hovered-bg);
-	}
-}
 button:disabled,
 select:disabled,
 input[type=file]:disabled::-webkit-file-selector-button,
@@ -214,17 +180,6 @@ input[type=text], input[type=password] {
 	height: 30px;
 }
 
-@media only screen and (pointer: coarse) and (orientation: portrait) {
-	button,
-	select,
-	input[type=text],
-	input[type=password],
-	input[type=file]::-webkit-file-selector-button,
-	input[type=file]::file-selector-button {
-		height: 45px !important;
-	}
-}
-
 div.buttons-row {
 	margin: 0;
 	padding: 0;
diff --git a/web/share/css/modal.css b/web/share/css/modal.css
index 6b6dfa53..ac2cb423 100644
--- a/web/share/css/modal.css
+++ b/web/share/css/modal.css
@@ -74,8 +74,3 @@ div.modal div.modal-window div.modal-buttons button {
 	border-radius: 0;
 	height: 40px;
 }
-@media only screen and (pointer: coarse) and (orientation: portrait) {
-	div.modal-buttons button {
-		height: 50px !important;
-	}
-}
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index e8a73820..a083c48f 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -82,12 +82,6 @@ ul#navbar li a#logo:hover:not(.active),
 ul#navbar li a.menu-button:hover:not(.active) {
 	background-color: var(--cs-navbar-item-hovered-bg);
 }
-@media only screen and (pointer: coarse) {
-	ul#navbar li a#logo:hover:not(.active),
-	ul#navbar li a.menu-button:hover:not(.active) {
-		background-color: var(--cs-navbar-default-bg);
-	}
-}
 
 ul#navbar li a#logo img {
 	margin-top: -2px;
diff --git a/web/share/css/radio.css b/web/share/css/radio.css
index eb1ea0e0..c2057b04 100644
--- a/web/share/css/radio.css
+++ b/web/share/css/radio.css
@@ -45,11 +45,6 @@ div.radio-box label:not(:last-of-type) {
 	margin-right: 1px;
 	box-shadow: 1px 0 0 0 var(--cs-control-pressed-bg);
 }
-@media only screen and (pointer: coarse) and (orientation: portrait) {
-	div.radio-box input[type=radio] + label {
-		height: 30px !important;
-	}
-}
 div.radio-box label:first-of-type {
 	border-top-left-radius: 4px;
 	border-bottom-left-radius: 4px;
@@ -59,15 +54,6 @@ div.radio-box label:last-of-type {
 	border-bottom-right-radius: 4px;
 }
 
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
-	/* If we have a mouse cursor */
-	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;
-	}
-}
-
 div.radio-box input[type=radio]:checked + label {
 	/*font-weight: bold;*/
 	text-shadow: 0.5px 0 0 currentColor;
diff --git a/web/share/css/slider.css b/web/share/css/slider.css
index 288ad5fe..d472aac1 100644
--- a/web/share/css/slider.css
+++ b/web/share/css/slider.css
@@ -42,13 +42,6 @@
 		margin-right: 0;
 	}
 }
-@media only screen and (pointer: coarse) and (orientation: portrait) {
-	@supports (-webkit-appearance: none) {
-		input[type=range].slider {
-			margin: 20px 0 20px 0 !important;
-		}
-	}
-}
 input[type=range].slider:disabled {
 	cursor: default;
 }
@@ -61,13 +54,6 @@ 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);
@@ -92,13 +78,6 @@ 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 7a822feb..eb2241ed 100644
--- a/web/share/css/switch.css
+++ b/web/share/css/switch.css
@@ -79,16 +79,6 @@ div.switch-box label span.switch-inner:after {
 	text-align: right;
 }
 
-@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: 13px;
diff --git a/web/share/css/tabs.css b/web/share/css/tabs.css
index f872d508..7efa76c6 100644
--- a/web/share/css/tabs.css
+++ b/web/share/css/tabs.css
@@ -53,11 +53,6 @@ div.tabs-box label {
 	position: relative;
 	top: 1px;
 }
-@media only screen and (pointer: coarse) and (orientation: portrait) {
-	div.tabs-box label {
-		height: 30px !important;
-	}
-}
 
 div.tabs-box label:last-of-type {
 	border-right: var(--border-default-thin);
@@ -66,12 +61,6 @@ div.tabs-box label:last-of-type {
 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 {
 	display: block;
diff --git a/web/share/css/window.css b/web/share/css/window.css
index d241f72f..cbfaf205 100644
--- a/web/share/css/window.css
+++ b/web/share/css/window.css
@@ -169,22 +169,3 @@ div.window button.window-button-exit-full-tab:hover {
 div.window.window-full-tab button.window-button-exit-full-tab {
 	visibility: visible !important;
 }
-
-@media only screen and (pointer: coarse) {
-	div.window {
-		padding-top: 45px !important;
-	}
-	div.window div.window-header {
-		height: 35px !important;
-	}
-	div.window div.window-header div.window-grab {
-		height: 35px !important;
-	}
-	div.window div.window-header button.window-button-full-screen,
-	div.window div.window-header button.window-button-enter-full-tab,
-	div.window div.window-header button.window-button-original,
-	div.window div.window-header button.window-button-maximize,
-	div.window div.window-header button.window-button-close {
-		height: 40px !important;
-	}
-}
diff --git a/web/share/css/x-desktop.css b/web/share/css/x-desktop.css
new file mode 100644
index 00000000..f1728a96
--- /dev/null
+++ b/web/share/css/x-desktop.css
@@ -0,0 +1,88 @@
+/*****************************************************************************
+#                                                                            #
+#    KVMD - The main PiKVM daemon.                                           #
+#                                                                            #
+#    Copyright (C) 2018-2022  Maxim Devaev <[email protected]>               #
+#                                                                            #
+#    This program is free software: you can redistribute it and/or modify    #
+#    it under the terms of the GNU General Public License as published by    #
+#    the Free Software Foundation, either version 3 of the License, or       #
+#    (at your option) any later version.                                     #
+#                                                                            #
+#    This program is distributed in the hope that it will be useful,         #
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of          #
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           #
+#    GNU General Public License for more details.                            #
+#                                                                            #
+#    You should have received a copy of the GNU General Public License       #
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.  #
+#                                                                            #
+*****************************************************************************/
+
+
+/* ===== main.css ===== */
+
+button:enabled:hover,
+select:enabled:hover,
+input[type=file]:enabled:hover::-webkit-file-selector-button,
+input[type=file]:enabled:hover::file-selector-button {
+	color: var(--cs-control-hovered-fg);
+	background-color: var(--cs-control-hovered-bg);
+}
+
+button:active,
+select:active,
+input[type=file]:active::-webkit-file-selector-button,
+input[type=file]:active::file-selector-button {
+	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 {
+	background-image: url("../svg/select-arrow-intensive.svg") !important;
+}
+
+
+/* ===== radio.css ===== */
+
+/* If we have a mouse cursor */
+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;
+}
+
+
+/* ===== slider.css ===== */
+
+/*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);
+}
+
+/*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);
+}
+
+
+/* ===== switch.css ===== */
+
+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);
+}
+
+
+/* ===== tabs.css ===== */
+
+div.tabs-box input[type="radio"]:not(:checked):hover + label {
+	color: var(--cs-control-hovered-fg);
+}
diff --git a/web/share/css/x-mobile.css b/web/share/css/x-mobile.css
new file mode 100644
index 00000000..8a72fba2
--- /dev/null
+++ b/web/share/css/x-mobile.css
@@ -0,0 +1,121 @@
+/*****************************************************************************
+#                                                                            #
+#    KVMD - The main PiKVM daemon.                                           #
+#                                                                            #
+#    Copyright (C) 2018-2022  Maxim Devaev <[email protected]>               #
+#                                                                            #
+#    This program is free software: you can redistribute it and/or modify    #
+#    it under the terms of the GNU General Public License as published by    #
+#    the Free Software Foundation, either version 3 of the License, or       #
+#    (at your option) any later version.                                     #
+#                                                                            #
+#    This program is distributed in the hope that it will be useful,         #
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of          #
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           #
+#    GNU General Public License for more details.                            #
+#                                                                            #
+#    You should have received a copy of the GNU General Public License       #
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.  #
+#                                                                            #
+*****************************************************************************/
+
+
+/* ===== main.css ===== */
+
+button:active,
+select:active,
+input[type=file]:active::-webkit-file-selector-button,
+input[type=file]:active::file-selector-button {
+	color: var(--cs-control-hovered-fg);
+	background-color: var(--cs-control-hovered-bg);
+}
+
+@media only screen and (orientation: portrait) {
+	button,
+	select,
+	input[type=text],
+	input[type=password],
+	input[type=file]::-webkit-file-selector-button,
+	input[type=file]::file-selector-button {
+		height: 45px !important;
+	}
+}
+
+
+/* ===== window.css ===== */
+
+div.window {
+	padding-top: 45px !important;
+}
+div.window div.window-header {
+	height: 35px !important;
+}
+div.window div.window-header div.window-grab {
+	height: 35px !important;
+}
+div.window div.window-header button.window-button-full-screen,
+div.window div.window-header button.window-button-enter-full-tab,
+div.window div.window-header button.window-button-original,
+div.window div.window-header button.window-button-maximize,
+div.window div.window-header button.window-button-close {
+	height: 40px !important;
+}
+
+
+/* ===== modal.css ===== */
+
+@media only screen and (orientation: portrait) {
+	div.modal-buttons button {
+		height: 50px !important;
+	}
+}
+
+
+/* ===== navbar.css ===== */
+
+ul#navbar li a#logo:hover:not(.active),
+ul#navbar li a.menu-button:hover:not(.active) {
+	background-color: var(--cs-navbar-default-bg);
+}
+
+
+/* ===== radio.css ===== */
+
+@media only screen and (orientation: portrait) {
+	div.radio-box input[type=radio] + label {
+		height: 30px !important;
+	}
+}
+
+
+/* ===== slider.css ===== */
+
+@media only screen and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		input[type=range].slider {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
+
+
+/* ===== tabs.css ===== */
+
+@media only screen and (orientation: portrait) {
+	div.tabs-box label {
+		height: 30px !important;
+	}
+}
+
+
+/* ===== keypad.css ===== */
+
+div.keypad {
+	zoom: 1.28 !important;
+}
+
+div.keypad div.key:hover,
+div.keypad div.modifier:hover {
+	color: var(--cs-key-default-fg);
+	background-color: var(--cs-key-default-bg);
+}