jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Differentiate buttons from text inputs 

By making buttons grey with bold text, they are easy to distinguish from
text inputs.
This commit is contained in:
Samuel Mannehed 2025-01-12 01:37:19 +01:00
parent e9b48ae409
commit 3f29c9d993
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/styles/constants.css
View File

@ -12,6 +12,9 @@
--novnc-lightgrey: rgb(192, 192, 192); --novnc-lightgrey: rgb(192, 192, 192);
--novnc-darkgrey: rgb(92, 92, 92); --novnc-darkgrey: rgb(92, 92, 92);
/* Transparent to make button colors adapt to the background */
--novnc-buttongrey: rgba(192, 192, 192, 0.5);
--novnc-blue: rgb(110, 132, 163); --novnc-blue: rgb(110, 132, 163);
--novnc-lightblue: rgb(74, 144, 217); --novnc-lightblue: rgb(74, 144, 217);
--novnc-darkblue: rgb(83, 99, 122); --novnc-darkblue: rgb(83, 99, 122);

34
app/styles/input.css
View File

@ -41,7 +41,8 @@ select {
vertical-align: middle; vertical-align: middle;
margin-top: 0; margin-top: 0;
color: black; color: black;
background-color: white; font-weight: bold;
background-color: var(--novnc-buttongrey);
/* Disable Chrome's touch tap highlight */ /* Disable Chrome's touch tap highlight */
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -58,8 +59,18 @@ select {
stroke="rgb(31,31,31)" fill="none" \ stroke="rgb(31,31,31)" fill="none" \
stroke-linecap="round" stroke-linejoin="round" /> \ stroke-linecap="round" stroke-linejoin="round" /> \
</svg>'); </svg>');
/* FIXME: A bug in Firefox, requires a workaround for the background:
https://bugzilla.mozilla.org/show_bug.cgi?id=1810958 */
/* The dropdown list will show the select element's background above and
below the options in Firefox. We want the entire dropdown to be white. */
background-color: white; background-color: white;
background-image: var(--select-arrow); /* However, we don't want the select element to actually show a white
background, so let's place a gradient above it with the color we want. */
--grey-background: linear-gradient(var(--novnc-buttongrey) 100%,
transparent);
background-image:
var(--select-arrow),
var(--grey-background);
background-position: calc(100% - var(--input-xpadding)), left top, left top; background-position: calc(100% - var(--input-xpadding)), left top, left top;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: calc(2*var(--input-xpadding) + 8px); padding-right: calc(2*var(--input-xpadding) + 8px);
@ -74,11 +85,14 @@ select:active {
<path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \ <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="rgb(31,31,31)" fill="none" \
stroke-linecap="round" stroke-linejoin="round" /> \ stroke-linecap="round" stroke-linejoin="round" /> \
</svg>'); </svg>'),
var(--grey-background);
} }
option { option {
/* Prevent Chrome from inheriting background-color from the <select> */
background-color: white;
color: black; color: black;
background: white; font-weight: normal;
} }
/* /*
@ -208,10 +222,12 @@ select:hover {
input[type=submit]:hover, input[type=submit]:hover,
input::file-selector-button:hover, input::file-selector-button:hover,
button:hover { button:hover {
background-color: white; background-color: var(--novnc-buttongrey);
} }
select:hover { select:hover {
background-image: var(--select-arrow); background-image:
var(--select-arrow),
var(--grey-background);
} }
} }
@ -263,7 +279,7 @@ input[type=submit]:disabled,
input:disabled::file-selector-button, input:disabled::file-selector-button,
button:disabled, button:disabled,
select:disabled { select:disabled {
background-color: white; background-color: var(--novnc-buttongrey);
border-bottom-width: 2px; border-bottom-width: 2px;
margin-top: 0; margin-top: 0;
} }
@ -271,7 +287,9 @@ input[type=file]:disabled {
background-image: none; background-image: none;
} }
select:disabled { select:disabled {
background-image: var(--select-arrow), background-image:
var(--select-arrow),
var(--grey-background);
} }
input[type=image]:disabled { input[type=image]:disabled {
/* See Firefox bug: /* See Firefox bug: