gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-21 08:04:24 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

client/note color picker: refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-11-20 18:46:27 +02:00
parent f15e048763
commit 1de9f715fa
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/client/src/menus/custom-items/NoteColorPickerMenuItem.css
View File

@ -4,13 +4,13 @@
--note-color-picker-clear-color-cell-selection-outline-color: var(--primary-button-border-color); --note-color-picker-clear-color-cell-selection-outline-color: var(--primary-button-border-color);
} }
.color-picker-menu-item { .note-color-picker {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: space-between; justify-content: space-between;
} }
.color-picker-menu-item .color-cell { .note-color-picker .color-cell {
--color-picker-cell-size: 14px; --color-picker-cell-size: 14px;
width: var(--color-picker-cell-size); width: var(--color-picker-cell-size);
@ -19,21 +19,21 @@
background-color: var(--color); background-color: var(--color);
} }
.color-picker-menu-item .color-cell:not(.selected):hover { .note-color-picker .color-cell:not(.selected):hover {
transform: scale(1.2); transform: scale(1.2);
} }
.color-picker-menu-item .color-cell.disabled-color-cell { .note-color-picker .color-cell.disabled-color-cell {
cursor: not-allowed; cursor: not-allowed;
} }
.color-picker-menu-item .color-cell.selected { .note-color-picker .color-cell.selected {
outline: 2px solid var(--outline-color, var(--color)); outline: 2px solid var(--outline-color, var(--color));
outline-offset: 2px; outline-offset: 2px;
} }
.color-picker-menu-item .color-cell-reset::before, .note-color-picker .color-cell-reset::before,
.color-picker-menu-item .custom-color-cell::before { .note-color-picker .custom-color-cell::before {
position: absolute; position: absolute;
display: flex; display: flex;
top: 0; top: 0;
@ -50,14 +50,14 @@
* RESET COLOR CELL * RESET COLOR CELL
*/ */
.color-picker-menu-item .color-cell-reset { .note-color-picker .color-cell-reset {
--color: var(--note-color-picker-clear-color-cell-background); --color: var(--note-color-picker-clear-color-cell-background);
--outline-color: var(--note-color-picker-clear-color-cell-selection-outline-color); --outline-color: var(--note-color-picker-clear-color-cell-selection-outline-color);
position: relative; position: relative;
} }
.color-picker-menu-item .color-cell-reset::before { .note-color-picker .color-cell-reset::before {
content: "\ec8d"; content: "\ec8d";
mix-blend-mode: normal; mix-blend-mode: normal;
color: var(--note-color-picker-clear-color-cell-color); color: var(--note-color-picker-clear-color-cell-color);
@ -67,20 +67,20 @@
* CUSTOM COLOR CELL * CUSTOM COLOR CELL
*/ */
.color-picker-menu-item .custom-color-cell { .note-color-picker .custom-color-cell {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.color-picker-menu-item .custom-color-cell.custom-color-cell-empty { .note-color-picker .custom-color-cell.custom-color-cell-empty {
background-image: url(./custom-color.png); background-image: url(./custom-color.png);
background-size: cover; background-size: cover;
--foreground: transparent; --foreground: transparent;
} }
.color-picker-menu-item .custom-color-cell::before { .note-color-picker .custom-color-cell::before {
content: "\ed35"; content: "\ed35";
color: var(--foreground); color: var(--foreground);
font-size: 16px; font-size: 16px;

2
apps/client/src/menus/custom-items/NoteColorPickerMenuItem.tsx
View File

@ -73,7 +73,7 @@ export default function NoteColorPickerMenuItem(props: NoteColorPickerMenuItemPr
} }
}, [note, currentColor]); }, [note, currentColor]);
return <div className="color-picker-menu-item" return <div className="note-color-picker"
onClick={(e) => {e.stopPropagation()}}> onClick={(e) => {e.stopPropagation()}}>
<ColorCell className="color-cell-reset" <ColorCell className="color-cell-reset"