diff --git a/web/src/index.css b/web/src/index.css index 39ecb35..aa704ee 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -6876,6 +6876,8 @@ pre { flex: 1; min-height: 0; background: var(--topo-canvas-bg, #0f172a); + --xy-edge-label-background-color: transparent; + --xy-edge-label-color: #e2e8f0; } .topo-canvas:fullscreen, @@ -7190,22 +7192,27 @@ pre { text-overflow: ellipsis; } -.react-flow__edge-textbg { - fill: #0f172a; +.topo-canvas .react-flow__edge-textbg { + fill: none !important; + display: none !important; } -.react-flow__edge-text { - fill: #cbd5e1; +.topo-canvas .react-flow__edge-text { + fill: #e2e8f0; font-size: 11px; + paint-order: stroke; + stroke: rgba(15, 23, 42, 0.85); + stroke-width: 3px; } .topo-edge-label { font-size: 11px; color: #e2e8f0; - background: transparent; - border: 0; + background: transparent !important; + border: 0 !important; border-radius: 0; - padding: 0; + padding: 0 !important; + box-shadow: none !important; white-space: nowrap; text-shadow: 0 0 3px rgba(15, 23, 42, 0.95), diff --git a/web/src/pages/TopologyPage.tsx b/web/src/pages/TopologyPage.tsx index d74ad7b..10e1c75 100644 --- a/web/src/pages/TopologyPage.tsx +++ b/web/src/pages/TopologyPage.tsx @@ -597,7 +597,8 @@ function resolveEdgeStyle( function withEdgeVisual(edge: Edge, defaults: EdgeDefaults): Edge { const data = (edge.data || {}) as EdgeStyleData; const style = resolveEdgeStyle(data, defaults); - return { ...edge, style, markerEnd: undefined }; + // RF EdgeText defaults labelShowBg=true with a white rect — keep digits only. + return { ...edge, style, markerEnd: undefined, labelShowBg: false }; } function graphToFlow( @@ -3385,7 +3386,7 @@ export function TopologyPage() { edgeTypes={edgeTypes} onlyRenderVisibleElements connectionMode={ConnectionMode.Loose} - defaultEdgeOptions={{ type: "straight" }} + defaultEdgeOptions={{ type: "straight", labelShowBg: false }} proOptions={{ hideAttribution: true }} minZoom={0.05} maxZoom={4}