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] 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));
 }