Commit Graph

2270 Commits

Author SHA1 Message Date
Samuel Mannehed f983c78d17 Make connect button a regular <button>
It is a button, let the HTML element reflect that. And instead of
having the outer div being clickable, lets only make the inner one
work like a button. Because of that, this commit renames the outer div
to "connect_box" instead of "connect_button".

Note that we remove the disabled :hover-effect for touch on this button.
It doesn't make much difference since this button is one of a kind.
2022-12-14 13:28:27 +01:00
Samuel Mannehed 1ff035c330 Add comment explaining the handle touch area 2022-12-14 11:18:46 +01:00
Samuel Mannehed 333e075d7b Get rid of Chrome's blue touch tap highlight
When tapping our buttons using a touch screen in Chrome, we get an ugly
blue overlay. Let's remove this since we have our own :active styles.
2022-12-13 15:38:25 +01:00
Samuel Mannehed 6e1eec3025 Separate the disabling of :hover for touch
This is a corner case which shouldn't need to complicate things for the
regular usecases.
2022-12-13 15:23:31 +01:00
Samuel Mannehed 98364c3daa Use the same background gradient on all buttons
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.
2022-12-13 14:43:03 +01:00
Samuel Mannehed 837cc75a8c Add FIXME for select:active on Firefox
The :active state is only active in Firefox during the click on the
<select>, not while the dropdown is opened, like in Chrome.
2022-12-13 14:01:24 +01:00
Samuel Mannehed 6a650ade2d
Merge pull request #1729 from novnc/css_cleanup
Add styling for checkboxes and range-sliders
2022-12-12 15:44:17 +01:00
Samuel Mannehed d083ba269e Buttons shouldn't react to clicks when disabled
Counteract the border-width and margin set by :active in the rules for
:disabled buttons.
2022-12-12 15:35:36 +01:00
Samuel Mannehed 69c1d8a1b9 Add section comments to input.css
Makes stuff easier to find.
2022-12-12 15:32:07 +01:00
Samuel Mannehed b676122642 Simplify :focus-visible & :disabled selectors
Since these were the same for all <input> types now, we can omit the
type from the selector.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 9107ae3a10 Share some properties between all input elements
Some properties, like 'font', 'appearance', and 'color' are shared
between all our input elements. Let's reflect that in our rules.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 8c1b6e19c7 Combine rules for buttons in input.css
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.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 3cf2bb9b59 Change arrow direction of active select button
When the select-dropdown is open, let's use an arrow pointing upwards
isntead. Note that we can't easily animate the change in
background-image.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 80897091e0 Put all styling for selected buttons in one place
Let's not have the rules for noVNC_selected spread out.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 36510f7d16 Clarify comment about hover state on touch devices 2022-12-12 15:31:00 +01:00
Samuel Mannehed cc703babcb Remove duplicate opacity for :disable
The control bar buttons can fall back on the :disable opacity from
input.css.
2022-12-12 15:31:00 +01:00
Samuel Mannehed da4f3f30ea Move workaround for Firefox bug to input.css
This applies to all input[type=image]:disabled elements, not only
control bar buttons.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 654066f2c4 Be more specific for control bar button background
Use the more specific background-color, and background-image properties
when setting the state backgrounds for the control bar buttons. This way
we no longer pollute all background related properties. It makes things
easier if we need to replace them in some states in the future.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 4050f0e248 Break out properties for disabled buttons
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.
2022-12-12 15:31:00 +01:00
Samuel Mannehed 629a6cacb9 Add styling for input[type=file] elements
The last remaining input element we didn't have styling for (aside from
input[type=hidden] which can't be shown).
2022-12-12 15:30:02 +01:00
Samuel Mannehed 63528570bc Respect standard font settings for buttons as well
This should not only be done for input, select and textareas.
2022-12-12 14:50:14 +01:00
Samuel Mannehed 80ea7e17ec Add styling for radio buttons
One of the few remaining items we didn't have styling for.
2022-12-12 14:50:14 +01:00
Samuel Mannehed 564a89bcb9 Add small margin to the right of checkboxes
Makes things look less cramped.
2022-12-12 14:50:14 +01:00
Samuel Mannehed a714e1b003 Add small animation for checkboxes
Makes it look quite nice.
2022-12-12 14:50:14 +01:00
Samuel Mannehed fa8ff5e09d Set checkbox size using px rather than em
We don't set other sizes using em, it makes this stand out.
2022-12-12 14:50:14 +01:00
Samuel Mannehed 7519f2d4ad Set a white background-color on checkboxes
Otherwise they appear with the same color as the background, which is
not what we want. They should always be white.
2022-12-12 14:50:14 +01:00
Samuel Mannehed faf921b023 Set background gradients using background-image
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.
2022-12-12 14:50:14 +01:00
Samuel Mannehed 2ff09d6f10 Unify element's :disabled styles to use opacity
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.
2022-12-12 14:50:14 +01:00
Samuel Mannehed 1e500883f6 Move <select>:hover to other hover styles
Lets keep this file organized.
2022-12-12 14:50:14 +01:00
Samuel Mannehed 86adcdd3a3 Reorder selectors alphabetically in input.css 2022-12-12 14:49:52 +01:00
Samuel Mannehed 9c13ea3dd2 Use a outline instead of border for focus-visible
This is the more common way to do it, and allows us to use a offset.
2022-12-07 15:15:07 +01:00
Samuel Mannehed ac6adc61d5 Replace :focus styling with :focus-visible
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.
2022-12-07 15:15:07 +01:00
Samuel Mannehed 8c961ab7c6 Add styling for input[type=range]
This makes them fit in better in our settings GUI, especially when it
comes to coloring.
2022-12-07 15:15:07 +01:00
Samuel Mannehed f820ec86f0 Add styling for checkboxes
This makes them fit in better in our settings GUI, especially when it
comes to coloring.
2022-12-07 14:52:15 +01:00
Samuel Mannehed c43e499357 Include input[type=image] in input.css
There's no real reason this shouldn't be in here, lets include it.
2022-12-07 11:16:06 +01:00
Samuel Mannehed 52178e9381 Set min-height on control bar panel 2022-12-07 08:56:21 +01:00
Samuel Mannehed 2d6302e359 Tone down comment about user-select on container
The issue with the selection prior to the fix can't be reproduced to
the same degree. It may have been some other bug that caused interaction
with the remote to be blocked.
2022-11-17 10:14:30 +01:00
Samuel Mannehed fc5bb6dab6 Add "arrow" to <select> elements
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.
2022-11-17 08:34:50 +01:00
Samuel Mannehed 4a0999a34e Slightly increase the padding on <select> elements
Our select elements look more like buttons than they look like text
inputs, this means we should use slightly larger padding.
2022-11-16 16:46:17 +01:00
Samuel Mannehed f19e328dce Add explanation text to clipboard panel
Hopefully makes it a bit easier to understand what you as a user are
supposed to do with the textarea.
2022-11-14 17:17:01 +01:00
Samuel Mannehed 2825529a13 Add horizontal rule after logo in control bar
This differentiates the logo from the buttons in a clear way.
2022-11-14 17:08:54 +01:00
Samuel Mannehed 0cb5f2341c Fix indentation of comment in CSS 2022-11-11 10:23:10 +01:00
Samuel Mannehed 429a08da89 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".
2022-11-11 10:15:55 +01:00
Pierre Ossman 64d3d60120 Use "npm update" to install dependencies
We don't want to build our npm package, just get our development
dependencies.
2022-11-07 17:24:26 +01:00
Pierre Ossman e674ee4d8e Add translation workflow file
Just to make sure we continuously test that the tools work. This won't
actually update any translations.
2022-11-07 17:23:54 +01:00
Pierre Ossman d9b2606d8c Use latest versions of development dependencies
We thought we already did this in e24b501, but instead we would
basically get random versions as npm would pick some version already
available from whatever was already downloaded.

New attempt, this time being very explicit that we want the version that
has been tagged as "latest".
2022-11-07 17:05:05 +01:00
Pierre Ossman 64ffdc18e0 Merge branch 'busybox' of https://github.com/nggit/noVNC 2022-11-07 16:28:14 +01:00
Pierre Ossman 4cfe0fffcd Merge branch 'manoj/dirs' of https://github.com/msays2000/noVNC 2022-11-07 16:19:12 +01:00
nggit 2dd5600f3d Fix unrecognized option "p" in busybox ps 2022-11-07 21:25:50 +07:00
Samuel Mannehed 081f9d2a13 Disable iOS long-press popup for sidebar images
In order to make the sidebar feel more like a GUI element from a real
application, we can disable the long-press image popup on iOS. Note that
this only has an effect on iOS devices.
2022-11-02 16:38:12 +01:00