Trail casing: dark halo + light core

The accent line vanished on same-hue fills. Blend modes (difference/
exclusion) all keep a blind luminance where the stroke disappears and
composite expensively on old kiosk WebViews, so the trail now uses the
cartographers' trick instead: a neutral dark halo under a light core —
one of the two always contrasts with whatever is underneath. Verified
over glow fill (dark rooms + light pools) in one screenshot.
This commit is contained in:
Matysh
2026-07-31 09:59:27 +03:00
parent 893ccff94f
commit 692bb91e57
7 changed files with 58 additions and 18 deletions
+10 -3
View File
@@ -1291,13 +1291,20 @@ export const cardStyles = css`
}
.vactrail polyline {
fill: none;
stroke: var(--hp-accent);
stroke-opacity: 0.35;
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* dark halo + light core: neutral, and one of the two always contrasts
with whatever fill is underneath */
.vactrail .case {
stroke: rgba(0, 0, 0, 0.4);
stroke-width: 4.5;
}
.vactrail .core {
stroke: rgba(255, 255, 255, 0.82);
stroke-width: 1.8;
}
.vacbox .vacbtns { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.vaccalbar {
position: fixed;