improved tablet detection

10 files changed, 12 insertions, 16 deletions

diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css
index 511ab989..52a4afaf 100644
--- a/web/share/css/keypad.css
+++ b/web/share/css/keypad.css
@@ -128,8 +128,7 @@ div.keypad b {
 	color: var(--cs-key-holded-bg);
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	/* iPad */
+@media only screen and (hover: none) and (pointer: coarse) {
 	div.keypad {
 		zoom: 1.28 !important;
 	}
diff --git a/web/share/css/kvm/keyboard.css b/web/share/css/kvm/keyboard.css
index 62bf8bad..66fafca0 100644
--- a/web/share/css/kvm/keyboard.css
+++ b/web/share/css/kvm/keyboard.css
@@ -20,7 +20,7 @@
 *****************************************************************************/
 
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (hover: none) and (pointer: coarse) {
 	div#keyboard-window {
 		visibility: visible !important;
 		padding-top: 9px !important;
@@ -47,7 +47,7 @@ div#keyboard-desktop {
 div#keyboard-mobile {
 	display: none;
 }
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (hover: none) and (pointer: coarse) {
 	div#keyboard-desktop {
 		display: none !important;
 	}
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index a525ebdc..91a019d0 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -103,7 +103,7 @@ div#stream-mouse-buttons {
 	display: none;
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (hover: none) and (pointer: coarse) {
 	div#stream-window {
 		padding-top: 3px !important;
 		border-top: 0 !important;
diff --git a/web/share/css/main.css b/web/share/css/main.css
index e48fbc9b..8406890c 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -214,7 +214,7 @@ input[type=text], input[type=password] {
 	height: 30px;
 }
 
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+@media only screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
 	button,
 	select,
 	input[type=text],
diff --git a/web/share/css/modal.css b/web/share/css/modal.css
index 6a260958..6b3229b9 100644
--- a/web/share/css/modal.css
+++ b/web/share/css/modal.css
@@ -74,8 +74,7 @@ div.modal div.modal-window div.modal-buttons button {
 	border-radius: 0;
 	height: 40px;
 }
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
-	/* iPad vertical */
+@media only screen and (hover: none) 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 90a49ebe..bcafd56a 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -80,8 +80,7 @@ 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 (min-device-width: 768px) and (max-device-width: 1024px) {
-	/* iPad 8 */
+@media only screen and (hover: none) 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) !important;
diff --git a/web/share/css/radio.css b/web/share/css/radio.css
index 65a6a043..71bd6076 100644
--- a/web/share/css/radio.css
+++ b/web/share/css/radio.css
@@ -45,8 +45,8 @@ 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 (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
-	div.radio-box label {
+@media only screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
+	div.radio-box input[type=radio] + label {
 		height: 30px !important;
 	}
 }
diff --git a/web/share/css/slider.css b/web/share/css/slider.css
index b8d7e515..b80fc63f 100644
--- a/web/share/css/slider.css
+++ b/web/share/css/slider.css
@@ -42,7 +42,7 @@
 		margin-right: 0;
 	}
 }
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+@media only screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
 	@supports (-webkit-appearance: none) {
 		input[type=range].slider {
 			margin: 20px 0 20px 0 !important;
diff --git a/web/share/css/tabs.css b/web/share/css/tabs.css
index a5dda598..d084427d 100644
--- a/web/share/css/tabs.css
+++ b/web/share/css/tabs.css
@@ -53,7 +53,7 @@ div.tabs-box label {
 	position: relative;
 	top: 1px;
 }
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+@media only screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
 	div.tabs-box label {
 		height: 30px !important;
 	}
diff --git a/web/share/css/window.css b/web/share/css/window.css
index 133d9946..60c2a8cc 100644
--- a/web/share/css/window.css
+++ b/web/share/css/window.css
@@ -170,8 +170,7 @@ div.window.window-full-tab button.window-button-exit-full-tab {
 	visibility: visible !important;
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	/* iPad */
+@media only screen and (hover: none) and (pointer: coarse) {
 	div.window {
 		padding-top: 45px !important;
 	}