hide hybrid, better print

style.css

@@ -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;
   }
 

switch.php

@@ -6,7 +6,7 @@ if (
     strpos($path, $basedir) !== 0
     || substr($path, -4) != ".cfg"
     || !file_exists($path)
-    ) {
+) {
     http_response_code(404);
     die("Fichier non trouvé");
 }
@@ -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)
                 }
@@ -151,4 +151,4 @@ foreach ($interfaces as $interface) {
     </script>
 </body>
 
-</html>
+</html>