MrBlake/mrb-netbox-topology-views
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: align topology nodes with racks and add theme-aware exports

Browse Source
This commit is contained in:
MrBlake
2026-07-28 14:26:28 +02:00
parent 1ff68d7026
commit 1de5ed0565
5 changed files with 202 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
netbox_topology_views/static/netbox_topology_views/css/rack_elevation.css
+62 -1
View File
@@ -6,6 +6,8 @@
padding: 2px 6px;
font-size: .78rem;
line-height: 1.15;
background: #eef6ff;
color: #132238;
}
.rack-device:hover {
min-height: 2.8rem;
@@ -13,6 +15,25 @@
z-index: 3;
}
.rack-device:hover span { white-space: normal; }
.rack-frame {
border-color: #718096;
background-color: #fff;
background-image: repeating-linear-gradient(to top, rgba(56, 73, 89, .16) 0, rgba(56, 73, 89, .16) 1px, transparent 1px, transparent calc(100% / var(--rack-units)));
}
.rack-device:hover { color: #132238; }
html[data-bs-theme="dark"] .rack-frame,
body[data-bs-theme="dark"] .rack-frame,
html[data-netbox-color-mode="dark"] .rack-frame {
border-color: #3b4654;
background-color: #212b36;
background-image: repeating-linear-gradient(to top, rgba(200, 215, 230, .14) 0, rgba(200, 215, 230, .14) 1px, transparent 1px, transparent calc(100% / var(--rack-units)));
}
html[data-bs-theme="dark"] .rack-device,
body[data-bs-theme="dark"] .rack-device,
html[data-netbox-color-mode="dark"] .rack-device {
background: #162e45;
color: #fff;
}
.rack-topology {
position: relative;
min-height: 18rem;
@@ -42,9 +63,42 @@
display: flex;
flex-direction: column;
gap: .75rem;
width: 15rem;
width: 30rem;
}
.rack-topology-column.is-external { width: 15rem; }
.rack-topology-column h4 { text-align: center; font-size: .85rem; }
.rack-topology-rack-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
height: calc(var(--rack-units) * 22px);
min-height: 280px;
margin-top: 1rem;
}
.rack-topology-lane {
position: relative;
border: 3px solid #718096;
background: repeating-linear-gradient(to top, rgba(56, 73, 89, .14) 0, rgba(56, 73, 89, .14) 1px, transparent 1px, transparent calc(100% / var(--rack-units)));
}
.rack-topology-lane-label {
position: absolute;
top: -1.4rem;
left: 0;
right: 0;
text-align: center;
font-size: .65rem;
text-transform: uppercase;
}
.rack-topology-external-body { display: flex; flex-direction: column; gap: .75rem; }
.rack-topology-lane .rack-topology-node {
position: absolute;
left: 3px;
right: 3px;
min-height: 18px;
padding: 2px 6px;
overflow: hidden;
box-sizing: border-box;
}
.rack-topology-node {
display: block;
padding: .55rem .75rem;
@@ -109,3 +163,10 @@
border-top: 1px solid var(--tblr-border-color, #ced4da);
}
.rack-topology-tooltip small { opacity: .65; }
html[data-bs-theme="dark"] .rack-topology-lane,
body[data-bs-theme="dark"] .rack-topology-lane,
html[data-netbox-color-mode="dark"] .rack-topology-lane {
border-color: #3b4654;
background-color: #212b36;
background-image: repeating-linear-gradient(to top, rgba(200, 215, 230, .12) 0, rgba(200, 215, 230, .12) 1px, transparent 1px, transparent calc(100% / var(--rack-units)));
}