96 lines
1.5 KiB
CSS
96 lines
1.5 KiB
CSS
:root {
|
|
--k: 1353651.53435435;
|
|
}
|
|
body {
|
|
text-align: center;
|
|
}
|
|
main {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
}
|
|
main > table {
|
|
margin: auto;
|
|
}
|
|
td {
|
|
text-align: left;
|
|
}
|
|
.member {
|
|
border-spacing: 0;
|
|
margin: 0;
|
|
border: 4px solid #335;
|
|
}
|
|
.legend {
|
|
border-spacing: 0;
|
|
}
|
|
.member td,
|
|
.legend td {
|
|
border: 2px inset;
|
|
}
|
|
.interface {
|
|
position: relative;
|
|
text-align: center;
|
|
min-width: 2em;
|
|
height: 2em;
|
|
mix-blend-mode: darken;
|
|
padding: 2px;
|
|
print-color-adjust: exact;
|
|
}
|
|
.vlan {
|
|
background-color: hsl(calc(var(--k) * var(--pvid)) 100% 60%);
|
|
}
|
|
.trunk {
|
|
font-weight: bold;
|
|
border: 4px solid !important;
|
|
border-image-slice: 1 !important;
|
|
border-image-source: linear-gradient(
|
|
127deg,
|
|
red,
|
|
orange,
|
|
yellow,
|
|
green,
|
|
blue,
|
|
violet
|
|
) !important;
|
|
padding: 0;
|
|
}
|
|
.hybrid {
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
hsl(calc(var(--k) * var(--tagged)) 100% 60%) 50%,
|
|
hsl(calc(var(--k) * var(--untagged)) 100% 60%) 50%
|
|
);
|
|
}
|
|
.shutdown:not([class*="loopback-detection action shutdown"]) {
|
|
background-color: lightgray !important;
|
|
background-image: none !important;
|
|
color: gray !important;
|
|
}
|
|
.poe::before {
|
|
content: "⚡";
|
|
font-size: 0.7em;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.voice_vlan::after {
|
|
content: "📞";
|
|
font-size: 0.7em;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
footer {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
#colorSlider {
|
|
width: 33%;
|
|
}
|
|
@media print {
|
|
#colorSliderLabel,
|
|
#colorSlider {
|
|
display: none;
|
|
}
|
|
}
|