vpnmain.cgi: Fix connection status colours

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/html/cgi-bin/vpnmain.cgi b/html/cgi-bin/vpnmain.cgi
index 25e0f0a53535d380d671bbe694f3c23aca59ce2f..4423a29a802ed1b29b95dd3f5b916c0be2847ab0 100644 (file)
--- a/html/cgi-bin/vpnmain.cgi
+++ b/html/cgi-bin/vpnmain.cgi
@@ -3402,21 +3402,21 @@ END
        foreach my $line (@status) {
                if (($line =~ /\"$confighash{$key}[1]\".*IPsec SA established/) ||
                ($line =~ /$confighash{$key}[1]\{.*INSTALLED/)) {
-                       $col1="bgcolor='${Header::colourgreen}'";
-                       $active = "<b><font color='#FFFFFF'>$Lang::tr{'capsopen'}</font></b>";
+                       $col1="class='status is-connected'";
+                       $active = "$Lang::tr{'capsopen'}";
                        last;
                } elsif ($line =~ /$confighash{$key}[1]\[.*CONNECTING/) {
-                       $col1="bgcolor='${Header::colourorange}'";
-                       $active = "<b><font color='#FFFFFF'>$Lang::tr{'vpn connecting'}</font></b>";
+                       $col1="class='status is-connecting'";
+                       $active = "$Lang::tr{'vpn connecting'}";
                } elsif ($line =~ /$confighash{$key}[1]\{.*ROUTED/) {
-                       $col1="bgcolor='${Header::colourorange}'";
-                       $active = "<b><font color='#FFFFFF'>$Lang::tr{'vpn on-demand'}</font></b>";
+                       $col1="class='status is-connecting'";
+                       $active = "$Lang::tr{'vpn on-demand'}";
                }
        }
        # move to blue if really down
        if ($confighash{$key}[0] eq 'off' && $col1 =~ /${Header::colourred}/ ) {
-               $col1="bgcolor='${Header::colourblue}'";
-               $active = "<b><font color='#FFFFFF'>$Lang::tr{'capsclosed'}</font></b>";
+               $col1="class='status is-disabled'";
+               $active = "$Lang::tr{'capsclosed'}";
        }
        print <<END
        <td align='center' $col1>$active</td>

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index dac06ea89afd2ace38ca1101d2ae9c3df5219d4b..5b1f84b3e984bc385e4a63b1fcf7a31527875f87 100644 (file)
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -5,6 +5,8 @@
        --color-red-invert     : #ffffff;
        --color-blue           : #333399;
        --color-blue-invert    : #ffffff;
+       --color-orange         : #ff9933;
+       --color-orange-invert  : #ffffff;
        --color-grey           : #d6d6d6;
        --color-light-grey     : #f0f0f0;
 
@@ -385,7 +387,7 @@ table {
        font-weight: bold;
 }
 
-.tbl .status.is-running {
+.tbl .status.is-running, .tbl .status.is-connected {
        background-color: var(--color-green);
        color: var(--color-green-invert);
 }
@@ -397,12 +399,17 @@ table {
        width: 33%;
 }
 
+.tbl .status.is-connecting {
+       background-color: var(--color-orange);
+       color: var(--color-orange-invert);
+}
+
 .tbl .status.is-vulnerable {
        background-color: var(--color-red);
        color: var(--color-red-invert);
 }
 
-.tbl .status.is-mitigation {
+.tbl .status.is-disabled, .tbl .status.is-mitigation {
        background-color: var(--color-blue);
        color: var(--color-blue-invert);
 }