Merge pull request #1730 from novnc/media_touch

Replace JavaScript .noVNC_touch with CSS @media (any-pointer: coarse)

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
@@ -321,16 +319,20 @@ html {
 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
   transform: none;
 }
+/* Larger touch area for the handle, used when a touch screen is available */
 #noVNC_control_bar_handle div {
   position: absolute;
   right: -35px;
   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;
@@ -389,19 +391,18 @@ html {
   vertical-align: middle;
   border:1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
+  background-color: transparent;
   background-image: unset; /* we don't want the gradiant from input.css */
 }
 #noVNC_control_bar .noVNC_button.noVNC_selected {
   border-color: rgba(0, 0, 0, 0.8);
   background-color: rgba(0, 0, 0, 0.5);
 }
-/* Android browsers don't properly update hover state if touch events are
+#noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
- * intercepted, like they are when clicking on the remote screen. */
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
   border-color: rgba(0, 0, 0, 0.4);
   background-color: rgba(0, 0, 0, 0.2);
 }
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+#noVNC_control_bar .noVNC_button:not(:disabled):hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
 #noVNC_control_bar .noVNC_button:not(:disabled):active {
@@ -412,6 +413,19 @@ html {
   display: none !important;
 }
 
+/* Android browsers don't properly update hover state if touch events are
+ * intercepted, like they are when clicking on the remote screen. */
+@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);
+  }
+}
+
+
 /* Panels */
 .noVNC_panel {
   transform: translateX(25px);
@@ -539,9 +553,11 @@ html {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
-:root:not(.noVNC_touch) #noVNC_mobile_buttons {
+@media not (any-pointer: coarse) {
+  :root.noVNC_connected #noVNC_mobile_buttons {
     display: none;
   }
+}
 
 /* Extra manual keys */
 :root:not(.noVNC_connected) #noVNC_toggle_extra_keys_button {
@@ -714,12 +730,9 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_button {
+#noVNC_connect_box {
-  cursor: pointer;
+  padding: 12px;
 
-  padding: 10px;
-
-  color: white;
   background-color: rgb(110, 132, 163);
   border-radius: 12px;
 
@@ -728,26 +741,26 @@ html {
 
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
-#noVNC_connect_button div {
+#noVNC_connect_box button {
-  margin: 2px;
+  width: 100%;
   padding: 5px 30px;
-  border: 1px solid rgb(83, 99, 122);
+
-  border-bottom-width: 2px;
+  cursor: pointer;
+
+  border-color: rgb(83, 99, 122);
   border-radius: 5px;
+
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+  color: white;
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_button div:active {
+#noVNC_connect_box button:hover {
-  border-bottom-width: 1px;
-  margin-top: 3px;
-}
-:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
 
-#noVNC_connect_button img {
+#noVNC_connect_box img {
   vertical-align: bottom;
   height: 1.3em;
 }

app/styles/input.css

@@ -20,7 +20,8 @@ input, input::file-selector-button, button, select, textarea {
   border: 1px solid rgb(192, 192, 192);
   border-radius: 5px;
   color: black;
-  background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  background-image: var(--bg-gradient);
 }
 
 /*
@@ -41,6 +42,9 @@ select {
 
   padding-left: 20px;
   padding-right: 20px;
+
+  /* Disable Chrome's touch tap highlight */
+  -webkit-tap-highlight-color: transparent;
 }
 
 /*
@@ -54,8 +58,7 @@ select {
                 stroke="rgb(31,31,31)" fill="none" \
                 stroke-linecap="round" stroke-linejoin="round" /> \
       </svg>');
-  background-image: var(--select-arrow),
+  background-image: var(--select-arrow), var(--bg-gradient);
-    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
   background-position: calc(100% - 7px), left top;
   background-repeat: no-repeat;
   padding-right: calc(2*7px + 8px);
@@ -65,13 +68,13 @@ select {
           https://bugzilla.mozilla.org/show_bug.cgi?id=1805406 */
 select:active {
   /* Rotated arrow */
-  --select-arrow: url('data:image/svg+xml;utf8, \
+  background-image: url('data:image/svg+xml;utf8, \
       <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
            xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \
           <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
                 stroke="rgb(31,31,31)" fill="none" \
                 stroke-linecap="round" stroke-linejoin="round" /> \
-      </svg>');
+      </svg>'), var(--bg-gradient);
 }
 option {
   color: black;
@@ -180,21 +183,36 @@ input::file-selector-button {
 /*
  * Hover
  */
-:root:not(.noVNC_touch) input[type=button]:hover,
+input[type=button]:hover,
-:root:not(.noVNC_touch) input[type=color]:hover,
+input[type=color]:hover,
-:root:not(.noVNC_touch) input[type=image]:hover,
+input[type=image]:hover,
-:root:not(.noVNC_touch) input[type=reset]:hover,
+input[type=reset]:hover,
-:root:not(.noVNC_touch) input[type=submit]:hover,
+input[type=submit]:hover,
-:root:not(.noVNC_touch) input::file-selector-button:hover,
+input::file-selector-button:hover,
-:root:not(.noVNC_touch) button:hover {
+button:hover {
   background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }
-:root:not(.noVNC_touch) select:hover {
+select:hover {
   background-image: var(--select-arrow),
     linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
   background-position: calc(100% - 7px), left top;
   background-repeat: no-repeat;
 }
+@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);
+  }
+}
 
 /*
  * Active (clicked)
@@ -236,24 +254,23 @@ select:disabled,
 textarea:disabled {
   opacity: 0.4;
 }
-:root:not(.noVNC_touch) input[type=button]:disabled,
+input[type=button]:disabled,
-:root:not(.noVNC_touch) input[type=color]:disabled,
+input[type=color]:disabled,
-:root:not(.noVNC_touch) input[type=image]:disabled,
+input[type=image]:disabled,
-:root:not(.noVNC_touch) input[type=reset]:disabled,
+input[type=reset]:disabled,
-:root:not(.noVNC_touch) input[type=submit]:disabled,
+input[type=submit]:disabled,
-:root:not(.noVNC_touch) input:disabled::file-selector-button,
+input:disabled::file-selector-button,
-:root:not(.noVNC_touch) button:disabled,
+button:disabled,
-:root:not(.noVNC_touch) select:disabled {
+select:disabled {
-  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: var(--bg-gradient);
   border-bottom-width: 2px;
   margin-top: 0;
 }
 input[type=file]:disabled {
   background-image: none;
 }
-:root:not(.noVNC_touch) select:disabled {
+select:disabled {
-  background-image: var(--select-arrow),
+  background-image: var(--select-arrow), var(--bg-gradient);
-    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 }
 input[type=image]:disabled {
   /* See Firefox bug:

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);
         }
@@ -319,7 +318,8 @@ const UI = {
     addConnectionControlHandlers() {
         document.getElementById("noVNC_disconnect_button")
             .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_button")
+        document.getElementById("noVNC_connect_box")
+            .getElementsByTagName('button')[0]
             .addEventListener('click', UI.connect);
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);

vnc.html

@@ -274,9 +274,9 @@
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
             <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
-            <div id="noVNC_connect_button"><div>
+            <div id="noVNC_connect_box"><button>
                 <img alt="" src="app/images/connect.svg"> Connect
-            </div></div>
+            </button></div>
         </div>
     </div>