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

Note header: apply note custom colors over the note icons (#8100)

Browse Source
This commit is contained in:
Adorian Doran 2025-12-19 02:15:30 +02:00 committed by GitHub
commit 8e245ccad8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,10 +89,10 @@ html {
--custom-color: var(--light-theme-custom-color);
}
:root .reference-link,
:root .reference-link:hover,
.ck-content a.reference-link > span,
.board-note {
:root .reference-link.use-note-color,
:root .reference-link.use-note-color:hover,
.ck-content a.reference-link.use-note-color > span,
.board-note.use-note-color {
color: var(--light-theme-custom-color, inherit);
}

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

@ -199,9 +199,9 @@
--badge-background-color: #ffffff1a;
--badge-text-color: var(--muted-text-color);
--note-icon-button-background-color: #a6a6a6;
--note-icon-button-hover-background-color: #d0d0d0;
--note-icon-button-color: black;
--note-icon-background-color: #444444;
--note-icon-color: #d4d4d4;
--note-icon-hover-background-color: #555555;
--promoted-attribute-card-background-color: #ffffff21;
--promoted-attribute-card-shadow: none;
@ -297,10 +297,10 @@
--custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
}
:root .reference-link,
:root .reference-link:hover,
.ck-content a.reference-link > span,
.board-note {
:root .reference-link.use-note-color,
:root .reference-link.use-note-color:hover,
.ck-content a.reference-link.use-note-color > span,
.board-note.use-note-color {
color: var(--dark-theme-custom-color, inherit);
}
@ -325,3 +325,10 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
.use-note-color {
--custom-color: var(--dark-theme-custom-color);
}
.note-split.with-hue,
.quick-edit-dialog-wrapper.with-hue {
--note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
--note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
--note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
}

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

@ -191,9 +191,9 @@
--badge-background-color: #00000011;
--badge-text-color: var(--muted-text-color);
--note-icon-button-background-color: #4f4f4f;
--note-icon-button-hover-background-color: #737373;
--note-icon-button-color: white;
--note-icon-background-color: #4f4f4f;
--note-icon-color: white;
--note-icon-hover-background-color: #737373;
--promoted-attribute-card-background-color: #00000014;
--promoted-attribute-card-shadow: none;
@ -296,3 +296,10 @@
--modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
--promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
}
.note-split.with-hue,
.quick-edit-dialog-wrapper.with-hue {
--note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
--note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
--note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
}

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

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

5
apps/client/src/widgets/note_wrapper.ts
View File

@ -63,6 +63,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
this.$widget.addClass(utils.getNoteTypeClass(note.type));
this.$widget.addClass(utils.getMimeTypeClass(note.mime));
this.$widget.addClass(`view-mode-${this.noteContext?.viewScope?.viewMode ?? "default"}`);
this.$widget.addClass(note.getColorClass());
this.$widget.toggleClass(["bgfx", "options"], note.isOptions());
this.$widget.toggleClass("protected", note.isProtected);
@ -89,11 +90,11 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
// listening on changes of note.type and CSS class
const LABELS_CAUSING_REFRESH = ["cssClass", "language", "viewType", "color"];
const noteId = this.noteContext?.noteId;
if (
loadResults.isNoteReloaded(noteId) ||
loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["cssClass", "language", "viewType"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note))
loadResults.getAttributeRows().find((attr) => attr.type === "label" && LABELS_CAUSING_REFRESH.includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note))
) {
this.refresh();
}