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

Get rid of gradients on buttons and inputs 

Lets make things more flat and modern.
This commit is contained in:
Samuel Mannehed 2025-01-12 01:29:06 +01:00
parent ca270efcc3
commit e9b48ae409
2 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/styles/base.css
View File

@ -761,14 +761,14 @@ html {
border-color: var(--novnc-darkblue); border-color: var(--novnc-darkblue);
border-radius: 6px; border-radius: 6px;
background: linear-gradient(to top, var(--novnc-blue), rgb(99, 119, 147)); background-color: var(--novnc-blue);
color: white; color: white;
/* This avoids it jumping around when :active */ /* This avoids it jumping around when :active */
vertical-align: middle; vertical-align: middle;
} }
#noVNC_connect_button:hover { #noVNC_connect_button:hover {
background: linear-gradient(to top, var(--novnc-blue), rgb(105, 125, 155)); background-color: var(--novnc-darkblue);
} }
#noVNC_connect_button img { #noVNC_connect_button img {

29
app/styles/input.css
View File

@ -18,14 +18,10 @@ input, input::file-selector-button, button, select, textarea {
/* Disable default rendering */ /* Disable default rendering */
appearance: none; appearance: none;
background: none;
padding: 0.5em var(--input-xpadding); padding: 0.5em var(--input-xpadding);
border: 1px solid var(--novnc-lightgrey); border: 1px solid var(--novnc-lightgrey);
border-radius: 6px; border-radius: 6px;
color: black;
--bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
background-image: var(--bg-gradient);
} }
/* /*
@ -44,6 +40,8 @@ select {
/* This avoids it jumping around when :active */ /* This avoids it jumping around when :active */
vertical-align: middle; vertical-align: middle;
margin-top: 0; margin-top: 0;
color: black;
background-color: white;
/* Disable Chrome's touch tap highlight */ /* Disable Chrome's touch tap highlight */
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -60,7 +58,8 @@ 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>');
background-image: var(--select-arrow), var(--bg-gradient); background-color: white;
background-image: var(--select-arrow);
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);
@ -75,7 +74,7 @@ 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>'), var(--bg-gradient); </svg>');
} }
option { option {
color: black; color: black;
@ -192,13 +191,13 @@ input[type=reset]:hover,
input[type=submit]:hover, input[type=submit]:hover,
input::file-selector-button:hover, input::file-selector-button:hover,
button:hover { button:hover {
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); background-color: var(--novnc-lightgrey);
} }
select:hover { select:hover {
background-image: var(--select-arrow), background-image:
linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); var(--select-arrow),
background-position: calc(100% - 7px), left top; linear-gradient(var(--novnc-lightgrey) 100%,
background-repeat: no-repeat; transparent);
} }
@media (any-pointer: coarse) { @media (any-pointer: coarse) {
/* We don't want a hover style after touch input */ /* We don't want a hover style after touch input */
@ -209,10 +208,10 @@ 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-image: var(--bg-gradient); background-color: white;
} }
select:hover { select:hover {
background-image: var(--select-arrow), var(--bg-gradient); background-image: var(--select-arrow);
} }
} }
@ -264,7 +263,7 @@ input[type=submit]:disabled,
input:disabled::file-selector-button, input:disabled::file-selector-button,
button:disabled, button:disabled,
select:disabled { select:disabled {
background-image: var(--bg-gradient); background-color: white;
border-bottom-width: 2px; border-bottom-width: 2px;
margin-top: 0; margin-top: 0;
} }
@ -272,7 +271,7 @@ input[type=file]:disabled {
background-image: none; background-image: none;
} }
select:disabled { select:disabled {
background-image: var(--select-arrow), var(--bg-gradient); background-image: var(--select-arrow),
} }
input[type=image]:disabled { input[type=image]:disabled {
/* See Firefox bug: /* See Firefox bug: