use css variables to configure ui colors

GlobalNOC · Oct 14, 2021 · 7683af1 · 7683af1
1 parent eeb1ae8
commit 7683af1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 11 deletions.
diff --git a/conf/routerproxy.yaml b/conf/routerproxy.yaml
@@ -283,6 +283,7 @@ frontend:
   dropdown: 0
   help: 'Note: some text that does not contain greater/less than sign'
   network_name: My Network
+  primary_color: '#990000'
   noc_mail: My Email Address
   noc_name: My NOC
   noc_site: http://noc.network.net

diff --git a/lib/GRNOC/RouterProxy/Config.pm b/lib/GRNOC/RouterProxy/Config.pm
@@ -547,6 +547,26 @@ sub NetworkName {
     return $self->{'frontend'}->{'network_name'};
 }
 
+=head2 PrimaryColor
+
+Returns the primary UI color.
+
+=cut
+sub PrimaryColor {
+    my $self = shift;
+    return $self->{'frontend'}->{'primary_color'} || '#990000';
+}
+
+=head2 SecondaryColor
+
+Returns the secondary UI color.
+
+=cut
+sub SecondaryColor {
+    my $self = shift;
+    return $self->{'frontend'}->{'secondary_color'} || $self->PrimaryColor();
+}
+
 =head2 NOCName
 
 Returns the name of the NOC.

diff --git a/templates/index.tt b/templates/index.tt
@@ -3,6 +3,12 @@
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script type="text/javascript" src="routerproxy.js"></script>
+  <style>
+    :root {
+      --primary-color: [% primary_color %];
+      --secondary-color: [% secondary_color %];
+    }
+  </style>
 
   <head>
     <meta charset="UTF-8">

diff --git a/webroot/index.cgi b/webroot/index.cgi
@@ -282,11 +282,13 @@ sub makeHTML2 {
     }
 
     my $html = "";
-    my $vars = { network_name => $conf->NetworkName(),
-                 noc_mail     => $conf->NOCMail(),
-                 noc_name     => $conf->NOCName(),
-                 noc_site     => $conf->NOCSite(),
-                 groups       => $conf->DeviceGroups(sort_devices => 1)
+    my $vars = { network_name    => $conf->NetworkName(),
+                 primary_color   => $conf->PrimaryColor(),
+                 secondary_color => $conf->SecondaryColor(),
+                 noc_mail        => $conf->NOCMail(),
+                 noc_name        => $conf->NOCName(),
+                 noc_site        => $conf->NOCSite(),
+                 groups          => $conf->DeviceGroups(sort_devices => 1)
                };
     $tt->process($input, $vars, \$html);
 

diff --git a/webroot/style.css b/webroot/style.css
@@ -22,7 +22,7 @@ div.logo {
   font-size: 22px;
   font-weight: bold;
   text-align: center;
-  color: #990000;
+  color: var(--primary-color);
 }
 
 div.devices {
@@ -70,7 +70,7 @@ table.menu-table {
     display: none;
   width: auto;
   border: 1px dotted black;
-  background-color: #990000;
+  background-color: var(--primary-color);
 }
 
 table.title {
@@ -117,7 +117,7 @@ select.host_command_select {
 
 tr.menu-title {
 
-  background-color: #990000;
+  background-color: var(--primary-color);
   color: white;
   font-family: Arial,Helvetica;
   font-size: 12px;
@@ -126,7 +126,7 @@ tr.menu-title {
 
 tr.title {
 
-  background-color: #990000;
+  background-color: var(--primary-color);
   color: white;
   font-family: Arial,Helvetica;
   font-size: 12px;
@@ -167,7 +167,7 @@ h4 {
 a {
 
   font-family: Arial,Helvetica;
-  color: #990000;
+  color: var(--primary-color);
   text-decoration: none;
 }
 
@@ -208,7 +208,7 @@ li ul {
     position: absolute;
     top: 11px;
     left: 0;
-    background-color: #990000;
+    background-color: var(--primary-color);
 }
 
 li:hover ul, li.over ul {