70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
CSS
*{
|
|
color-adjust: exact;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
: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 {
|
|
text-align: center;
|
|
min-width: 2em;
|
|
height: 2em;
|
|
mix-blend-mode: darken;
|
|
padding: 2px;
|
|
}
|
|
.vlan {
|
|
background-color: hsl(calc(var(--k)*var(--pvid)) 100% 60%);
|
|
}
|
|
.trunk {
|
|
position: relative;
|
|
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 {
|
|
background-color: lightgray !important;
|
|
background-image: none !important;
|
|
color: gray !important;
|
|
}
|
|
.poe {
|
|
position: relative;
|
|
}
|
|
.poe::after {
|
|
content: "⚡";
|
|
font-size: 0.7em;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
} |