diff --git a/show.php b/show.php index 37d9cc2..b1ce9be 100644 --- a/show.php +++ b/show.php @@ -29,7 +29,7 @@ $otherPattern = " .*$NL"; $endPattern = "(?<!#)"; preg_match_all("/$startPattern$vlanPvidPattern(?:$vlanNamePattern|$vlanDescriptionPattern|$otherPattern)*$endPattern/", $conf, $vlans, PREG_SET_ORDER); $interfaceAddressPattern = "interface [\w-]+(?P<member>\d+)\/0\/(?P<port>\d+)$NL"; -$pvidPattern = " port (?:access|trunk pvid) vlan (?P<pvid>\d+)$NL"; +$pvidPattern = " port (?:access|trunk pvid|hybrid pvid) vlan (?P<pvid>\d+)$NL"; $portHybridPattern = " port hybrid (?:pvid )?vlan (?:(?P<tagged>\d+)(?: [0-9a-z ]*)? tagged|(?P<untagged>\d+)(?: \d+)* untagged)$NL"; $voiceVlanPattern = " voice-vlan (?P<voice_vlan>\d+) enable$NL"; preg_match_all("/$startPattern$interfaceAddressPattern(?:$pvidPattern|$portHybridPattern|$voiceVlanPattern|$otherPattern)*$endPattern/", $conf, $interfaces, PREG_SET_ORDER); @@ -137,10 +137,13 @@ foreach ($interfaces as $interface) { for (let i = 0; i < customColors.sheet.cssRules.length; i++) { if (customColors.sheet.cssRules[i].selectorText == `[style*="--pvid: ${pvid}"]`) { customColors.sheet.deleteRule(i) - break + } + if (customColors.sheet.cssRules[i].selectorText == `[style*="--tagged: ${pvid}"]`) { + customColors.sheet.deleteRule(i) } } - customColors.sheet.insertRule(`[style*="--pvid: ${pvid}"] { background-color: ${color} }`) + customColors.sheet.insertRule(`[style*="--pvid: ${pvid}"] { --pvid-color: ${color} }`) + customColors.sheet.insertRule(`[style*="--tagged: ${pvid}"] { --tagged-color: ${color} }`) } </script> </body> diff --git a/style.css b/style.css index 38c32ca..ea8289f 100644 --- a/style.css +++ b/style.css @@ -163,11 +163,10 @@ main { .vlan { --pvid: 0; + --pvid-color: hsl(calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness)); color: #ecf0f1; text-shadow: 1px 2px 2px black; - background-color: hsl( - calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness) - ); + background-color: var(--pvid-color); } .vlan:hover { @@ -190,11 +189,8 @@ main { .hybrid { --tagged: 0; - background-image: linear-gradient( - 145deg, - transparent 50%, - hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 50% - ); + --tagged-color: hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)); + background-image: linear-gradient(145deg, transparent 50%, var(--tagged-color) 50%); } .shutdown:not([class*="loopback-detection action shutdown"]) {