[chores:ui] Migrated colors to openwisp-utils theme CSS variables #277

Closes #277

Author: panagiotisevaggelou

openwisp_network_topology/static/netjsongraph/css/admin.css

@@ -1,6 +1,6 @@
 input[type="text"].readonly {
-  border: 1px solid rgba(0, 0, 0, 0.05) !important;
-  background-color: rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--ow-overlay-5) !important;
+  background-color: var(--ow-overlay-7);
 }
 
 #id_receive_url {

openwisp_network_topology/static/netjsongraph/css/src/netjsongraph-theme.css

@@ -1,55 +1,55 @@
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out {
   background: rgba(217, 79, 52, 0.85) !important;
-  color: #fff !important;
+  color: var(--ow-color-white) !important;
 }
 
 .leaflet-control-layers {
   background: rgba(217, 79, 52, 0.85) !important;
-  color: #fff !important;
+  color: var(--ow-color-white) !important;
 }
 
 .switch-wrap {
-  color: #fff;
+  color: var(--ow-color-white);
 }
 
 .switch-wrap label {
   border: 1px solid #dfdfdf;
-  background: #ffffff;
+  background: var(--ow-color-white);
 }
 
 .switch-wrap label::before {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
-  background-color: #fff;
+  background-color: var(--ow-color-white);
 }
 
 .switch-wrap input[type="checkbox"]:checked + label {
   background: grey;
 }
 
 .njg-date {
-  color: #fff;
+  color: var(--ow-color-white);
 }
 
 .njg-selectIcon {
   background: rgba(217, 79, 52, 0.85);
-  color: #ffffff;
+  color: var(--ow-color-white);
 }
 
 .njg-searchBtn {
   background-color: white;
 }
 
 .njg-sideBar {
-  background-color: #fff;
+  background-color: var(--ow-color-white);
 }
 
 .sideBarHandle {
   background: rgba(217, 79, 52, 0.85);
 }
 
 .sideBarHandle::before {
-  color: #fff;
+  color: var(--ow-color-white);
 }
 
 .njg-metaData,
@@ -58,23 +58,23 @@
 }
 
 .njg-tooltip {
-  background: #fff !important;
+  background: var(--ow-color-white) !important;
   border: none !important;
 }
 
 .njg-tooltip-key,
 .njg-tooltip-value {
-  color: #000;
+  color: var(--ow-color-black);
 }
 
 .marker-cluster div {
-  color: #fff;
+  color: var(--ow-color-white);
   background-color: rgba(21, 102, 169, 0.8) !important;
 }
 
 @media only screen and (max-width: 850px) {
   .njg-sideBar {
     background: rgba(255, 255, 255, 0.96);
-    color: #000;
+    color: var(--ow-color-black);
   }
 }

openwisp_network_topology/static/netjsongraph/css/style.css

@@ -13,7 +13,7 @@
   padding: 8px 15px;
   background: #fbfbfb;
   border-radius: 8px;
-  color: #000;
+  color: var(--ow-color-black);
   font-family: Arial, sans-serif;
   font-family: sans-serif;
   font-size: 14px;
@@ -52,13 +52,13 @@
 }
 
 .njg-sideBar h2 {
-  color: #000;
+  color: var(--ow-color-black);
   margin: 0;
   font-size: 20px;
 }
 
 .njg-sideBar * {
-  color: #000;
+  color: var(--ow-color-black);
   box-sizing: border-box;
 }
 
@@ -82,7 +82,7 @@
   right: 15px;
   top: 15px;
   font-size: 30px;
-  color: #fff;
+  color: var(--ow-color-white);
   cursor: pointer;
 }
 
@@ -94,7 +94,7 @@ body .frontend {
 }
 
 .njg-switcher {
-  background: #fff;
+  background: var(--ow-color-white);
   border-radius: 5px;
   font-family: Arial, sans-serif;
   font-family: sans-serif;
@@ -111,7 +111,7 @@ body .frontend {
 }
 
 .njg-switcher * {
-  color: #000;
+  color: var(--ow-color-black);
 }
 
 #njg-datepicker {
@@ -120,12 +120,12 @@ body .frontend {
   padding: 5px 10px;
   width: 94px;
   outline: none;
-  color: #000 !important;
+  color: var(--ow-color-black) !important;
 }
 
 #njg-datepicker:focus {
-  border: 1px solid #df5d43;
-  color: #df5d43 !important;
+  border: 1px solid var(--ow-color-primary);
+  color: var(--ow-color-primary) !important;
 }
 
 #ui-datepicker-div {
@@ -137,42 +137,42 @@ body .frontend {
 }
 
 #ui-datepicker-div tr {
-  background: #fff !important;
+  background: var(--ow-color-white) !important;
 }
 
 .ui-datepicker-header {
-  background: #fff !important;
-  color: #000 !important;
+  background: var(--ow-color-white) !important;
+  color: var(--ow-color-black) !important;
   border: none !important;
 }
 
 .ui-state-default {
   border: none !important;
-  background: #fff !important;
-  color: #000 !important;
+  background: var(--ow-color-white) !important;
+  color: var(--ow-color-black) !important;
   text-align: center !important;
 }
 
 .ui-state-default:hover,
 .ui-state-default:focus,
 .ui-state-active {
-  background: #333 !important;
-  color: #fff !important;
+  background: var(--ow-color-fg-darker) !important;
+  color: var(--ow-color-white) !important;
 }
 
 .ui-state-default:hover {
   background: #7b7b7b !important;
 }
 
 .ui-datepicker-today a {
-  background: #df5d43 !important;
-  color: #fff !important;
+  background: var(--ow-color-primary) !important;
+  color: var(--ow-color-white) !important;
 }
 
 .ui-datepicker thead th {
   line-height: normal;
   text-transform: uppercase;
   font-size: 11px;
-  background: #fff;
-  color: #000;
+  background: var(--ow-color-white);
+  color: var(--ow-color-black);
 }