diff --git a/html/index.html b/html/index.html
index b1e025d0..09627110 100644
--- a/html/index.html
+++ b/html/index.html
@@ -129,15 +129,14 @@ label.row span.lb{width:110px;flex:none;color:var(--fg2);font-size:13px}
 .port .jack:before{content:"";
   position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
   width:6px;height:5px;margin-bottom:7px;border-radius: 1px 1px 0 0;
-  background-color:var(--pc,var(--fg2));
+  background-color:var(--fg2);
 }
 .port.sfp .jack{width:24px;height:16px;margin:0 auto 2px;border-top-width:5px}
-.port.sfp .jack:before{
-  width:10px;margin-bottom:2px;border-radius:0 0 1px 1px;
-  background-color:color-mix(in srgb,var(--pc, var(--panel2)) 10%,var(--panel2));
-}
+.port.sfp .jack:before{width:10px;margin-bottom:2px;border-radius:0 0 1px 1px;background-color:var(--panel2)}
 .port.up{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,var(--panel2))}
 .port.up .jack{border-color:var(--pc);opacity:1}
+.port.up .jack:before{background-color:var(--pc)}
+.port.up.sfp .jack:before{background-color:color-mix(in srgb,var(--pc) 10%,var(--panel2))}
 .port.up .ps{color:var(--pc);font-weight:600}
 .port.dis{opacity:.45;border-style:dashed}
 .badge{font-size:11px;font-weight:600;border-radius:10px;padding:1px 8px;background:var(--panel2);color:var(--fg2)}