Get rid of noVNC_touch in favor for @media queries

This commit removes our dependency on the class "noVNC_touch" which was
set by Javascript. Instead, we can use the CSS media query
"any-pointer: coarse", which means that any pointing device that isn't
accurate is available. In practice this seems to basically be equal to
that a touch screen is available.

This change lets us simplify the selectors in many cases as well, which
is a nice bonus.

3 files changed, 40 insertions, 34 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index b20ed2b..d47ad1f 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -22,8 +22,6 @@
 /*
  * State variables (set on :root):
  *
- * noVNC_touch: Device has touch input
- *
  * noVNC_loading: Page is still loading
  * noVNC_connecting: Connecting to server
  * noVNC_reconnecting: Re-establishing a connection
@@ -328,10 +326,13 @@ html {
   top: 0;
   width: 50px;
   height: 100%;
-}
-:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
   display: none;
 }
+@media (any-pointer: coarse) {
+  #noVNC_control_bar_handle div {
+    display: unset;
+  }
+}
 .noVNC_right #noVNC_control_bar_handle div {
   left: -35px;
   right: auto;
@@ -414,12 +415,14 @@ html {
 
 /* Android browsers don't properly update hover state if touch events are
  * intercepted, like they are when clicking on the remote screen. */
-:root.noVNC_touch #noVNC_control_bar .noVNC_button:not(:disabled):hover {
-  background-color: transparent;
-}
-:root.noVNC_touch #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
-  border-color: rgba(0, 0, 0, 0.8);
-  background-color: rgba(0, 0, 0, 0.5);
+@media (any-pointer: coarse) {
+  #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+    background-color: transparent;
+  }
+  #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+    border-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 }
 
 
@@ -550,8 +553,10 @@ html {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
-:root:not(.noVNC_touch) #noVNC_mobile_buttons {
-  display: none;
+@media not (any-pointer: coarse) {
+  :root.noVNC_connected #noVNC_mobile_buttons {
+    display: none;
+  }
 }
 
 /* Extra manual keys */
diff --git a/app/styles/input.css b/app/styles/input.css
index 1b82e69..b12d0a9 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -198,18 +198,20 @@ select:hover {
   background-position: calc(100% - 7px), left top;
   background-repeat: no-repeat;
 }
-/* We don't want a hover style after touch input */
-:root.noVNC_touch input[type=button]:hover,
-:root.noVNC_touch input[type=color]:hover,
-:root.noVNC_touch input[type=image]:hover,
-:root.noVNC_touch input[type=reset]:hover,
-:root.noVNC_touch input[type=submit]:hover,
-:root.noVNC_touch input::file-selector-button:hover,
-:root.noVNC_touch button:hover {
-  background-image: var(--bg-gradient);
-}
-:root.noVNC_touch select:hover {
-  background-image: var(--select-arrow), var(--bg-gradient);
+@media (any-pointer: coarse) {
+  /* We don't want a hover style after touch input */
+  input[type=button]:hover,
+  input[type=color]:hover,
+  input[type=image]:hover,
+  input[type=reset]:hover,
+  input[type=submit]:hover,
+  input::file-selector-button:hover,
+  button:hover {
+    background-image: var(--bg-gradient);
+  }
+  select:hover {
+    background-image: var(--select-arrow), var(--bg-gradient);
+  }
 }
 
 /*
@@ -252,14 +254,14 @@ select:disabled,
 textarea:disabled {
   opacity: 0.4;
 }
-:root:not(.noVNC_touch) input[type=button]:disabled,
-:root:not(.noVNC_touch) input[type=color]:disabled,
-:root:not(.noVNC_touch) input[type=image]:disabled,
-:root:not(.noVNC_touch) input[type=reset]:disabled,
-:root:not(.noVNC_touch) input[type=submit]:disabled,
-:root:not(.noVNC_touch) input:disabled::file-selector-button,
-:root:not(.noVNC_touch) button:disabled,
-:root:not(.noVNC_touch) select:disabled {
+input[type=button]:disabled,
+input[type=color]:disabled,
+input[type=image]:disabled,
+input[type=reset]:disabled,
+input[type=submit]:disabled,
+input:disabled::file-selector-button,
+button:disabled,
+select:disabled {
   background-image: var(--bg-gradient);
   border-bottom-width: 2px;
   margin-top: 0;
@@ -267,7 +269,7 @@ textarea:disabled {
 input[type=file]:disabled {
   background-image: none;
 }
-:root:not(.noVNC_touch) select:disabled {
+select:disabled {
   background-image: var(--select-arrow), var(--bg-gradient);
 }
 input[type=image]:disabled {
diff --git a/app/ui.js b/app/ui.js
index 3eb02cb..ec508e3 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -88,7 +88,6 @@ const UI = {
 
         // Adapt the interface for touch screen devices
         if (isTouchDevice) {
-            document.documentElement.classList.add("noVNC_touch");
             // Remove the address bar
             setTimeout(() => window.scrollTo(0, 1), 100);
         }