fix(ui): channel stripe paints only on custom-color or running cards

Reported during pre-merge review of the Lumenworks redesign:
non-dashboard cards (Inputs, Integrations, Targets) all showed
aggressive cyan / green left stripes "regardless of custom color set
or not", and even the ``+`` Add card carried a stripe.

Root cause: ``.template-card`` defaulted to ``--ch: cyan`` and
``::before`` painted it unconditionally; ``.add-template-card``
inherits ``.template-card`` so it picked the stripe up too.

Fix: gate the ``::before`` channel stripe behind opt-in selectors.
It now paints only when the card carries ``data-has-color="1"``
(the user picked a personal colour via the picker, set by ``wrapCard``)
or has the ``card-running`` class (the "patched and live" indicator).
Dashboard module rows are unchanged — their ``::before`` already
runs at ``opacity: 0.6`` and was approved as the visual benchmark.

``add-template-card::before`` is hidden unconditionally with
``!important`` since the Add card is not an entity and should never
carry a channel hue.
This commit is contained in:
2026-04-25 15:11:24 +03:00
parent e0ff40f4f5
commit b1ee3c3942
2 changed files with 24 additions and 2 deletions
+13 -1
View File
@@ -147,7 +147,13 @@ section {
overflow: hidden; overflow: hidden;
} }
/* Channel stripe on left edge — color coded by entity type via --ch override */ /* Channel stripe on left edge — opt-in only:
* [data-has-color="1"] → user picked a personal color via the picker
* .card-running → "patched and live" indicator
* Idle cards without a personal color stay clean (no stripe), matching
* the pre-redesign behavior where the left border meant "I marked this".
* The dashboard module rows keep their always-on stripe (at 0.6 opacity)
* because the dashboard was approved as-is. */
.card::before { .card::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -157,6 +163,12 @@ section {
box-shadow: 0 0 10px color-mix(in srgb, var(--ch) 40%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--ch) 40%, transparent);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
display: none;
}
.card[data-has-color="1"]::before,
.card.card-running::before {
display: block;
} }
/* Corner bracket — silkscreened panel feel in the top-right */ /* Corner bracket — silkscreened panel feel in the top-right */
+11 -1
View File
@@ -21,7 +21,9 @@
overflow: hidden; overflow: hidden;
} }
/* Channel stripe on left edge — colour-coded per entity type via --ch override */ /* Channel stripe on left edge — opt-in only (mirrors .card::before in
* cards.css). Idle template-cards without a custom color stay clean.
* The Add card never gets a stripe (it's not an entity). */
.template-card::before { .template-card::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -32,8 +34,16 @@
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
transition: width 0.2s ease, box-shadow 0.2s ease; transition: width 0.2s ease, box-shadow 0.2s ease;
display: none;
} }
.template-card[data-has-color="1"]::before,
.template-card.card-running::before {
display: block;
}
.add-template-card::before { display: none !important; }
/* Corner bracket — silkscreened panel feel in the top-right */ /* Corner bracket — silkscreened panel feel in the top-right */
.template-card::after { .template-card::after {
content: ''; content: '';