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

Make buttons flat by removing borders 

Gives a more clean look that fits well with the new checkboxes and
radios. The old border was mostly used to contribute to a 3d-effect,
that was used for :active. That :active-styling has been replaced by
activation levels.
This commit is contained in:
Samuel Mannehed 2025-01-12 02:49:35 +01:00
parent 017888c9a8
commit 33a2548fcb
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/styles/base.css
View File

@ -729,13 +729,10 @@ html {
} }
#noVNC_connect_button { #noVNC_connect_button {
width: 100%; width: 100%;
padding: 5px 30px; padding: 6px 30px;
cursor: pointer; cursor: pointer;
border-color: transparent;
border-color: var(--novnc-darkblue);
border-radius: 6px; border-radius: 6px;
background-color: var(--novnc-blue); background-color: var(--novnc-blue);
color: white; color: white;
} }

35
app/styles/input.css
View File

@ -13,15 +13,35 @@
} }
input, input::file-selector-button, button, select, textarea { input, input::file-selector-button, button, select, textarea {
/* Respect standard font settings */ padding: 0.5em var(--input-xpadding);
font: inherit; border-radius: 6px;
/* Disable default rendering */
appearance: none; appearance: none;
padding: 0.5em var(--input-xpadding); /* Respect standard font settings */
font: inherit;
}
/*
* Text input
*/
input:not([type]),
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
border: 1px solid var(--novnc-lightgrey); border: 1px solid var(--novnc-lightgrey);
border-radius: 6px; /* Account for borders on text inputs, buttons dont have borders */
padding: calc(0.5em - 1px) var(--input-xpadding);
} }
/* /*
@ -100,7 +120,7 @@ input[type=submit],
input::file-selector-button, input::file-selector-button,
button, button,
select { select {
border-bottom-width: 2px; border: none;
color: black; color: black;
font-weight: bold; font-weight: bold;
background-color: var(--novnc-buttongrey); background-color: var(--novnc-buttongrey);
@ -170,7 +190,6 @@ input[type=checkbox] {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-color: transparent;
background-color: var(--novnc-buttongrey); background-color: var(--novnc-buttongrey);
background-image: var(--button-activation-overlay); background-image: var(--button-activation-overlay);
/* Disable Chrome's touch tap highlight to avoid conflicts with overlay */ /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */