Slight UI refresh #1926
Open
Slight UI refresh #1926
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Gives them a more modern and spacious look.
To make stuff feel less cramped, lets add some margin here. As of comitting this, it only affects the logging-level select dropdown in the settings, but this is a general rule of thumb. It doesn't apply to checkboxes or radios since they have a margin by default, and their label to the left.
|
Note that the failed check from https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter Unsure if we want to add an exception to |
|
Could we get some before/after pictures? :) |
samhed
force-pushed
the
ui_refresh
branch
2 times, most recently
from
b90a218 to
70b72d3
Compare
samhed
force-pushed
the
ui_refresh
branch
2 times, most recently
from
9f135b6 to
996ce72
Compare
Connect button before: Auth dialog before: Settings before: |
Added exceptions in b747069 |
|
Let's try to get this merged before a 1.6.0 release |
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.
Lets make things more flat and modern.
By making buttons grey with bold text, they are easy to distinguish from text inputs.
Makes it more of a "V"-shape rather than a triangle, suits better in the new spacier select-buttons.
Makes them bigger and gets rid of their borders. The change also allowed for some shared styling between them.
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.
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.
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.
It makes more sense to group rules per element type.
Start with general stuff, followed by specific things.
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.
Makes them easier to distinguish from regular comments.
By moving the CSS for select buttons to the bottom, we keep a more logical ordering of the elements.
By having the focus-visible outline overlapping the regular border things look a bit more sane on text input elements.
We can't style them, and they don't fit the noVNC CSS style - we are better off without them.
This ensures they aren't too small, even if the text label is short.
This makes buttons and slider stand out more.
Note that no color picker elements are currently in use, this is for completeness.
Modern interfaces are less cramped, this makes noVNC feel more up to date. Note that this required some adjustments on noVNC_headings and noVNC_connect_button since the text now takes up more height than the images.
These are a type of checkbox that is suitable for ON/OFF-type switches.
These settings are well suited to use toggle switches. This makes these settings more approachable and user-friendly.
This is a type of select box that doesn't appear like a button, but more like a textarea that lists options. It is not currently used, but added for completeness.
Fits better with the new slightly rounded and spacious style. The track was made slightly thicker to ensure proper centering of the new thumb.
Makes it easier to envision the value is selected.
Makes the heading pop a bit more in the new airier layout.
Dialogs have had text inputs and buttons cramped together without space between, this fixes that.
Make the color contrast with the background and the button more rounded. The goal is to make the button stand out.
Both labels and inputs protruded outside the panel on for example a phone in portrait mode. This commit fixes that by allowing wrapping and setting a max-width. Since the --input-xpadding variable is now used in two different CSS files, it was moved to constants.css.
Some new CSS incorrectly give errors from validator.w3.org. Issues were opened in that repo, so hopefully we can remove these exceptions soon. I searched for alternative validators, but couldn't find a different one that had a simple API like this one. In order to reliably detect & handle these exceptions we unfortunately need to make the validator output parsing quite a bit more complicated.
A very slight change to the background color, to make the contrast better with the light-grey input elements.
|
I noticed that the color was wrong for the range slider track, that was also fixed in 8800923. The track now matches the other input's better. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR mainly includes a refreshed input.css:
But also a few changes to base.css & vnc.html: