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

Make control bar button selectors more specific 

The class "noVNC_button" is only used for control bar buttons. Lets
clarify this in the CSS selectors by only applying styles to elements
with this class that are children of "#noVNC_control_bar".
This commit is contained in:
Samuel Mannehed 2022-11-11 10:11:46 +01:00
parent 64d3d60120
commit 429a08da89
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/styles/base.css
View File

@ -384,41 +384,41 @@ html {
} }
/* Control bar buttons */ /* Control bar buttons */
.noVNC_button { #noVNC_control_bar .noVNC_button {
padding: 4px 4px; padding: 4px 4px;
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;
} }
.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: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.noVNC_button:disabled { #noVNC_control_bar .noVNC_button:disabled {
opacity: 0.4; opacity: 0.4;
/* See firefox bug regarding cursor on disabled <input type="image">: /* See firefox bug regarding cursor on disabled <input type="image">:
https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */ https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
cursor: default; cursor: default;
} }
.noVNC_button:focus { #noVNC_control_bar .noVNC_button:focus {
outline: none; outline: none;
} }
.noVNC_button:not(:disabled):active { #noVNC_control_bar .noVNC_button:not(:disabled):active {
padding-top: 5px; padding-top: 5px;
padding-bottom: 3px; padding-bottom: 3px;
} }
/* Android browsers don't properly update hover state if touch events /* Android browsers don't properly update hover state if touch events
* are intercepted, but focus should be safe to display */ * are intercepted, but focus should be safe to display */
:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:not(:disabled):hover, :root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover,
.noVNC_button.noVNC_selected:not(:disabled):focus { #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):focus {
border-color: rgba(0, 0, 0, 0.4); border-color: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
:root:not(.noVNC_touch) .noVNC_button:not(:disabled):hover, :root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button:not(:disabled):hover,
.noVNC_button:not(:disabled):focus { #noVNC_control_bar .noVNC_button:not(:disabled):focus {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
.noVNC_button.noVNC_hidden { #noVNC_control_bar .noVNC_button.noVNC_hidden {
display: none !important; display: none !important;
} }