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
Download Patch File Download Diff File Expand all files Collapse all files

21
style.css
View File

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

10
switch.php
View File

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