style tweaks

rj45-inverse.svg

@@ -8,10 +8,33 @@
    version="1.1"
    id="svg1"
    xml:space="preserve"
+   sodipodi:docname="rj45-inverse.svg"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="36.75"
+     inkscape:cx="9.9863946"
+     inkscape:cy="10"
+     inkscape:window-width="1680"
+     inkscape:window-height="979"
+     inkscape:window-x="1912"
+     inkscape:window-y="19"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1-2" /><defs
      id="defs1" /><g
-     id="layer1"><path
+     id="layer1-2"
-       id="rect1"
+     transform="rotate(180,2.6458334,2.6458334)"><path
-       style="fill:#2c3e50;fill-opacity:1;stroke-width:0.070003"
+       id="rect1-4"
-       d="M 5.2916667,5.2916667 V 0 H 0 V 5.2916667 Z M 3.053471,5.0955058 H 2.1270226 c -0.1791197,0 -0.3233547,-0.1786164 -0.3233547,-0.4004672 V 4.6089016 H 0.6662988 c -0.2740052,0 -0.4168283,-0.1937524 -0.4152798,-0.5331205 L 0.2646994,1.077648 C 0.2662479,0.73827953 0.405974,0.5447123 0.6799792,0.5447123 h 3.9317083 c 0.2740052,0 0.4169649,0.19356723 0.4154164,0.5329357 l -0.01368,2.9981332 C 5.0118745,4.4151493 4.8720123,4.6089017 4.5980071,4.6089017 H 3.3768255 v 0.086137 c 0,0.2218508 -0.1442347,0.4004672 -0.3233545,0.4004671 z" /></g></svg>
+       style="fill:#34495e;fill-opacity:1;stroke-width:0.070003"
+       d="M 0,0 V 5.2916667 H 5.2916667 V 0 H 2.8222222 Z m 2.2381957,0.19616086 h 0.9264484 c 0.1791197,0 0.3233547,0.15265851 0.3233547,0.37450931 v 0.0861369 h 1.1373691 c 0.2740052,0 0.4168283,0.1937523 0.4152798,0.53312043 l -0.01368,2.9981332 C 5.0254188,4.5274292 4.8856927,4.7209964 4.6116875,4.7209964 H 0.67997917 c -0.27400514,0 -0.41696486,-0.1935672 -0.41541633,-0.5329357 L 0.27824324,1.1899275 C 0.27979177,0.85055938 0.41965443,0.65680703 0.69365957,0.65680703 H 1.9148412 v -0.0861369 c 0,-0.2218508 0.1442347,-0.37450927 0.3233545,-0.37450927 z"
+       sodipodi:nodetypes="ccccccssscsscssssscss" /></g></svg>

rj45.svg

@@ -8,10 +8,32 @@
    version="1.1"
    id="svg1"
    xml:space="preserve"
+   sodipodi:docname="rj45.svg"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="36.75"
+     inkscape:cx="10"
+     inkscape:cy="10"
+     inkscape:window-width="1680"
+     inkscape:window-height="979"
+     inkscape:window-x="1912"
+     inkscape:window-y="19"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
      id="defs1" /><g
      id="layer1"><path
        id="rect1"
-       style="fill:#2c3e50;fill-opacity:1;stroke-width:0.070003"
+       style="fill:#34495e;fill-opacity:1;stroke-width:0.070003"
-       d="M 0,0 V 5.2916667 H 5.2916667 V 0 Z m 2.2381957,0.19616086 h 0.9264484 c 0.1791197,0 0.3233547,0.17861648 0.3233547,0.40046728 v 0.0861369 h 1.1373691 c 0.2740052,0 0.4168283,0.19375231 0.4152798,0.53312046 l -0.01368,2.9981332 C 5.0254188,4.5533872 4.8856927,4.7469544 4.6116875,4.7469544 H 0.67997917 c -0.27400514,0 -0.41696486,-0.1935672 -0.41541633,-0.5329357 L 0.27824324,1.2158855 C 0.27979176,0.87651735 0.41965443,0.682765 0.69365957,0.682765 H 1.9148412 V 0.5966281 c 0,-0.2218508 0.1442347,-0.40046724 0.3233545,-0.40046724 z" /></g></svg>
+       d="M 0,0 V 5.2916667 H 5.2916667 V 0 H 2.8222222 Z m 2.2381957,0.19616086 h 0.9264484 c 0.1791197,0 0.3233547,0.15265851 0.3233547,0.37450931 v 0.0861369 h 1.1373691 c 0.2740052,0 0.4168283,0.1937523 0.4152798,0.53312043 l -0.01368,2.9981332 C 5.0254188,4.5274292 4.8856927,4.7209964 4.6116875,4.7209964 H 0.67997917 c -0.27400514,0 -0.41696486,-0.1935672 -0.41541633,-0.5329357 L 0.27824324,1.1899275 C 0.27979177,0.85055938 0.41965443,0.65680703 0.69365957,0.65680703 H 1.9148412 v -0.0861369 c 0,-0.2218508 0.1442347,-0.37450927 0.3233545,-0.37450927 z"
+       sodipodi:nodetypes="ccccccssscsscssssscss" /></g></svg>

show.php

@@ -108,11 +108,11 @@ echo ("-->");*/
         <footer>
             <label id="colorSliderLabel" for="colorSlider" class="no-print">Changer les couleurs</label>
             <input id="colorSlider" type="range" min="0" max="2000000" step="0.000000001" value="1353651.53435435"
-                oninput="document.documentElement.style.setProperty('--k', this.value);" class="no-print"/>
+                oninput="document.documentElement.style.setProperty('--hue', this.value);" class="no-print" />
-            <a href="<?=str_replace(__DIR__."/", "", $path) ?>" target="_blank" class="link no-print">Télécharger la configuration</a>
+            <a href="<?= str_replace(__DIR__ . "/", "", $path) ?>" target="_blank" class="link no-print">Télécharger la configuration</a>
             <a href="index.php" class="link no-print">← Retour à la liste</a>
         </footer>
     </div>
 </body>
 
-</html>
+</html>

style.css

@@ -124,6 +124,7 @@ td {
   border-radius: 6px;
   background-color: #34495e;
   margin-bottom: 0.5rem;
+  print-color-adjust: exact;
 }
 
 .member-id {
@@ -133,7 +134,7 @@ td {
   text-shadow: 0 1px 3px #fffb;
   font-weight: bold;
   border: 2px inset black;
-  font-family: "Small Fonts", "Courier", monospace;
+  font-family: monospace;
   margin: 1em 0.5em;
   padding: 0.12em 0.4em;
 }
@@ -151,14 +152,15 @@ td {
   min-width: 2em;
   height: 2em;
   mix-blend-mode: darken;
-  print-color-adjust: exact;
   cursor: help;
   transition: 0.2s background-color;
-  border: 4px solid;
+  border: 2px inset #476079;
+  border-image-width: 4px;
   border-image-slice: 3;
   border-image-source: url(rj45.svg);
   border-image-repeat: stretch;
   background-color: white;
+  print-color-adjust: exact;
 }
 
 .member tr:nth-child(even) .interface {
@@ -221,8 +223,8 @@ td {
   content: "⚡";
   font-size: 0.7em;
   position: absolute;
-  top: -0.7em;
+  top: -0.5em;
-  right: -0.7em;
+  right: -0.5em;
 }
 
 .voice_vlan::after {