LeoVasanko/pagerite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transition map: stable node colors — white external pills, always-black labels

Browse Source
This commit is contained in:
LeoVasanko
2026-09-18 19:11:27 +00:00
parent 2be3b32586
commit 0c7fe15635
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/TransitionGraph.vue
+13 -7
View File
@@ -257,11 +257,14 @@ const countLabel = (n) =>
filter: drop-shadow(0 0 2.5px var(--accent)); filter: drop-shadow(0 0 2.5px var(--accent));
} }
.tmap .txnode { .tmap .txnode {
fill: var(--text); /* External source/exit pills: plain white on every theme, with a hairline
stroke: none; so the pill stays visible on a white page. */
fill: #fff;
stroke: var(--line, rgba(128, 128, 128, 0.4));
stroke-width: 1;
} }
.tmap .txnode-source { fill: var(--text); } .tmap .txnode-source { fill: #fff; }
.tmap .txnode-exit { fill: var(--text); } .tmap .txnode-exit { fill: #fff; }
/* Branch lanes: one wide concentric arc per path prefix, running behind /* Branch lanes: one wide concentric arc per path prefix, running behind
the node pills around the fan's circle center; parent levels sit one the node pills around the fan's circle center; parent levels sit one
indent (radius step) outward. Each lane's label follows a short guide indent (radius step) outward. Each lane's label follows a short guide
@@ -289,15 +292,18 @@ const countLabel = (n) =>
stroke: none; stroke: none;
} }
/* Text sizes are viewBox units: they shrink along with the graph on /* Text sizes are viewBox units: they shrink along with the graph on
narrow panels. Overlong labels are clipped at the pill border. */ narrow panels. Overlong labels are clipped at the pill border. The text
is always black, on accent (internal pills) and white (external pills)
alike — black stands out from any accent color, so the coloring stays
stable across themes and light/dark modes. */
.tmap .tnodeslug { .tmap .tnodeslug {
fill: var(--bg, Canvas); fill: #000;
font-size: 19px; font-size: 19px;
text-anchor: start; text-anchor: start;
} }
.tmap a { cursor: pointer; } .tmap a { cursor: pointer; }
.tmap .tnodecount { .tmap .tnodecount {
fill: var(--bg, Canvas); fill: #000;
opacity: 0.75; opacity: 0.75;
font-size: 15px; font-size: 15px;
text-anchor: middle; text-anchor: middle;