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

style(next): add the initial style for input groups

Browse Source
This commit is contained in:
Adorian Doran 2025-01-14 01:30:31 +02:00
parent 5dd7b2c049
commit f462e7f93b
2 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,10 +54,56 @@ input::selection,
color: var(--input-selection-text-color); color: var(--input-selection-text-color);
} }
/* Input groups */
.input-group {
outline: 3px solid transparent;
outline-offset: 6px;
background: var(--input-background-color);
border-radius: 6px;
padding-right: 8px;
color: var(--quick-search-color);
}
.input-group:hover {
background: var(--input-hover-background);
}
.input-group:focus-within {
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
background: var(--input-focus-background);
transition: outline-color 50ms linear,
outline-offset 200ms ease-out;
}
.input-group input .input-group input
.input-group input:hover,
.input-group input:focus, .input-group input:focus,
.input-group .form-control, .input-group .form-control,
.input-group .form-control:hover,
.input-group .form-control:focus { .input-group .form-control:focus {
/* Ignore the focus outline for the inputs that are children of an input group */ /* Ignore the focus outline for the inputs that are children of an input group */
outline: unset; outline: unset;
background: transparent;
}
.input-group button,
.input-group a {
display: flex;
--bs-border-width: 0;
--accented-background-color: transparent;
background: transparent;
padding: 0 4px;
--muted-text-color: var(--input-text-color);
}
.input-group a.disabled {
opacity: .5;
}
.input-group .input-clearer-button {
background: transparent !important;
} }

20
src/public/stylesheets/theme-next/shell.css
View File

@ -1209,10 +1209,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
/* Search box wrapper */ /* Search box wrapper */
.jump-to-note-dialog .input-group { .jump-to-note-dialog .input-group {
margin-right: 16px; margin-right: 16px;
background: var(--quick-search-background);
border: 2px solid transparent;
border-radius: 6px;
color: var(--quick-search-color);
} }
.jump-to-note-dialog .input-group:hover { .jump-to-note-dialog .input-group:hover {
@ -1226,22 +1222,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
color: var(--quick-search-focus-color); color: var(--quick-search-focus-color);
} }
/* Search box input */
.jump-to-note-dialog .input-group input {
--bs-border-width: 0;
box-shadow: unset;
background: transparent;
color: currentColor;
}
/* Search box buttons */
.jump-to-note-dialog .input-group button {
--bs-border-width: 0;
--accented-background-color: transparent;
padding: 0 4px;
}
.jump-to-note-dialog .input-group button:last-child { .jump-to-note-dialog .input-group button:last-child {
padding-right: 0.75em; padding-right: 0.75em;
} }