client/note color picker/clear color cell: fix icon alignment

This commit is contained in:
Adorian Doran 2025-11-21 02:12:52 +02:00
parent 0db08f4c62
commit d87e8b729f
2 changed files with 30 additions and 25 deletions

View File

@ -32,20 +32,6 @@
outline-offset: 2px;
}
.note-color-picker .color-cell-reset::before,
.note-color-picker .custom-color-cell::before {
position: absolute;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: calc(var(--color-picker-cell-size) * 1.3);
justify-content: center;
align-items: center;
font-family: boxicons;
}
/*
* RESET COLOR CELL
*/
@ -55,18 +41,37 @@
--outline-color: var(--note-color-picker-clear-color-cell-selection-outline-color);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.note-color-picker .color-cell-reset::before {
content: "\ec8d";
mix-blend-mode: normal;
color: var(--note-color-picker-clear-color-cell-color);
.note-color-picker .color-cell-reset svg {
width: var(--color-picker-cell-size);
height: var(--color-picker-cell-size);
fill: var(--note-color-picker-clear-color-cell-color);
}
/*
* CUSTOM COLOR CELL
*/
.note-color-picker .custom-color-cell::before {
position: absolute;
content: "\ed35";
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: calc(var(--color-picker-cell-size) * 1.3);
justify-content: center;
align-items: center;
font-family: boxicons;
font-size: 16px;
color: var(--foreground);
}
.note-color-picker .custom-color-cell {
position: relative;
display: flex;
@ -78,10 +83,4 @@
background-image: url(./custom-color.png);
background-size: cover;
--foreground: transparent;
}
.note-color-picker .custom-color-cell::before {
content: "\ed35";
color: var(--foreground);
font-size: 16px;
}

View File

@ -74,7 +74,13 @@ export default function NoteColorPicker(props: NoteColorPickerProps) {
color={null}
isSelected={(currentColor === null)}
isDisabled={(note === null)}
onSelect={onColorCellClicked} />
onSelect={onColorCellClicked}>
{/* https://pictogrammers.com/library/mdi/icon/close/ */}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</ColorCell>
{COLOR_PALETTE.map((color) => (