gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-20 22:34:23 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

style/note icon: apply the note custom color on the icon

Browse Source
This commit is contained in:
Adorian Doran 2025-12-18 00:53:09 +02:00
parent c9fae88a86
commit 76c16f3a62
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/stylesheets/theme-next-dark.css
View File

@ -325,3 +325,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
.use-note-color { .use-note-color {
--custom-color: var(--dark-theme-custom-color); --custom-color: var(--dark-theme-custom-color);
} }
.note-split.with-hue {
--note-icon-custom-background-color: hsl(var(--custom-color-hue), 8%, 29.4%);
--note-icon-custom-color: hsl(var(--custom-color-hue), 89%, 78%);
}

5
apps/client/src/stylesheets/theme-next-light.css
View File

@ -296,3 +296,8 @@
--modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
--promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
} }
.note-split.with-hue {
--note-icon-custom-background-color: hsl(var(--custom-color-hue), 50%, 86.7%);
--note-icon-custom-color: hsl(var(--custom-color-hue), 36%, 23%);
}

6
apps/client/src/widgets/note_icon.css
View File

@ -90,7 +90,7 @@ body.experimental-feature-new-layout {
&::before { &::before {
position: relative; position: relative;
z-index: 1; z-index: 1;
color: var(--note-icon-button-color); color: var(--note-icon-custom-color, var(--note-icon-button-color));
} }
/* The background circle */ /* The background circle */
@ -99,11 +99,11 @@ body.experimental-feature-new-layout {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 50%; border-radius: 50%;
background: var(--note-icon-button-background-color); background: var(--note-icon-custom-background-color, var(--note-icon-button-background-color));
} }
&:focus-visible { &:focus-visible {
outline: 2px solid var(--note-icon-button-color); outline: 2px solid var(--note-icon-custom-color, var(--note-icon-button-color));
} }
&:hover:not(.bx-empty:disabled)::after { &:hover:not(.bx-empty:disabled)::after {