From 86adcdd3a3a838b189c3f7785bed91fcc9a63c44 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 10:56:05 +0100
Subject: [PATCH 01/23] Reorder selectors alphabetically in input.css

---
 app/styles/input.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index 51990bcf..0b68cd22 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -153,14 +153,16 @@ input[type=range]::-moz-range-thumb {
 
 input:not([type]):focus-visible,
 input[type=button]:focus-visible,
+input[type=checkbox]:focus-visible,
 input[type=color]:focus-visible,
-input[type=image]:focus-visible,
 input[type=date]:focus-visible,
 input[type=datetime-local]:focus-visible,
 input[type=email]:focus-visible,
+input[type=image]:focus-visible,
 input[type=month]:focus-visible,
 input[type=number]:focus-visible,
 input[type=password]:focus-visible,
+input[type=range]:focus-visible,
 input[type=reset]:focus-visible,
 input[type=search]:focus-visible,
 input[type=submit]:focus-visible,
@@ -169,8 +171,6 @@ input[type=text]:focus-visible,
 input[type=time]:focus-visible,
 input[type=url]:focus-visible,
 input[type=week]:focus-visible,
-input[type=checkbox]:focus-visible,
-input[type=range]:focus-visible,
 button:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
@@ -181,10 +181,10 @@ textarea:focus-visible {
 input:not([type]):disabled,
 input[type=button]:disabled,
 input[type=color]:disabled,
-input[type=image]:disabled,
 input[type=date]:disabled,
 input[type=datetime-local]:disabled,
 input[type=email]:disabled,
+input[type=image]:disabled,
 input[type=month]:disabled,
 input[type=number]:disabled,
 input[type=password]:disabled,

From 1e500883f63277f3c7debd7b10146e5a992c4913 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Thu, 8 Dec 2022 12:29:45 +0100
Subject: [PATCH 02/23] Move <select>:hover to other hover styles

Lets keep this file organized.
---
 app/styles/input.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index 0b68cd22..ab54289f 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -79,10 +79,6 @@ select {
   padding-right: calc(2*7px + 8px);
   padding-left: 7px;
 }
-:root:not(.noVNC_touch) select:hover:not(:disabled) {
-  background: var(--select-arrow),
-              linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
-}
 
 option {
   color: black;
@@ -226,3 +222,7 @@ select:active {
 :root:not(.noVNC_touch) button:hover:not(:disabled) {
   background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }
+:root:not(.noVNC_touch) select:hover:not(:disabled) {
+  background: var(--select-arrow),
+              linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+}

From 2ff09d6f104d560d4aa9c8077a804c0224cfef0a Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 11:27:16 +0100
Subject: [PATCH 03/23] 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.
---
 app/styles/input.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index ab54289f..d8d9067d 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -176,6 +176,7 @@ textarea:focus-visible {
 
 input:not([type]):disabled,
 input[type=button]:disabled,
+input[type=checkbox]:disabled,
 input[type=color]:disabled,
 input[type=date]:disabled,
 input[type=datetime-local]:disabled,
@@ -184,6 +185,7 @@ input[type=image]:disabled,
 input[type=month]:disabled,
 input[type=number]:disabled,
 input[type=password]:disabled,
+input[type=range]:disabled,
 input[type=reset]:disabled,
 input[type=search]:disabled,
 input[type=submit]:disabled,
@@ -195,11 +197,6 @@ input[type=week]:disabled,
 button:disabled,
 select:disabled,
 textarea:disabled {
-  color: rgb(128, 128, 128);
-  background: rgb(240, 240, 240);
-}
-input[type=checkbox]:disabled,
-input[type=range]:disabled {
   opacity: 0.4;
 }
 

From faf921b02383766046750ac99fda0a494b9dd374 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 12:30:53 +0100
Subject: [PATCH 04/23] 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.
---
 app/styles/input.css | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index d8d9067d..35653ea8 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -32,7 +32,7 @@ textarea {
   border: 1px solid rgb(192, 192, 192);
   border-radius: 5px;
   color: black;
-  background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
 }
 
 input[type=button],
@@ -51,7 +51,7 @@ select {
   border-bottom-width: 2px;
   border-radius: 5px;
   color: black;
-  background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
@@ -67,15 +67,17 @@ button {
 }
 
 select {
-  --select-arrow: calc(100% - 7px) no-repeat url('data:image/svg+xml;utf8, \
+  --select-arrow: url('data:image/svg+xml;utf8, \
       <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
            xmlns="http://www.w3.org/2000/svg"> \
           <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
                 stroke="rgb(31,31,31)" fill="none" \
                 stroke-linecap="round" stroke-linejoin="round" /> \
       </svg>');
-  background: var(--select-arrow),
-              linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: var(--select-arrow),
+    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-position: calc(100% - 7px), left top;
+  background-repeat: no-repeat;
   padding-right: calc(2*7px + 8px);
   padding-left: 7px;
 }
@@ -217,9 +219,11 @@ select:active {
 :root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
 :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
 :root:not(.noVNC_touch) button:hover:not(:disabled) {
-  background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }
 :root:not(.noVNC_touch) select:hover:not(:disabled) {
-  background: var(--select-arrow),
-              linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+  background-image: var(--select-arrow),
+    linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+  background-position: calc(100% - 7px), left top;
+  background-repeat: no-repeat;
 }

From 7519f2d4adae6023147eb8cd5ba71d241d015a6d Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 12:43:30 +0100
Subject: [PATCH 05/23] 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.
---
 app/styles/input.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index 35653ea8..59bd111b 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -90,6 +90,7 @@ option {
 input[type=checkbox] {
   position: relative;
   appearance: none;
+  background-color: white;
   border: 1px solid dimgrey;
   border-radius: 3px;
   width: 0.8em;

From fa8ff5e09d6132c7167ea47d8e2f17894d3903cd Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 14:07:33 +0100
Subject: [PATCH 06/23] Set checkbox size using px rather than em

We don't set other sizes using em, it makes this stand out.
---
 app/styles/input.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index 59bd111b..98ec26c3 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -93,8 +93,8 @@ input[type=checkbox] {
   background-color: white;
   border: 1px solid dimgrey;
   border-radius: 3px;
-  width: 0.8em;
-  height: 0.8em;
+  width: 13px;
+  height: 13px;
   vertical-align: bottom;
 }
 input[type=checkbox]:checked {

From a714e1b003aca76caf6eb069e9839c516e0afb49 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 14:09:09 +0100
Subject: [PATCH 07/23] Add small animation for checkboxes

Makes it look quite nice.
---
 app/styles/input.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index 98ec26c3..81f4700f 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -96,6 +96,7 @@ input[type=checkbox] {
   width: 13px;
   height: 13px;
   vertical-align: bottom;
+  transition: 0.2s background-color linear;
 }
 input[type=checkbox]:checked {
   background-color: rgb(110, 132, 163);

From 564a89bcb96f1595730723f3e622f1e09a01d64e Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 14:19:00 +0100
Subject: [PATCH 08/23] Add small margin to the right of checkboxes

Makes things look less cramped.
---
 app/styles/input.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index 81f4700f..d3e1216d 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -95,6 +95,7 @@ input[type=checkbox] {
   border-radius: 3px;
   width: 13px;
   height: 13px;
+  margin-right: 6px;
   vertical-align: bottom;
   transition: 0.2s background-color linear;
 }

From 80ea7e17ecafc2d484507ce912e8bec4a24644ee Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 14:15:09 +0100
Subject: [PATCH 09/23] Add styling for radio buttons

One of the few remaining items we didn't have styling for.
---
 app/styles/input.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index d3e1216d..be151109 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -115,6 +115,19 @@ input[type=checkbox]:checked::after {
   transform: rotate(40deg);
 }
 
+input[type=radio] {
+  border-radius: 50%;
+  border: 1px solid dimgrey;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin-right: 6px;
+  transition: 0.2s border linear;
+}
+input[type=radio]:checked {
+  border: 6px solid rgb(110, 132, 163);
+}
+
 input[type=range] {
   appearance: none;
   border-radius: 3px;
@@ -163,6 +176,7 @@ input[type=image]:focus-visible,
 input[type=month]:focus-visible,
 input[type=number]:focus-visible,
 input[type=password]:focus-visible,
+input[type=radio]:focus-visible,
 input[type=range]:focus-visible,
 input[type=reset]:focus-visible,
 input[type=search]:focus-visible,
@@ -190,6 +204,7 @@ input[type=image]:disabled,
 input[type=month]:disabled,
 input[type=number]:disabled,
 input[type=password]:disabled,
+input[type=radio]:disabled,
 input[type=range]:disabled,
 input[type=reset]:disabled,
 input[type=search]:disabled,

From 63528570bc2c7051e8384d43f16b8c737b067788 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 12:47:06 +0100
Subject: [PATCH 10/23] Respect standard font settings for buttons as well

This should not only be done for input, select and textareas.
---
 app/styles/input.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index be151109..f6cdbd21 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -5,7 +5,7 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-input, select, textarea {
+input, button, select, textarea {
   /* Respect standard font settings */
   font: inherit;
 }

From 629a6cacb9ed74bf615c507c23235dc036a49427 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 15:57:16 +0100
Subject: [PATCH 11/23] 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).
---
 app/styles/input.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index f6cdbd21..ad5345c7 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -5,7 +5,7 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-input, button, select, textarea {
+input, input::file-selector-button, button, select, textarea {
   /* Respect standard font settings */
   font: inherit;
 }
@@ -40,6 +40,7 @@ input[type=color],
 input[type=image],
 input[type=reset],
 input[type=submit],
+input::file-selector-button,
 button,
 select {
   /* Disable default rendering */
@@ -61,6 +62,7 @@ input[type=button],
 input[type=color],
 input[type=reset],
 input[type=submit],
+input::file-selector-button,
 button {
   padding-left: 20px;
   padding-right: 20px;
@@ -165,6 +167,14 @@ input[type=range]::-moz-range-thumb {
   margin-top: -7px;
 }
 
+input[type=file] {
+  background-image: none;
+  border: none;
+}
+input::file-selector-button {
+  margin-right: 6px;
+}
+
 input:not([type]):focus-visible,
 input[type=button]:focus-visible,
 input[type=checkbox]:focus-visible,
@@ -186,12 +196,16 @@ input[type=text]:focus-visible,
 input[type=time]:focus-visible,
 input[type=url]:focus-visible,
 input[type=week]:focus-visible,
+input:focus-visible::file-selector-button,
 button:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
   outline: 2px solid rgb(74, 144, 217);
   outline-offset: 1px;
 }
+input[type=file]:focus-visible {
+  outline: none; /* We outline the button instead of the entire element */
+}
 
 input:not([type]):disabled,
 input[type=button]:disabled,
@@ -200,6 +214,7 @@ input[type=color]:disabled,
 input[type=date]:disabled,
 input[type=datetime-local]:disabled,
 input[type=email]:disabled,
+input[type=file]:disabled,
 input[type=image]:disabled,
 input[type=month]:disabled,
 input[type=number]:disabled,
@@ -214,6 +229,7 @@ input[type=text]:disabled,
 input[type=time]:disabled,
 input[type=url]:disabled,
 input[type=week]:disabled,
+input:disabled::file-selector-button,
 button:disabled,
 select:disabled,
 textarea:disabled {
@@ -225,6 +241,7 @@ input[type=color]:active,
 input[type=image]:active,
 input[type=reset]:active,
 input[type=submit]:active,
+input::file-selector-button:active,
 button:active,
 select:active {
   border-bottom-width: 1px;
@@ -236,6 +253,7 @@ select:active {
 :root:not(.noVNC_touch) input[type=image]:hover:not(:disabled),
 :root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
 :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
+:root:not(.noVNC_touch) input::file-selector-button:hover:not(:disabled),
 :root:not(.noVNC_touch) button:hover:not(:disabled) {
   background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }

From 4050f0e248981418eb5ab26acebaba5105c812e9 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 16:15:52 +0100
Subject: [PATCH 12/23] 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.
---
 app/styles/input.css | 65 ++++++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index ad5345c7..f0905776 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -175,6 +175,34 @@ input::file-selector-button {
   margin-right: 6px;
 }
 
+:root:not(.noVNC_touch) input[type=button]:hover,
+:root:not(.noVNC_touch) input[type=color]:hover,
+:root:not(.noVNC_touch) input[type=image]:hover,
+:root:not(.noVNC_touch) input[type=reset]:hover,
+:root:not(.noVNC_touch) input[type=submit]:hover,
+:root:not(.noVNC_touch) input::file-selector-button:hover,
+:root:not(.noVNC_touch) button:hover {
+  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+}
+:root:not(.noVNC_touch) select:hover {
+  background-image: var(--select-arrow),
+    linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+  background-position: calc(100% - 7px), left top;
+  background-repeat: no-repeat;
+}
+
+input[type=button]:active,
+input[type=color]:active,
+input[type=image]:active,
+input[type=reset]:active,
+input[type=submit]:active,
+input::file-selector-button:active,
+button:active,
+select:active {
+  border-bottom-width: 1px;
+  margin-top: 1px;
+}
+
 input:not([type]):focus-visible,
 input[type=button]:focus-visible,
 input[type=checkbox]:focus-visible,
@@ -235,31 +263,20 @@ select:disabled,
 textarea:disabled {
   opacity: 0.4;
 }
-
-input[type=button]:active,
-input[type=color]:active,
-input[type=image]:active,
-input[type=reset]:active,
-input[type=submit]:active,
-input::file-selector-button:active,
-button:active,
-select:active {
-  border-bottom-width: 1px;
-  margin-top: 1px;
+:root:not(.noVNC_touch) input[type=button]:disabled,
+:root:not(.noVNC_touch) input[type=color]:disabled,
+:root:not(.noVNC_touch) input[type=image]:disabled,
+:root:not(.noVNC_touch) input[type=reset]:disabled,
+:root:not(.noVNC_touch) input[type=submit]:disabled,
+:root:not(.noVNC_touch) input:disabled::file-selector-button,
+:root:not(.noVNC_touch) button:disabled,
+:root:not(.noVNC_touch) select:disabled {
+  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 }
-
-:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled),
-:root:not(.noVNC_touch) input[type=color]:hover:not(:disabled),
-:root:not(.noVNC_touch) input[type=image]:hover:not(:disabled),
-:root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
-:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
-:root:not(.noVNC_touch) input::file-selector-button:hover:not(:disabled),
-:root:not(.noVNC_touch) button:hover:not(:disabled) {
-  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+input[type=file]:disabled {
+  background-image: none;
 }
-:root:not(.noVNC_touch) select:hover:not(:disabled) {
+:root:not(.noVNC_touch) select:disabled {
   background-image: var(--select-arrow),
-    linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
-  background-position: calc(100% - 7px), left top;
-  background-repeat: no-repeat;
+    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 }

From 654066f2c49ad664470ac973e9307ddd43247ce0 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 16:22:36 +0100
Subject: [PATCH 13/23] 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.
---
 app/styles/base.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index df0daf0d..a55ca612 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -389,11 +389,11 @@ html {
   vertical-align: middle;
   border:1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
-  background: 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: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 #noVNC_control_bar .noVNC_button:disabled {
   opacity: 0.4;
@@ -409,10 +409,10 @@ html {
  * intercepted */
 :root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
   border-color: rgba(0, 0, 0, 0.4);
-  background: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 :root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button:not(:disabled):hover {
-  background: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 #noVNC_control_bar .noVNC_button.noVNC_hidden {
   display: none !important;

From da4f3f30ea882b44022efbdb1b6536e11f363a2b Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 16:35:41 +0100
Subject: [PATCH 14/23] Move workaround for Firefox bug to input.css

This applies to all input[type=image]:disabled elements, not only
control bar buttons.
---
 app/styles/base.css  | 3 ---
 app/styles/input.css | 5 +++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index a55ca612..1bf80649 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -397,9 +397,6 @@ html {
 }
 #noVNC_control_bar .noVNC_button:disabled {
   opacity: 0.4;
-  /* See firefox bug regarding cursor on disabled <input type="image">:
-     https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
-  cursor: default;
 }
 #noVNC_control_bar .noVNC_button:not(:disabled):active {
   padding-top: 5px;
diff --git a/app/styles/input.css b/app/styles/input.css
index f0905776..cc4087cd 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -280,3 +280,8 @@ input[type=file]:disabled {
   background-image: var(--select-arrow),
     linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 }
+input[type=image]:disabled {
+  /* See Firefox bug:
+     https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
+  cursor: default;
+}

From cc703babcb1472d23239fe16a7e8213b4870aed8 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 9 Dec 2022 16:54:07 +0100
Subject: [PATCH 15/23] Remove duplicate opacity for :disable

The control bar buttons can fall back on the :disable opacity from
input.css.
---
 app/styles/base.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 1bf80649..986a6a5f 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -395,9 +395,6 @@ html {
   border-color: rgba(0, 0, 0, 0.8);
   background-color: rgba(0, 0, 0, 0.5);
 }
-#noVNC_control_bar .noVNC_button:disabled {
-  opacity: 0.4;
-}
 #noVNC_control_bar .noVNC_button:not(:disabled):active {
   padding-top: 5px;
   padding-bottom: 3px;

From 36510f7d1678e4fb29a1a018a67843896bed1e1a Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 10:45:44 +0100
Subject: [PATCH 16/23] Clarify comment about hover state on touch devices

---
 app/styles/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 986a6a5f..f042dfcd 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -400,7 +400,7 @@ html {
   padding-bottom: 3px;
 }
 /* Android browsers don't properly update hover state if touch events are
- * intercepted */
+ * intercepted, like they are when clicking on the remote screen. */
 :root:not(.noVNC_touch) #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);

From 80897091e08f94661370396de936ba91655da870 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 10:46:54 +0100
Subject: [PATCH 17/23] Put all styling for selected buttons in one place

Let's not have the rules for noVNC_selected spread out.
---
 app/styles/base.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index f042dfcd..408da277 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -395,10 +395,6 @@ html {
   border-color: rgba(0, 0, 0, 0.8);
   background-color: rgba(0, 0, 0, 0.5);
 }
-#noVNC_control_bar .noVNC_button:not(:disabled):active {
-  padding-top: 5px;
-  padding-bottom: 3px;
-}
 /* Android browsers don't properly update hover state if touch events are
  * intercepted, like they are when clicking on the remote screen. */
 :root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
@@ -408,6 +404,10 @@ html {
 :root:not(.noVNC_touch) #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;
 }

From 3cf2bb9b5938fe61a7914704bbcd354a4eaa956c Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 13:54:30 +0100
Subject: [PATCH 18/23] 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.
---
 app/styles/input.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index cc4087cd..8ea38c2b 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -83,7 +83,16 @@ select {
   padding-right: calc(2*7px + 8px);
   padding-left: 7px;
 }
-
+select:active {
+  /* Rotated arrow */
+  --select-arrow: url('data:image/svg+xml;utf8, \
+      <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
+           xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \
+          <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
+                stroke="rgb(31,31,31)" fill="none" \
+                stroke-linecap="round" stroke-linejoin="round" /> \
+      </svg>');
+}
 option {
   color: black;
   background: white;

From 8c1b6e19c781ea5265aec335ad134584f29402a5 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 14:40:08 +0100
Subject: [PATCH 19/23] 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.
---
 app/styles/input.css | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index 8ea38c2b..5985b175 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -47,7 +47,6 @@ select {
   appearance: none;
   background: none;
 
-  padding: 5px;
   border: 1px solid rgb(192, 192, 192);
   border-bottom-width: 2px;
   border-radius: 5px;
@@ -56,14 +55,8 @@ select {
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
-}
 
-input[type=button],
-input[type=color],
-input[type=reset],
-input[type=submit],
-input::file-selector-button,
-button {
+  padding: 5px;
   padding-left: 20px;
   padding-right: 20px;
 }

From 9107ae3a102ee2e3f57dd2d4d4ea1971f2bd8d14 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 15:00:18 +0100
Subject: [PATCH 20/23] 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.
---
 app/styles/input.css | 29 +++--------------------------
 1 file changed, 3 insertions(+), 26 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index 5985b175..faac8747 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -8,22 +8,7 @@
 input, input::file-selector-button, button, select, textarea {
   /* Respect standard font settings */
   font: inherit;
-}
 
-input:not([type]),
-input[type=date],
-input[type=datetime-local],
-input[type=email],
-input[type=month],
-input[type=number],
-input[type=password],
-input[type=search],
-input[type=tel],
-input[type=text],
-input[type=time],
-input[type=url],
-input[type=week],
-textarea {
   /* Disable default rendering */
   appearance: none;
   background: none;
@@ -43,20 +28,11 @@ input[type=submit],
 input::file-selector-button,
 button,
 select {
-  /* Disable default rendering */
-  appearance: none;
-  background: none;
-
-  border: 1px solid rgb(192, 192, 192);
   border-bottom-width: 2px;
-  border-radius: 5px;
-  color: black;
-  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 
-  padding: 5px;
   padding-left: 20px;
   padding-right: 20px;
 }
@@ -93,8 +69,8 @@ option {
 
 input[type=checkbox] {
   position: relative;
-  appearance: none;
   background-color: white;
+  background-image: unset;
   border: 1px solid dimgrey;
   border-radius: 3px;
   width: 13px;
@@ -133,9 +109,10 @@ input[type=radio]:checked {
 }
 
 input[type=range] {
-  appearance: none;
+  border: unset;
   border-radius: 3px;
   height: 20px;
+  padding: 0;
   background: transparent;
 }
 /* -webkit-slider.. & -moz-range.. cant be in selector lists:

From b676122642bcc0c1cacdcf620e01412eb1b2ecae Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 15:26:42 +0100
Subject: [PATCH 21/23] Simplify :focus-visible & :disabled selectors

Since these were the same for all <input> types now, we can omit the
type from the selector.
---
 app/styles/input.css | 45 ++------------------------------------------
 1 file changed, 2 insertions(+), 43 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index faac8747..8bb2f992 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -182,27 +182,7 @@ select:active {
   margin-top: 1px;
 }
 
-input:not([type]):focus-visible,
-input[type=button]:focus-visible,
-input[type=checkbox]:focus-visible,
-input[type=color]:focus-visible,
-input[type=date]:focus-visible,
-input[type=datetime-local]:focus-visible,
-input[type=email]:focus-visible,
-input[type=image]:focus-visible,
-input[type=month]:focus-visible,
-input[type=number]:focus-visible,
-input[type=password]:focus-visible,
-input[type=radio]:focus-visible,
-input[type=range]:focus-visible,
-input[type=reset]:focus-visible,
-input[type=search]:focus-visible,
-input[type=submit]:focus-visible,
-input[type=tel]:focus-visible,
-input[type=text]:focus-visible,
-input[type=time]:focus-visible,
-input[type=url]:focus-visible,
-input[type=week]:focus-visible,
+input:focus-visible,
 input:focus-visible::file-selector-button,
 button:focus-visible,
 select:focus-visible,
@@ -214,28 +194,7 @@ input[type=file]:focus-visible {
   outline: none; /* We outline the button instead of the entire element */
 }
 
-input:not([type]):disabled,
-input[type=button]:disabled,
-input[type=checkbox]:disabled,
-input[type=color]:disabled,
-input[type=date]:disabled,
-input[type=datetime-local]:disabled,
-input[type=email]:disabled,
-input[type=file]:disabled,
-input[type=image]:disabled,
-input[type=month]:disabled,
-input[type=number]:disabled,
-input[type=password]:disabled,
-input[type=radio]:disabled,
-input[type=range]:disabled,
-input[type=reset]:disabled,
-input[type=search]:disabled,
-input[type=submit]:disabled,
-input[type=tel]:disabled,
-input[type=text]:disabled,
-input[type=time]:disabled,
-input[type=url]:disabled,
-input[type=week]:disabled,
+input:disabled,
 input:disabled::file-selector-button,
 button:disabled,
 select:disabled,

From 69c1d8a1b961cc5bde80514d62c07e1c44bc1320 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 15:32:07 +0100
Subject: [PATCH 22/23] Add section comments to input.css

Makes stuff easier to find.
---
 app/styles/input.css | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index 8bb2f992..c30af88e 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -5,6 +5,9 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
+/*
+ * Common for all inputs
+ */
 input, input::file-selector-button, button, select, textarea {
   /* Respect standard font settings */
   font: inherit;
@@ -20,6 +23,9 @@ input, input::file-selector-button, button, select, textarea {
   background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
 }
 
+/*
+ * Buttons
+ */
 input[type=button],
 input[type=color],
 input[type=image],
@@ -37,6 +43,9 @@ select {
   padding-right: 20px;
 }
 
+/*
+ * Select dropdowns
+ */
 select {
   --select-arrow: url('data:image/svg+xml;utf8, \
       <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
@@ -67,6 +76,9 @@ option {
   background: white;
 }
 
+/*
+ * Checkboxes
+ */
 input[type=checkbox] {
   position: relative;
   background-color: white;
@@ -95,6 +107,9 @@ input[type=checkbox]:checked::after {
   transform: rotate(40deg);
 }
 
+/*
+ * Radiobuttons
+ */
 input[type=radio] {
   border-radius: 50%;
   border: 1px solid dimgrey;
@@ -108,6 +123,9 @@ input[type=radio]:checked {
   border: 6px solid rgb(110, 132, 163);
 }
 
+/*
+ * Range sliders
+ */
 input[type=range] {
   border: unset;
   border-radius: 3px;
@@ -146,6 +164,9 @@ input[type=range]::-moz-range-thumb {
   margin-top: -7px;
 }
 
+/*
+ * File choosers
+ */
 input[type=file] {
   background-image: none;
   border: none;
@@ -154,6 +175,9 @@ input::file-selector-button {
   margin-right: 6px;
 }
 
+/*
+ * Hover
+ */
 :root:not(.noVNC_touch) input[type=button]:hover,
 :root:not(.noVNC_touch) input[type=color]:hover,
 :root:not(.noVNC_touch) input[type=image]:hover,
@@ -170,6 +194,9 @@ input::file-selector-button {
   background-repeat: no-repeat;
 }
 
+/*
+ * Active (clicked)
+ */
 input[type=button]:active,
 input[type=color]:active,
 input[type=image]:active,
@@ -182,6 +209,9 @@ select:active {
   margin-top: 1px;
 }
 
+/*
+ * Focus (tab)
+ */
 input:focus-visible,
 input:focus-visible::file-selector-button,
 button:focus-visible,
@@ -194,6 +224,9 @@ input[type=file]:focus-visible {
   outline: none; /* We outline the button instead of the entire element */
 }
 
+/*
+ * Disabled
+ */
 input:disabled,
 input:disabled::file-selector-button,
 button:disabled,

From d083ba269eea3e9ff9cd13d48c90f6062d86ca13 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 12 Dec 2022 15:35:36 +0100
Subject: [PATCH 23/23] Buttons shouldn't react to clicks when disabled

Counteract the border-width and margin set by :active in the rules for
:disabled buttons.
---
 app/styles/input.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index c30af88e..1bc4a789 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -243,6 +243,8 @@ textarea:disabled {
 :root:not(.noVNC_touch) button:disabled,
 :root:not(.noVNC_touch) select:disabled {
   background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  border-bottom-width: 2px;
+  margin-top: 0;
 }
 input[type=file]:disabled {
   background-image: none;