adrien/tableau-vlans
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tweak style

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-10 17:26:17 +02:00
parent 74c0812128
commit c5c2dc5a10
1 changed files with 19 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
style.css
View File

@ -138,8 +138,8 @@ main {
height: 2em; height: 2em;
cursor: help; cursor: help;
transition: 0.2s background-color; transition: 0.2s background-color;
border: 2px inset #476079; border: 3px inset #476079;
border-image-width: 4px; border-image-width: 5px;
border-image-slice: 3; border-image-slice: 3;
border-image-source: url(rj45.svg); border-image-source: url(rj45.svg);
border-image-repeat: stretch; border-image-repeat: stretch;
@ -158,7 +158,7 @@ main {
.vlan { .vlan {
--pvid: 0; --pvid: 0;
color: #ecf0f1; color: #ecf0f1;
text-shadow: 0 1px 2px black; text-shadow: 1px 2px 2px black;
background-color: hsl( background-color: hsl(
calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness) calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness)
); );
@ -170,41 +170,28 @@ main {
} }
.trunk:not(.shutdown) { .trunk:not(.shutdown) {
font-weight: bold;
background-image: linear-gradient( background-image: linear-gradient(
127deg, 145deg,
transparent 60%,
red, red,
orange, orange,
yellow, yellow,
green, green,
blue, blue,
violet violet
) !important; );
background-size: cover;
background-position: center;
background-origin: border-box;
} }
/*.trunk:not(.shutdown) {
font-weight: bold;
border: 4px solid;
border-image-slice: 1 !important;
border-image-source: linear-gradient(
127deg,
red,
orange,
yellow,
green,
blue,
violet
) !important;
}*/
/*.hybrid { /*.hybrid {
--tagged: 0; --tagged: 0;
--untagged: var(--pvid); --untagged: var(--pvid);
background-image: linear-gradient( background-image: linear-gradient(
135deg, 135deg,
hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 50%, hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 60%,
hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness)) hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness)) 60%
50%
); );
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -218,20 +205,20 @@ main {
text-shadow: none; text-shadow: none;
} }
.poe::before { .voice_vlan::before {
content: "⚡";
position: absolute;
top: -0.5em;
right: -0.5em;
}
.voice_vlan::after {
content: "📞"; content: "📞";
position: absolute; position: absolute;
bottom: -0.4em; bottom: -0.4em;
left: -0.4em; left: -0.4em;
} }
.poe::after {
content: "⚡";
position: absolute;
top: -0.5em;
right: -0.5em;
}
.legend { .legend {
border-spacing: 0; border-spacing: 0;
} }