Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-27 07:21:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): create a style for file (upload) input fields

Browse Source
This commit is contained in:
Adorian Doran 2025-02-06 07:13:15 +02:00
parent 0dcd2718c8
commit 7d2ace92eb
1 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/public/stylesheets/theme-next/forms.css
View File

@ -141,10 +141,12 @@ input[type="text"],
input[type="number"], input[type="number"],
input[type="password"], input[type="password"],
textarea.form-control, textarea.form-control,
textarea { textarea,
.tn-input-field {
outline: 3px solid transparent; outline: 3px solid transparent;
outline-offset: 6px; outline-offset: 6px;
border: unset; border: unset;
border-radius: var(--bs-border-radius);
background: var(--input-background-color); background: var(--input-background-color);
color: var(--input-text-color); color: var(--input-text-color);
} }
@ -154,7 +156,8 @@ input[type="text"]:hover,
input[type="number"]:hover, input[type="number"]:hover,
input[type="password"]:hover, input[type="password"]:hover,
textarea.form-control:hover, textarea.form-control:hover,
textarea:hover { textarea:hover,
.tn-input-field:hover {
background: var(--input-hover-background); background: var(--input-hover-background);
color: var(--input-hover-color); color: var(--input-hover-color);
} }
@ -164,7 +167,9 @@ input[type="text"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
textarea.form-control:focus, textarea.form-control:focus,
textarea:focus { textarea:focus,
.tn-input-field:focus,
.tn-input-field:focus-within {
box-shadow: unset; box-shadow: unset;
outline: 3px solid var(--input-focus-outline-color); outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0; outline-offset: 0;
@ -337,6 +342,47 @@ optgroup {
line-height: 40px; line-height: 40px;
} }
/*
* File input
*
* <label class="tn-file-input tn-input-field">
* <input type="file" />
* </label>
*/
.tn-file-input {
position: relative;
padding: .375rem 2.25rem .375rem .75rem;
}
.tn-file-input input[type="file"] {
background: transparent;
}
.tn-file-input input[type="file"]::file-selector-button {
/* Hide the "Browse..." button */
display: none;
}
.tn-file-input input[type="file"]:focus {
outline: none;
}
/* The browse icon */
.tn-file-input::before {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
content: "\eae1";
width: 2em;
height: 100%;
right: 0;
top: 0;
font-size: 1.2em;
font-family: boxicons;
}
/* Check boxes and radio buttons */ /* Check boxes and radio buttons */
@supports selector(label:has(*)) { @supports selector(label:has(*)) {