fixed browser detection, loading css from js

20 files changed, 401 insertions, 279 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);
+}
diff --git a/web/share/js/bb.js b/web/share/js/bb.js
index cf20aa13..ec45b222 100644
--- a/web/share/js/bb.js
+++ b/web/share/js/bb.js
@@ -23,7 +23,82 @@
 "use strict";
 
 
-export function checkBrowser() {
+export var browser = new function() {
+	// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
+
+	// Opera 8.0+
+	let is_opera = (
+		(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
+		|| !!window.opera
+		|| (navigator.userAgent.indexOf(" OPR/") >= 0)
+	);
+
+	// Firefox 1.0+
+	let is_firefox = (typeof InstallTrigger !== "undefined");
+
+	// Safari 3.0+ "[object HTMLElementConstructor]"
+	let is_safari = (function() {
+		if (/constructor/i.test(String(window["HTMLElement"]))) {
+			return true;
+		}
+		let push = null;
+		try {
+			push = window.top["safari"].pushNotification;
+		} catch {
+			try {
+				push = window["safari"].pushNotification;
+			} catch {
+				return false;
+			}
+		}
+		return String(push) === "[object SafariRemoteNotification]";
+	})();
+
+	// Chrome 1+
+	let is_chrome = !!window.chrome;
+
+	// Blink engine detection
+	let is_blink = ((is_chrome || is_opera) && !!window.CSS);
+
+	// Any browser on Mac
+	let is_mac = ((
+		window.navigator.oscpu
+		|| window.navigator.platform
+		|| window.navigator.appVersion
+		|| "Unknown"
+	).indexOf("Mac") !== -1);
+
+	// Any Windows
+	let is_win = (navigator && !!(/win/i).exec(navigator.platform));
+
+	// iOS browsers
+	// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
+	// https://github.com/lancedikson/bowser/issues/329
+	let is_ios = (!!navigator.platform && (
+		/iPad|iPhone|iPod/.test(navigator.platform)
+		|| (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1 && !window["MSStream"])
+	));
+
+	let is_android = /android/i.test(navigator.userAgent);
+
+	let flags = {
+		"is_opera": is_opera,
+		"is_firefox": is_firefox,
+		"is_safari": is_safari,
+		"is_chrome": is_chrome,
+		"is_blink": is_blink,
+		"is_mac": is_mac,
+		"is_win": is_win,
+		"is_ios": is_ios,
+		"is_android": is_android,
+		"is_mobile": (is_ios || is_android),
+	};
+
+	console.log("===== BB flags:", flags);
+	return flags;
+};
+
+export function checkBrowser(desktop_css, mobile_css) {
 	if (
 		!window.navigator
 		|| window.navigator.userAgent.indexOf("MSIE ") > 0
@@ -52,7 +127,30 @@ export function checkBrowser() {
 		`;
 		document.body.appendChild(el_modal);
 		return false;
+
 	} else {
+		if (browser.is_mobile) {
+			__addCssLink("/share/css/x-mobile.css");
+			if (mobile_css) {
+				__addCssLink(mobile_css);
+			}
+		} else {
+			__addCssLink("/share/css/x-desktop.css");
+			if (desktop_css) {
+				__addCssLink(desktop_css);
+			}
+		}
 		return true;
 	}
 }
+
+function __addCssLink(path) {
+	console.log("===== Adding CSS:", path);
+	let el_head = document.getElementsByTagName("head")[0];
+	let el_link = document.createElement("link");
+	el_link.rel = "stylesheet";
+	el_link.type = "text/css";
+	el_link.href = path;
+	el_link.media = "all";
+	el_head.appendChild(el_link);
+}
diff --git a/web/share/js/index/main.js b/web/share/js/index/main.js
index b34fa099..7510d133 100644
--- a/web/share/js/index/main.js
+++ b/web/share/js/index/main.js
@@ -31,7 +31,7 @@ import {wm, initWindowManager} from "../wm.js";
 export function main() {
 	initWindowManager();
 
-	if (checkBrowser()) {
+	if (checkBrowser(null, null)) {
 		__setAppText();
 		__loadKvmdInfo();
 	}
diff --git a/web/share/js/kvm/main.js b/web/share/js/kvm/main.js
index 3717f71d..6417da37 100644
--- a/web/share/js/kvm/main.js
+++ b/web/share/js/kvm/main.js
@@ -31,7 +31,7 @@ import {Session} from "./session.js";
 
 
 export function main() {
-	if (checkBrowser()) {
+	if (checkBrowser(null, "/share/css/kvm/x-mobile.css")) {
 		tools.storage.bindSimpleSwitch($("page-close-ask-switch"), "page.close.ask", true, function(value) {
 			if (value) {
 				window.onbeforeunload = function(event) {
diff --git a/web/share/js/login/main.js b/web/share/js/login/main.js
index 5ef54e9a..2b5af5e3 100644
--- a/web/share/js/login/main.js
+++ b/web/share/js/login/main.js
@@ -29,7 +29,7 @@ import {wm, initWindowManager} from "../wm.js";
 
 
 export function main() {
-	if (checkBrowser()) {
+	if (checkBrowser(null, null)) {
 		initWindowManager();
 
 		tools.el.setOnClick($("login-button"), __login);
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index fee47824..05ba7f0a 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -23,6 +23,9 @@
 "use strict";
 
 
+import {browser} from "./bb.js";
+
+
 export var tools = new function() {
 	var self = this;
 
@@ -335,78 +338,7 @@ export var tools = new function() {
 		};
 	};
 
-	self.browser = new function() {
-		// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
-
-		// Opera 8.0+
-		let is_opera = (
-			(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
-			|| !!window.opera
-			|| (navigator.userAgent.indexOf(" OPR/") >= 0)
-		);
-
-		// Firefox 1.0+
-		let is_firefox = (typeof InstallTrigger !== "undefined");
-
-		// Safari 3.0+ "[object HTMLElementConstructor]"
-		let is_safari = (function() {
-			if (/constructor/i.test(String(window["HTMLElement"]))) {
-				return true;
-			}
-			let push = null;
-			try {
-				push = window.top["safari"].pushNotification;
-			} catch {
-				try {
-					push = window["safari"].pushNotification;
-				} catch {
-					return false;
-				}
-			}
-			return String(push) === "[object SafariRemoteNotification]";
-		})();
-
-		// Chrome 1+
-		let is_chrome = !!window.chrome;
-
-		// Blink engine detection
-		let is_blink = ((is_chrome || is_opera) && !!window.CSS);
-
-		// Any browser on Mac
-		let is_mac = ((
-			window.navigator.oscpu
-			|| window.navigator.platform
-			|| window.navigator.appVersion
-			|| "Unknown"
-		).indexOf("Mac") !== -1);
-
-		// Any Windows
-		let is_win = (navigator && !!(/win/i).exec(navigator.platform));
-
-		// iOS browsers
-		// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
-		// https://github.com/lancedikson/bowser/issues/329
-		let is_ios = (!!navigator.platform && (
-			/iPad|iPhone|iPod/.test(navigator.platform)
-			|| (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1 && !window["MSStream"])
-		));
-
-		let is_android = /android/i.test(navigator.userAgent);
-
-		return {
-			"is_opera": is_opera,
-			"is_firefox": is_firefox,
-			"is_safari": is_safari,
-			"is_chrome": is_chrome,
-			"is_blink": is_blink,
-			"is_mac": is_mac,
-			"is_win": is_win,
-			"is_ios": is_ios,
-			"is_android": is_android,
-			"is_mobile": (is_ios || is_android),
-		};
-	};
-	self.info("Browser:", self.browser);
+	self.browser = browser;
 };
 
 export var $ = (id) => document.getElementById(id);