jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separate the disabling of :hover for touch 

This is a corner case which shouldn't need to complicate things for the
regular usecases.
This commit is contained in:
Samuel Mannehed 2022-12-13 14:54:41 +01:00
parent 98364c3daa
commit 6e1eec3025
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/styles/base.css
View File

@ -389,19 +389,18 @@ html {
vertical-align: middle; vertical-align: middle;
border:1px solid rgba(255, 255, 255, 0.2); border:1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px; border-radius: 6px;
background-color: transparent;
background-image: unset; /* we don't want the gradiant from input.css */ background-image: unset; /* we don't want the gradiant from input.css */
} }
#noVNC_control_bar .noVNC_button.noVNC_selected { #noVNC_control_bar .noVNC_button.noVNC_selected {
border-color: rgba(0, 0, 0, 0.8); border-color: rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.5); 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); border-color: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.2); 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); background-color: rgba(255, 255, 255, 0.2);
} }
#noVNC_control_bar .noVNC_button:not(:disabled):active { #noVNC_control_bar .noVNC_button:not(:disabled):active {
@ -412,6 +411,17 @@ html {
display: none !important; 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 */ /* Panels */
.noVNC_panel { .noVNC_panel {
transform: translateX(25px); transform: translateX(25px);

29
app/styles/input.css
View File

@ -180,21 +180,34 @@ input::file-selector-button {
/* /*
* Hover * 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)); 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), background-image: var(--select-arrow),
linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
background-position: calc(100% - 7px), left top; background-position: calc(100% - 7px), left top;
background-repeat: no-repeat; 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) * Active (clicked)