Preserve NE icon white textures when applying vendor tint colors.

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

View file

@ -7132,13 +7132,30 @@ pre {
}
.topo-node__icon {
position: relative;
display: block;
width: 56px;
height: 56px;
margin: 0;
pointer-events: 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);
mix-blend-mode: color;
-webkit-mask-image: url(/topo/ne-router.png);
mask-image: url(/topo/ne-router.png);
-webkit-mask-size: contain;
@ -7147,7 +7164,7 @@ pre {
mask-repeat: no-repeat;
-webkit-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 {