diff --git a/static/index.html b/static/index.html index c96db50..939ba33 100644 --- a/static/index.html +++ b/static/index.html @@ -354,6 +354,84 @@ bottom: -8px; } + body.artnet-mode .node { + opacity: 0.3; + } + + body.artnet-mode .node.artnet-out { + opacity: 1; + background: #2a2; + } + + body.artnet-mode .node.artnet-in { + opacity: 1; + background: #26d; + } + + body.artnet-mode .node.artnet-out.artnet-in { + background: linear-gradient(135deg, #2a2 50%, #26d 50%); + } + + body.artnet-mode .node .switch-port, + body.artnet-mode .node .uplink, + body.artnet-mode .node .root-label { + display: none; + } + + .node .artnet-info { + display: none; + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + font-size: 9px; + font-weight: normal; + padding: 1px 6px; + border-radius: 8px; + white-space: nowrap; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + z-index: 10; + cursor: default; + } + + .node:has(.artnet-info:hover) { + z-index: 1000; + } + + .node .artnet-info:hover { + white-space: pre; + max-width: none; + width: max-content; + z-index: 100; + padding: 4px 8px; + } + + .node .artnet-info.out-info { + background: #375; + color: #fff; + } + + .node .artnet-info.in-info { + background: #357; + color: #fff; + } + + body.artnet-mode .node.artnet-out .artnet-info, + body.artnet-mode .node.artnet-in .artnet-info { + display: block; + } + + body.artnet-mode .node.artnet-out.artnet-in .artnet-info.out-info { + top: -8px; + } + + body.artnet-mode .node.artnet-out.artnet-in .artnet-info.in-info { + top: auto; + bottom: -8px; + } + .node.has-error { box-shadow: 0 0 0 3px #f66; } @@ -405,9 +483,14 @@ display: none; } + body.artnet-mode .node:not(.artnet-out):not(.artnet-in):hover .node-info { + display: none; + } + .node:has(.switch-port:hover) .node-info, .node:has(.uplink:hover) .node-info, - .node:has(.dante-info:hover) .node-info { + .node:has(.dante-info:hover) .node-info, + .node:has(.artnet-info:hover) .node-info { display: none; } @@ -682,6 +765,7 @@