diff options
Diffstat (limited to 'src/api/dashboard')
| -rw-r--r-- | src/api/dashboard/dashboard.html | 17 |
1 files changed, 6 insertions, 11 deletions
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html index 3b0f8fa..b4a2ef3 100644 --- a/src/api/dashboard/dashboard.html +++ b/src/api/dashboard/dashboard.html @@ -78,8 +78,8 @@ .legend .node.silent::before { background: var(--panel); } .legend .node.self::before { border-color: var(--self); background: var(--self); } .legend .node.dormant-node::before { border: 2.5px solid var(--bad); } - .legend .node.focus::before { width: 14px; height: 14px; background: none; - border: 2px solid var(--self); opacity: .5; } + .legend .node.focus::before { width: 14px; height: 14px; background: var(--self); + border: none; opacity: .35; } .scroll { overflow: auto; min-height: 0; } #figures-box .scroll, #document-box .scroll { flex: 1; } .tree pre { margin: 2px 0 4px 1.1em; white-space: pre-wrap; word-break: break-all; @@ -547,15 +547,10 @@ function renderGraph() { const reported = id in state.graph.measured; const shown = focused === null ? member.self : id === focused; // A link in focus: both ends ringed. - const end = isPair(focused) && focused.split(" ").includes(id); - if (id === hovered) { - // Under the pointer: lighter than the focus ring. - children.push(svg("circle", { cx: p.x, cy: p.y, r: 12, fill: "var(--self)", - "fill-opacity": .12, stroke: "none" })); - } - if (shown || end) { - children.push(svg("circle", { cx: p.x, cy: p.y, r: 13, fill: "none", - stroke: "var(--self)", "stroke-width": 2, "stroke-opacity": .5 })); + // A halo as links have: light under the pointer, stronger in focus. + if (shown || id === hovered) { + children.push(svg("circle", { cx: p.x, cy: p.y, r: 13, fill: "var(--self)", + "fill-opacity": shown ? .35 : .15, stroke: "none" })); } // Dormant as this node sees it (`/peers`): a red outline. const dormant = (state.peers.peers[id] || {}).status === "dormant"; |