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

Add styling for input[type=file] elements 

The last remaining input element we didn't have styling for (aside from
input[type=hidden] which can't be shown).
This commit is contained in:
Samuel Mannehed 2022-12-09 15:57:16 +01:00
parent 63528570bc
commit 629a6cacb9
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/styles/input.css
View File

@ -5,7 +5,7 @@
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt). * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
*/ */
input, button, select, textarea { input, input::file-selector-button, button, select, textarea {
/* Respect standard font settings */ /* Respect standard font settings */
font: inherit; font: inherit;
} }
@ -40,6 +40,7 @@ input[type=color],
input[type=image], input[type=image],
input[type=reset], input[type=reset],
input[type=submit], input[type=submit],
input::file-selector-button,
button, button,
select { select {
/* Disable default rendering */ /* Disable default rendering */
@ -61,6 +62,7 @@ input[type=button],
input[type=color], input[type=color],
input[type=reset], input[type=reset],
input[type=submit], input[type=submit],
input::file-selector-button,
button { button {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@ -165,6 +167,14 @@ input[type=range]::-moz-range-thumb {
margin-top: -7px; margin-top: -7px;
} }
input[type=file] {
background-image: none;
border: none;
}
input::file-selector-button {
margin-right: 6px;
}
input:not([type]):focus-visible, input:not([type]):focus-visible,
input[type=button]:focus-visible, input[type=button]:focus-visible,
input[type=checkbox]:focus-visible, input[type=checkbox]:focus-visible,
@ -186,12 +196,16 @@ input[type=text]:focus-visible,
input[type=time]:focus-visible, input[type=time]:focus-visible,
input[type=url]:focus-visible, input[type=url]:focus-visible,
input[type=week]:focus-visible, input[type=week]:focus-visible,
input:focus-visible::file-selector-button,
button:focus-visible, button:focus-visible,
select:focus-visible, select:focus-visible,
textarea:focus-visible { textarea:focus-visible {
outline: 2px solid rgb(74, 144, 217); outline: 2px solid rgb(74, 144, 217);
outline-offset: 1px; outline-offset: 1px;
} }
input[type=file]:focus-visible {
outline: none; /* We outline the button instead of the entire element */
}
input:not([type]):disabled, input:not([type]):disabled,
input[type=button]:disabled, input[type=button]:disabled,
@ -200,6 +214,7 @@ input[type=color]:disabled,
input[type=date]:disabled, input[type=date]:disabled,
input[type=datetime-local]:disabled, input[type=datetime-local]:disabled,
input[type=email]:disabled, input[type=email]:disabled,
input[type=file]:disabled,
input[type=image]:disabled, input[type=image]:disabled,
input[type=month]:disabled, input[type=month]:disabled,
input[type=number]:disabled, input[type=number]:disabled,
@ -214,6 +229,7 @@ input[type=text]:disabled,
input[type=time]:disabled, input[type=time]:disabled,
input[type=url]:disabled, input[type=url]:disabled,
input[type=week]:disabled, input[type=week]:disabled,
input:disabled::file-selector-button,
button:disabled, button:disabled,
select:disabled, select:disabled,
textarea:disabled { textarea:disabled {
@ -225,6 +241,7 @@ input[type=color]:active,
input[type=image]:active, input[type=image]:active,
input[type=reset]:active, input[type=reset]:active,
input[type=submit]:active, input[type=submit]:active,
input::file-selector-button:active,
button:active, button:active,
select:active { select:active {
border-bottom-width: 1px; border-bottom-width: 1px;
@ -236,6 +253,7 @@ select:active {
:root:not(.noVNC_touch) input[type=image]:hover:not(:disabled), :root:not(.noVNC_touch) input[type=image]:hover:not(:disabled),
:root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled), :root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled), :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
:root:not(.noVNC_touch) input::file-selector-button:hover:not(:disabled),
:root:not(.noVNC_touch) button:hover:not(:disabled) { :root:not(.noVNC_touch) button:hover:not(:disabled) {
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
} }