fixed browser detection, loading css from js

3 files changed, 85 insertions, 59 deletions

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