Replace :focus styling with :focus-visible
Use the new modern :focus-visible instead of :focus. This is only shown when navigating using the keyboard. And in the case of the control bar buttons, This means we can separate the :focus and :hover styles. Instead of showing a lighter overlay (or darker for selected) like we use for hover, lets use a more common blue outline for focus-visible. This also means we can re-use the common focus-visible from input.css instead of having a special one for control bar buttons.
This commit is contained in:
parent
8c961ab7c6
commit
ac6adc61d5
|
@ -401,23 +401,17 @@ html {
|
|||
https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
|
||||
cursor: default;
|
||||
}
|
||||
#noVNC_control_bar .noVNC_button:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#noVNC_control_bar .noVNC_button:not(:disabled):active {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
/* Android browsers don't properly update hover state if touch events
|
||||
* are intercepted, but focus should be safe to display */
|
||||
:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover,
|
||||
#noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):focus {
|
||||
/* Android browsers don't properly update hover state if touch events are
|
||||
* intercepted */
|
||||
:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
|
||||
border-color: rgba(0, 0, 0, 0.4);
|
||||
background: 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):focus {
|
||||
:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button:not(:disabled):hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
#noVNC_control_bar .noVNC_button.noVNC_hidden {
|
||||
|
|
|
@ -151,29 +151,29 @@ input[type=range]::-moz-range-thumb {
|
|||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input:not([type]):focus,
|
||||
input[type=button]:focus,
|
||||
input[type=color]:focus,
|
||||
input[type=image]:focus,
|
||||
input[type=date]:focus,
|
||||
input[type=datetime-local]:focus,
|
||||
input[type=email]:focus,
|
||||
input[type=month]:focus,
|
||||
input[type=number]:focus,
|
||||
input[type=password]:focus,
|
||||
input[type=reset]:focus,
|
||||
input[type=search]:focus,
|
||||
input[type=submit]:focus,
|
||||
input[type=tel]:focus,
|
||||
input[type=text]:focus,
|
||||
input[type=time]:focus,
|
||||
input[type=url]:focus,
|
||||
input[type=week]:focus,
|
||||
input[type=checkbox]:focus,
|
||||
input[type=range]:focus,
|
||||
button:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
input:not([type]):focus-visible,
|
||||
input[type=button]:focus-visible,
|
||||
input[type=color]:focus-visible,
|
||||
input[type=image]:focus-visible,
|
||||
input[type=date]:focus-visible,
|
||||
input[type=datetime-local]:focus-visible,
|
||||
input[type=email]:focus-visible,
|
||||
input[type=month]:focus-visible,
|
||||
input[type=number]:focus-visible,
|
||||
input[type=password]:focus-visible,
|
||||
input[type=reset]:focus-visible,
|
||||
input[type=search]:focus-visible,
|
||||
input[type=submit]:focus-visible,
|
||||
input[type=tel]:focus-visible,
|
||||
input[type=text]:focus-visible,
|
||||
input[type=time]:focus-visible,
|
||||
input[type=url]:focus-visible,
|
||||
input[type=week]:focus-visible,
|
||||
input[type=checkbox]:focus-visible,
|
||||
input[type=range]:focus-visible,
|
||||
button:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
|
||||
border-color: rgb(74, 144, 217);
|
||||
outline: none;
|
||||
|
|
Loading…
Reference in New Issue