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.
Some elements used grey text and background when disabled, and some used
opacity. It looked a bit old school to make the elements grey when
disabled. Let's use opacity for all input elements when disabled.
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.
Since we are setting "appearance: none" on our <select> elements, the
drop down arrow from the browser is hidden. This arrow doesn't fit in
visually though. This commit adds a new arrow from a simple data url
SVG. Its a dark triangle "pointing" downwards.
Note that we need to set the background to both the gradient and the
image here. Both use the "background-image" property for the graphic,
but since they are positioned differently we must use the general
"background" shorthand.
We depend un such modern things anyway, having these kinds of properties
are more confusing than helpful. Let's not give the impression that we
make any attempt to work in old browsers.
This makes it easier for integrators of vnc.html to write their own
input and button styles.
It's also positive to cut a bit off from the size of the large base.css.
Samuel Mannehed