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:
parent
98364c3daa
commit
6e1eec3025
|
@ -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);
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue