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

style(next): update the colors of combo boxes

Browse Source
This commit is contained in:
Adorian Doran 2025-01-14 21:40:05 +02:00
parent 9724b19cd2
commit 99a6e65d15
3 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/stylesheets/theme-next-dark.css
View File

@ -46,6 +46,10 @@
--input-action-button-color: #c6c6c6;
--input-action-button-hover: white;
--select-focus-background: #333;
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);
--hover-item-text-color: #efefef;
--hover-item-background-color: #ffffff24;
--hover-item-border-color: transparent;

4
src/public/stylesheets/theme-next-light.css
View File

@ -46,6 +46,10 @@
--input-action-button-color: #575757;
--input-action-button-hover: black;
--select-focus-background: white;
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);
--hover-item-text-color: black;
--hover-item-background-color: #0000001a;
--hover-item-border-color: transparent;

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

@ -121,4 +121,33 @@ input::selection,
.input-group .input-clearer-button {
background: transparent !important;
}
/* Combo boxes */
select, select.form-select {
outline: 3px solid transparent;
outline-offset: 6px;
background-color: var(--input-background-color);
color: var(--input-text-color);
border: unset;
}
select:hover, select.form-select:hover {
background-color: var(--input-hover-background);
color: var(--input-hover-color);
}
select:focus, select.form-select:focus {
box-shadow: unset;
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
background-color: var(--select-focus-background);
color: var(--select-focus-text-color);
transition: outline-color 50ms linear,
outline-offset 200ms ease-out;
}
option {
color: var(--select-dropdown-text-color);
}