gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-26 08:33:36 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

ui/grid view card: use tinted background

Browse Source
This commit is contained in:
Adorian Doran 2026-02-23 09:55:47 +02:00
parent dc8c10e531
commit d28661fee3
4 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -367,7 +367,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
.note-split.with-hue,
.quick-edit-dialog-wrapper.with-hue,
.nested-note-list-item.with-hue,
.note-book-card .note-book-header.with-hue {
.note-book-card.with-hue .note-book-header {
--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%);
@ -377,3 +377,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
.quick-edit-dialog-wrapper.with-hue *::selection {
--selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
}
.note-book-card.with-hue {
--card-background-color: hsl(var(--custom-color-hue), 6%, 21%);
--card-background-hover-color: hsl(var(--custom-color-hue), 8%, 25%);
}

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

@ -337,7 +337,7 @@
.note-split.with-hue,
.quick-edit-dialog-wrapper.with-hue,
.nested-note-list-item.with-hue,
.note-book-card .note-book-header.with-hue {
.note-book-card.with-hue .note-book-header {
--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%);
@ -347,3 +347,8 @@
.quick-edit-dialog-wrapper.with-hue *::selection {
--selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
}
.note-book-card.with-hue {
--card-background-color: hsl(var(--custom-color-hue), 21%, 94%);
--card-background-hover-color: hsl(var(--custom-color-hue), 21%, 87%);
}

2
apps/client/src/widgets/collections/legacy/ListOrGridView.css
View File

@ -44,7 +44,7 @@
}
.nested-note-list-item.use-note-color,
.note-book-header.use-note-color {
.note-book-card.use-note-color .note-book-header {
span.tn-icon + span,
.tn-icon,
.rendered-note-attributes {

4
apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
View File

@ -160,14 +160,14 @@ function GridNoteCard(props: GridNoteCardProps) {
const notePath = getNotePath(props.parentNote, props.note);
return (
<CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
<CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
"archived": props.note.isArchived
})}
data-href={`#${notePath}`}
data-note-id={props.note.noteId}
onClick={(e) => link.goToLink(e)}
>
<h5 className={clsx("note-book-header", props.note.getColorClass())}>
<h5 className={clsx("note-book-header")}>
<Icon className="note-icon" icon={props.note.getIcon()} />
<NoteLink className="note-book-title"
notePath={notePath}