style/note badges: extract colors as CSS variables

This commit is contained in:
Adorian Doran 2025-12-20 20:41:23 +02:00
parent 93eead04a9
commit 0de9b219a5
3 changed files with 17 additions and 5 deletions

View File

@ -202,6 +202,12 @@
--badge-background-color: #ffffff1a; --badge-background-color: #ffffff1a;
--badge-text-color: var(--muted-text-color); --badge-text-color: var(--muted-text-color);
--badge-temporaraily-editable-background-color: #4fa52b;
--badge-read-only-background-color: #e33f3b;
--badge-share-background-color: #3b82f6;
--badge-clipped-note-background-color: #57a2a5;
--badge-execute-background-color: #f59e0b;
--note-icon-background-color: #444444; --note-icon-background-color: #444444;
--note-icon-color: #d4d4d4; --note-icon-color: #d4d4d4;
--note-icon-hover-background-color: #555555; --note-icon-hover-background-color: #555555;

View File

@ -194,6 +194,12 @@
--badge-background-color: #00000011; --badge-background-color: #00000011;
--badge-text-color: var(--muted-text-color); --badge-text-color: var(--muted-text-color);
--badge-temporaraily-editable-background-color: #4fa52b;
--badge-read-only-background-color: #e33f3b;
--badge-share-background-color: #3b82f6;
--badge-clipped-note-background-color: #57a2a5;
--badge-execute-background-color: #f59e0b;
--note-icon-background-color: #4f4f4f; --note-icon-background-color: #4f4f4f;
--note-icon-color: white; --note-icon-color: white;
--note-icon-hover-background-color: #737373; --note-icon-hover-background-color: #737373;

View File

@ -11,11 +11,11 @@
--badge-radius: 12px; --badge-radius: 12px;
.ext-badge { .ext-badge {
&.temporarily-editable-badge { --color: #4fa52b; } &.temporarily-editable-badge {--color: var(--badge-temporaraily-editable-background-color)}
&.read-only-badge { --color: #e33f3b; } &.read-only-badge {--color: var(--badge-read-only-background-color);}
&.share-badge { --color: #3b82f6; } &.share-badge {--color: var(--badge-share-background-color);}
&.clipped-note-badge { --color: #57a2a5; } &.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
&.execute-badge { --color: #f59e0b; } &.execute-badge {--color: var(--badge-execute-background-color);}
} }
.dropdown-badge { .dropdown-badge {