Separate the disabling of :hover for touch

This is a corner case which shouldn't need to complicate things for the
regular usecases.

2 files changed, 35 insertions, 12 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index 408da27..54e197f 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -389,19 +389,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
- * intercepted, like they are when clicking on the remote screen. */
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+#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 +411,17 @@ 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. */
+: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);
+}
+
+
 /* Panels */
 .noVNC_panel {
   transform: translateX(25px);
diff --git a/app/styles/input.css b/app/styles/input.css
index 75fc210..b6ffd6d 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -180,21 +180,34 @@ input::file-selector-button {
 /*
  * Hover
  */
-:root:not(.noVNC_touch) input[type=button]:hover,
-:root:not(.noVNC_touch) input[type=color]:hover,
-:root:not(.noVNC_touch) input[type=image]:hover,
-:root:not(.noVNC_touch) input[type=reset]:hover,
-:root:not(.noVNC_touch) input[type=submit]:hover,
-:root:not(.noVNC_touch) input::file-selector-button:hover,
-:root:not(.noVNC_touch) button:hover {
+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: 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;
 }
+/* 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);
+}
 
 /*
  * Active (clicked)