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 {
width: 100%;
padding: 5px 30px;
padding: 6px 30px;
cursor: pointer;
border-color: var(--novnc-darkblue);
border-color: transparent;
border-radius: 6px;
background-color: var(--novnc-blue);
color: white;
}

35
app/styles/input.css
View File

@ -13,15 +13,35 @@
}
input, input::file-selector-button, button, select, textarea {
/* Respect standard font settings */
font: inherit;
/* Disable default rendering */
padding: 0.5em var(--input-xpadding);
border-radius: 6px;
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-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,
button,
select {
border-bottom-width: 2px;
border: none;
color: black;
font-weight: bold;
background-color: var(--novnc-buttongrey);
@ -170,7 +190,6 @@ input[type=checkbox] {
display: inline-flex;
justify-content: center;
align-items: center;
border-color: transparent;
background-color: var(--novnc-buttongrey);
background-image: var(--button-activation-overlay);
/* Disable Chrome's touch tap highlight to avoid conflicts with overlay */