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

Rework how buttons react to :hover and :active

Browse Source 
Instead of having two different types of effects (hover had a different
color, and active had a 3d-effect simulating a pressed button), we now
have an increasing activation-level. That means the button goes a bit
dark for hover, and then even darker when pressed.

There is also a variant that goes lighter for each activation level,
that can be used when the initial color is dark.

With this change, we can get rid of special :hover and :active styling
for the connect button and the control bar buttons. We can use the same
activation level principle for all buttons.
This commit is contained in:
Samuel Mannehed
2025-01-12 02:29:26 +01:00
parent 7fdcc66d2c
commit 017888c9a8
2 changed files with 85 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/styles/base.css
View File

@@ -392,40 +392,15 @@ html {
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);
}
#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);
}
#noVNC_control_bar .noVNC_button:not(:disabled):hover {
background-color: rgba(255, 255, 255, 0.2);
}
#noVNC_control_bar .noVNC_button:not(:disabled):active {
padding-top: 5px;
padding-bottom: 3px;
}
#noVNC_control_bar .noVNC_button.noVNC_hidden {
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. */
@media (any-pointer: coarse) {
#noVNC_control_bar .noVNC_button:not(:disabled):hover {
background-color: transparent;
}
#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);
@@ -763,12 +738,6 @@ html {
background-color: var(--novnc-blue);
color: white;
/* This avoids it jumping around when :active */
vertical-align: middle;
}
#noVNC_connect_button:hover {
background-color: var(--novnc-darkblue);
}
#noVNC_connect_button img {