diff --git a/netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css b/netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css index 8f09a84..cd81c24 100644 --- a/netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css +++ b/netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css @@ -100,12 +100,18 @@ html[data-netbox-color-mode="dark"] .rack-device { transition: opacity .12s, stroke .12s, filter .12s, stroke-width .12s; } .rack-topology-edge.is-highlighted { - stroke: #fff !important; + stroke: #22c55e !important; stroke-width: 5; opacity: 1; - filter: drop-shadow(0 0 5px #fff); + filter: drop-shadow(0 0 5px #22c55e); } .rack-topology-edge.is-dimmed { opacity: .12; } +html[data-bs-theme="dark"] .rack-topology-edge.is-highlighted, +body[data-bs-theme="dark"] .rack-topology-edge.is-highlighted, +html[data-netbox-color-mode="dark"] .rack-topology-edge.is-highlighted { + stroke: #fff !important; + filter: drop-shadow(0 0 5px #fff); +} .rack-topology-edge.is-wireless { stroke-dasharray: 7 7; stroke-linecap: round; diff --git a/netbox_topology_views/static_dev/css/app.scss b/netbox_topology_views/static_dev/css/app.scss index f7edb02..16fe810 100644 --- a/netbox_topology_views/static_dev/css/app.scss +++ b/netbox_topology_views/static_dev/css/app.scss @@ -62,7 +62,7 @@ html[data-netbox-color-mode=dark] #visgraph { .rack-topology-node strong, .rack-topology-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rack-topology-node small { opacity: .7; } .rack-topology-edge { fill: none; stroke-width: 3; opacity: .8; pointer-events: stroke; cursor: pointer; transition: opacity .12s, stroke .12s, filter .12s, stroke-width .12s; } -.rack-topology-edge.is-highlighted { stroke: #fff !important; stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 5px #fff); } +.rack-topology-edge.is-highlighted { stroke: #22c55e !important; stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 5px #22c55e); } .rack-topology-edge.is-dimmed { opacity: .12; } .rack-topology-tooltip { display: none; position: absolute; z-index: 10; width: max-content; max-width: 28rem; padding: .65rem .8rem; border: 1px solid var(--tblr-border-color, #ced4da); border-radius: .35rem; background: var(--tblr-bg-surface, #fff); box-shadow: 0 4px 18px rgba(0,0,0,.25); pointer-events: none; } .rack-topology-tooltip.is-visible { display: block; } @@ -85,6 +85,7 @@ html[data-netbox-color-mode=dark] #visgraph { html[data-bs-theme="dark"], body[data-bs-theme="dark"], html[data-netbox-color-mode="dark"] { .rack-frame { border-color: #3b4654; background-color: #212b36; } .rack-device { background: #162e45; color: #fff; } + .rack-topology-edge.is-highlighted { stroke: #fff !important; filter: drop-shadow(0 0 5px #fff); } } @media (max-width: 700px) {