Note that the :disabled selector only works on inputs, buttons and the
like.
The current method of applying .noVNC_disabled to the settings
labels is still used. This support is added mostly for completeness.
Note that when a label wraps an input, only the label should have the
disabled attribute. Otherwise the effect applies twice to the input.
By applying the rule to the button within the input, we effectively
applied the opacity twice - making the button almost disappear. Applying
the opacity to the input element is enough.
Gives a more clean look that fits well with the new checkboxes and
radios. The old border was mostly used to contribute to a 3d-effect,
that was used for :active. That :active-styling has been replaced by
activation levels.
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 results in a few things becoming slighly more rounded, for example
the controlbar, the settings panel and buttons/inputs. Increased
rounding gives a more friendly feel.
This is what we use in every other file in noVNC. It also much more
common for a CSS file in general. By standardizing on 4 spaces we can
avoid indentation mistakes.
Try to be more consistent in how we capitalize things. Both the "Title
Case" and "Sentence case" styles are popular, so either would work.
Google and Mozilla both prefer "Sentence case", so let's follow them.
Changing the ::after element to be displayed as 'block' lets it be
positioned using relative. This means we can remove the confusing
"position: relative" from the checkbox.
This commit removes our dependency on the class "noVNC_touch" which was
set by Javascript. Instead, we can use the CSS media query
"any-pointer: coarse", which means that any pointing device that isn't
accurate is available. In practice this seems to basically be equal to
that a touch screen is available.
This change lets us simplify the selectors in many cases as well, which
is a nice bonus.
We can't just modify the CSS variable here, since that is also used in
the style for :disabled. We need to change the entire "background-image"
in order for :disabled to be able to override it.
Before, we have had two different gradiant versions, one where the two
colors meet in the middle, and one where only the top part of the
element was the darker shade. This was easily missed. Let's standardize
on the latter alternative. This commit introduces a variable to make it
easier.
It was completely unnecessary that these two were separate, lets combine
them. The only difference was that the lower rule didn't apply for
<select>. That doesn't matter though, since padding-left and
padding-right are specifically set for <select> elements anyway.
Instead of marking the hover selector with ":not(:disabled)" we can
break out this into its own section. This makes things easier to read.
In order to ensure the correct selector prioritization we also reorder
the file a bit.
Use the more specific background-image property when setting
linear-gradient backgrounds for input elements. This way we no longer
pollute all background related properties. It makes things easier if we
need to replace it in some states in the future.
Samuel Mannehed
Pierre Ossman