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