diff options
| author | Samuel Mannehed <samuel@cendio.se> | 2022-12-13 14:43:03 +0100 |
|---|---|---|
| committer | Samuel Mannehed <samuel@cendio.se> | 2022-12-13 14:43:03 +0100 |
| commit | 98364c3daa554a2d7de600263b18898aeee3d39b (patch) | |
| tree | b5a311dd5fe655fae361469c7f4a6cb7381f0580 | |
| parent | 837cc75a8ccc08df11b173cb691da00fd8ee0a2d (diff) | |
| download | novnc-98364c3daa554a2d7de600263b18898aeee3d39b.tar.gz | |
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.
| -rw-r--r-- | app/styles/input.css | 11 |
1 files changed, 5 insertions, 6 deletions
diff --git a/app/styles/input.css b/app/styles/input.css index d746b76..75fc210 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -20,7 +20,8 @@ input, input::file-selector-button, button, select, textarea { border: 1px solid rgb(192, 192, 192); border-radius: 5px; color: black; - background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240)); + --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240)); + background-image: var(--bg-gradient); } /* @@ -54,8 +55,7 @@ select { stroke="rgb(31,31,31)" fill="none" \ stroke-linecap="round" stroke-linejoin="round" /> \ </svg>'); - background-image: var(--select-arrow), - linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240)); + background-image: var(--select-arrow), var(--bg-gradient); background-position: calc(100% - 7px), left top; background-repeat: no-repeat; padding-right: calc(2*7px + 8px); @@ -244,7 +244,7 @@ textarea: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)); + background-image: var(--bg-gradient); border-bottom-width: 2px; margin-top: 0; } @@ -252,8 +252,7 @@ input[type=file]:disabled { background-image: none; } :root:not(.noVNC_touch) select:disabled { - background-image: var(--select-arrow), - linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240)); + background-image: var(--select-arrow), var(--bg-gradient); } input[type=image]:disabled { /* See Firefox bug: |