feat(badges/content): improve color support

This commit is contained in:
Elian Doran 2026-02-14 12:41:41 +02:00
parent 5a2b04adba
commit 7b230706cb
No known key found for this signature in database
4 changed files with 11 additions and 6 deletions

View File

@ -210,6 +210,7 @@
--badge-share-background-color: #4d4d4d;
--badge-clipped-note-background-color: #295773;
--badge-execute-background-color: #604180;
--badge-active-content-background-color: rgb(12, 68, 70);
--note-icon-background-color: #444444;
--note-icon-color: #d4d4d4;
@ -238,9 +239,9 @@
--bottom-panel-background-color: #11111180;
--bottom-panel-title-bar-background-color: #3F3F3F80;
--status-bar-border-color: var(--main-border-color);
--scrollbar-thumb-color: #fdfdfd5c;
--scrollbar-thumb-hover-color: #ffffff7d;
--scrollbar-background-color: transparent;
@ -351,4 +352,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
.note-split.with-hue *::selection,
.quick-edit-dialog-wrapper.with-hue *::selection {
--selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
}
}

View File

@ -202,7 +202,7 @@
--badge-share-background-color: #6b6b6b;
--badge-clipped-note-background-color: #2284c0;
--badge-execute-background-color: #7b47af;
--badge-icon-pack-background-color: rgb(228, 163, 44);
--badge-active-content-background-color: rgb(27, 164, 168);
--note-icon-background-color: #4f4f4f;
--note-icon-color: white;

View File

@ -1,4 +1,5 @@
import { BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
import clsx from "clsx";
import { useEffect, useState } from "preact/hooks";
import FNote from "../../entities/fnote";
@ -75,7 +76,7 @@ function ActiveContentBadge({ info, note }: { note: FNote, info: ActiveContentIn
const { icon, helpPage, apiDocsPage, isExecutable } = typeMappings[info.type];
return (
<BadgeWithDropdown
className="icon-pack-badge"
className={clsx("active-content-badge", !!info.isEnabled && "disabled")}
icon={icon}
text={getTranslationForType(info.type)}
>

View File

@ -37,7 +37,10 @@
pointer-events: none;
}
}
&.icon-pack-badge { --color: var(--badge-icon-pack-background-color); }
&.active-content-badge { --color: var(--badge-active-content-background-color); }
&.active-content-badge.disabled {
opacity: 0.5;
}
min-width: 0;