wireguard.cgi: add css color style for VPN peer status

ipfire has changed theme css style and wireguard.cgi relies
on the new css style, replace the bpfire css style with ipfire style
breaks other cgi style, so make the change minium that is only
relevant to wireguard.cgi VPN peers status.

Signed-off-by: Vincent Li <vincent.mc.li@gmail.com>
This commit is contained in:
Vincent Li
2025-07-07 21:10:23 +00:00
parent a3f7758510
commit 4885bc8554

View File

@@ -1,3 +1,23 @@
:root {
--color-green : #339933;
--color-green-invert : #ffffff;
--color-red : #993333;
--color-red-invert : #ffffff;
--color-blue : #333399;
--color-blue-invert : #ffffff;
--color-orange : #ff9933;
--color-orange-invert : #ffffff;
--color-yellow : #ffbe00;
--color-yellow-invert : #ffffff;
--color-black : #363636;
--color-black-invert : #ffffff;
--color-grey : #d6d6d6;
--color-light-grey : #f0f0f0;
--color-primary : #ff2e52;
--color-primary-invert : #ffffff;
--color-text : #363636;
}
/* This controls the width of the fixed width layouts */
@@ -360,6 +380,21 @@ table {
border-bottom: 1px solid #363636;
}
.tbl .status {
text-align: center;
font-weight: bold;
}
.tbl .status.is-running, .tbl .status.is-connected {
background-color: var(--color-green);
color: var(--color-green-invert);
}
.tbl .status.is-stopped, .tbl .status.is-disconnected {
background-color: var(--color-red);
color: var(--color-red-invert);
}
table.fw-nat tbody tr td {
height: 2.25em;
}