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:
@@ -147,7 +147,13 @@ section {
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -157,6 +163,12 @@ section {
|
||||
box-shadow: 0 0 10px color-mix(in srgb, var(--ch) 40%, transparent);
|
||||
pointer-events: none;
|
||||
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 */
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -32,8 +34,16 @@
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
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 */
|
||||
.template-card::after {
|
||||
content: '';
|
||||
|
||||
Reference in New Issue
Block a user