hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-11 00:32:39 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

Preserve NE icon white textures when applying vendor tint colors.

Browse source 
Layer the original PNG under a color blend tint so luminosity highlights stay visible while brand hues remain editable.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-05 09:34:29 +08:00
parent 65afe8f29f
commit a412ca7cbc
2 changed files with 28 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/src/index.css
View file

@ -7132,13 +7132,30 @@ pre {
} }
.topo-node__icon { .topo-node__icon {
position: relative;
display: block; display: block;
width: 56px; width: 56px;
height: 56px; height: 56px;
margin: 0; margin: 0;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
isolation: isolate;
transition: transform 0.12s ease;
}
.topo-node__icon-art {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Recolor hue/sat from --topo-icon-color; keep luminosity so white textures remain. */
.topo-node__icon-tint {
position: absolute;
inset: 0;
background-color: var(--topo-icon-color, #3b82f6); background-color: var(--topo-icon-color, #3b82f6);
mix-blend-mode: color;
-webkit-mask-image: url(/topo/ne-router.png); -webkit-mask-image: url(/topo/ne-router.png);
mask-image: url(/topo/ne-router.png); mask-image: url(/topo/ne-router.png);
-webkit-mask-size: contain; -webkit-mask-size: contain;
@ -7147,7 +7164,7 @@ pre {
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; -webkit-mask-position: center;
mask-position: center; mask-position: center;
transition: transform 0.12s ease, background-color 0.12s ease; transition: background-color 0.12s ease;
} }
.topo-node__caption { .topo-node__caption {

12
web/src/pages/TopologyPage.tsx
View file

@ -371,9 +371,17 @@ function nodeMatchesQuery(n: Node<NeNodeData>, query: string): boolean {
return tokens.every((tok) => bits.some((b) => fuzzyIncludes(String(b || ""), tok))); return tokens.every((tok) => bits.some((b) => fuzzyIncludes(String(b || ""), tok)));
} }
/** Silhouette via CSS mask; fill color comes from --topo-icon-color (vendor palette). */ /**
* Keep the PNG’s white texture/highlights; tint brand color via mix-blend-mode.
* Color comes from --topo-icon-color (vendor palette in Display settings).
*/
function RouterIcon() { function RouterIcon() {
return <span className="topo-node__icon" aria-hidden="true" />; return (
<span className="topo-node__icon" aria-hidden="true">
<img className="topo-node__icon-art" src="/topo/ne-router.png" alt="" draggable={false} />
<span className="topo-node__icon-tint" />
</span>
);
} }
/** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */ /** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */