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

hide hybrid, better print

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-07-08 17:50:57 +02:00
parent 6193ae3edb
commit 1bcb980fd6
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
style.css
View File

@ -12,12 +12,15 @@
}
body {
margin: 2rem auto;
padding: 0 1rem;
margin: 0;
padding: 2rem 1rem;
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
color: #333;
display: flex;
flex-direction: column;
height: 100vh;
}
h1 {
@ -94,10 +97,11 @@ h2 {
}
main {
flex-grow: 2;
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: space-evenly;
justify-content: space-around;
gap: 1rem;
margin-bottom: 2rem;
}
@ -163,7 +167,9 @@ main {
.vlan {
--pvid: 0;
--pvid-color: hsl(calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness));
--pvid-color: hsl(
calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness)
);
color: #ecf0f1;
text-shadow: 1px 2px 2px black;
background-color: var(--pvid-color);
@ -187,13 +193,13 @@ main {
);
}
.hybrid {
/*.hybrid {
--tagged: 0;
--tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness));
--untagged: var(--pvid);
--untagged-color: hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness));
background-image: linear-gradient(145deg, transparent 50%, var(--tagged-color) 50%);
}
background-image: linear-gradient(145deg, transparent 65%, var(--tagged-color) 65%);
}*/
.shutdown:not([class*="loopback-detection action shutdown"]) {
background-color: lightgray;
@ -249,7 +255,6 @@ input[type="color"] {
@media print {
body {
margin: auto;
padding: 0;
background-color: unset;
}

10
switch.php
View File

@ -107,10 +107,10 @@ foreach ($interfaces as $interface) {
<td class='interface trunk'></td>
<td colspan='2'>Trunk</td>
</tr>
<tr>
<!--<tr>
<td class='interface hybrid' style='--tagged:60; --untagged:0'></td>
<td colspan='2'>Hybride (PVID / tagged)</td>
</tr>
</tr>-->
<tr>
<td class='interface poe'></td>
<td colspan='2'>Power on Ethernet</td>
@ -137,9 +137,9 @@ foreach ($interfaces as $interface) {
function changeColor(pvid, color) {
for (let i = customColors.sheet.cssRules.length - 1; i >= 0; i--) {
if (
(customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid};"]`)
|| (customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid};"]`)
|| (customColors.sheet.cssRules[i].selectorText == `[style*="--untagged: ${pvid};"]`)
(customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid};"]`) ||
(customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid};"]`) ||
(customColors.sheet.cssRules[i].selectorText == `[style*="--untagged: ${pvid};"]`)
) {
customColors.sheet.deleteRule(i)
}