From b51d5bbefa3f3612c68d807bccfcf7d4e1d5f357 Mon Sep 17 00:00:00 2001
From: Christian Witzler <c.witzler@fz-juelich.de>
Date: Thu, 6 Jul 2023 07:48:07 +0200
Subject: [PATCH 1/2] use a color definition css to make overwriting the color
 values more central and enable easier changes

---
 static/css/base.css   | 34 ++++++++++++++++++----------------
 static/css/colors.css |  9 +++++++++
 static/css/error.css  |  6 ++++--
 static/css/footer.css | 14 ++++++++------
 static/css/header.css |  8 +++++---
 static/css/home.css   | 20 +++++++++++---------
 static/css/login.css  | 20 +++++++++++---------
 7 files changed, 66 insertions(+), 45 deletions(-)
 create mode 100644 static/css/colors.css

diff --git a/static/css/base.css b/static/css/base.css
index 00a40d9..2332823 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,6 +1,8 @@
+@import url(color.css);
+
 html,
 body {
-  background-color: #023d6b;
+  background-color:  var(--first-color);
   /* background: #fefefe; */
   font-family: "Weissenhof_Grotesk", Arial, Helvetica, sans-serif;
   height: 100%;
@@ -12,7 +14,7 @@ main {
 }
 
 .bg-primary {
-  background: #023d6b !important;
+  background:  var(--first-color) !important;
   color: #fff; 
 }
 
@@ -22,8 +24,8 @@ main {
 }
 
 .bg-info {
-  background: #adbde3 !important;
-  /* color: #023d6b; */
+  background:  var(--second-color) !important;
+  /* color:  var(--first-color); */
 }
 
 .text-secondary {
@@ -43,29 +45,29 @@ main {
 
 a {
   text-decoration: none;
-  color: #023d6b;
+  color:  var(--first-color);
 }
 
 a:hover {
   text-decoration: underline;
   text-decoration-skip-ink: none;
-  color: #002036;
+  color:  var(--third-color);
 }
 
 a.nav-link {
-  color: #023d6b;
+  color:  var(--first-color);
 }
 
 a.nav-link:hover {
-  color: #002036;
+  color:  var(--third-color);
 }
 
 
 /* Buttons */
 
 .btn-primary {
-  background-color: #023d6b;
-  border-color: #023d6b;
+  background-color:  var(--first-color);
+  border-color:  var(--first-color);
 }
 
 .btn-primary:hover,
@@ -76,15 +78,15 @@ a.nav-link:hover {
 }
 
 .btn-outline-primary {
-  border-color: #023d6b;
-  color: #023d6b;
+  border-color:  var(--first-color);
+  color:  var(--first-color);
 }
 
 .btn-outline-primary:hover,
 .btn-outline-primary:focus,
 .btn-outline-primary:active {
-  background-color: #023d6b;
-  border-color: #023d6b;
+  background-color:  var(--first-color);
+  border-color:  var(--first-color);
   color: #fff;
 }
 
@@ -92,7 +94,7 @@ a.nav-link:hover {
 /* Progress bar */
 
 .progress-bar {
-  background-color: #023d6b;
+  background-color:  var(--first-color);
 }
 
 
@@ -100,7 +102,7 @@ a.nav-link:hover {
 
 .form-select.disabled {
   pointer-events: none;
-  background-color: #e9ecef;
+  background-color:  var(--fifth-color);
   background-image: none;
 }
 
diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..d4d52a4
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,9 @@
+/* Define colors */
+:root {
+    --first-color:#023d6b;   /*#023d6b*/
+    --second-color:#adbde3;  /*#adbde3*/
+    --third-color:#002036;   /*#002036*/
+    --fourth-color:#e5e6e7;  /*#e5e6e7*/
+    --fifth-color:#e9ecef;   /*#e9ecef*/
+    --sixth-color:##225f8d;   /*##225f8d*/
+}
diff --git a/static/css/error.css b/static/css/error.css
index 32b4637..fd470d0 100644
--- a/static/css/error.css
+++ b/static/css/error.css
@@ -1,7 +1,9 @@
+@import url(color.css);
+
 a {
-  color: #adbde3;
+  color:  var(--second-color);
 }
 
 a:hover {
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/static/css/footer.css b/static/css/footer.css
index ecb6441..ca7c8a5 100644
--- a/static/css/footer.css
+++ b/static/css/footer.css
@@ -1,3 +1,5 @@
+@import url(color.css);
+
 /* Top 
 Footer */
 
@@ -14,12 +16,12 @@ div[id^='ampel'] {
 }
 
 #footer-top a {
-  color: #023d6b;
+  color:  var(--first-color);
   font-weight: bold;
 }
 
 #footer-top a:hover {
-  color: #002036;
+  color:  var(--third-color);
 }
 
 
@@ -27,7 +29,7 @@ div[id^='ampel'] {
 Footer */
 
 #footer-bottom {
-  background-color: #002036;
+  background-color:  var(--third-color);
   min-height: 60px;
   padding-left: 72px;
   padding-right: 72px;
@@ -43,18 +45,18 @@ Footer */
 */
 
 /* .tooltip-inner {
-  background-color: #002036;
+  background-color:  var(--third-color);
   border-radius: 0;
 }
 
 .tooltip .tooltip-arrow::before {
-  border-top-color: #002036;
+  border-top-color:  var(--third-color);
 } */
 
 .tooltip-inner {
   background-color: #eee;
   border-radius: 0;
-  color: #002036;
+  color:  var(--third-color);
   min-height: 42px;
   max-width: unset;
   white-space: pre-line;
diff --git a/static/css/header.css b/static/css/header.css
index 9e75563..e6b2ea8 100644
--- a/static/css/header.css
+++ b/static/css/header.css
@@ -1,3 +1,5 @@
+@import url(color.css);
+
 nav .nav-link {
   font-size: 19px;
   border-bottom: 5px solid transparent;
@@ -8,8 +10,8 @@ nav .nav-link:hover,
 nav .nav-link.active,
 .navbar-collapse .navlink:hover,
 .navbar-collapse .navlink.active {
-  border-bottom: 5px solid #023d6b;
-  color: #023d6b;
+  border-bottom: 5px solid  var(--first-color);
+  color:  var(--first-color);
   font-weight: bold;
 }
 
@@ -29,4 +31,4 @@ nav .nav-link.active,
 
 #logout:hover {
   text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/static/css/home.css b/static/css/home.css
index af8c465..c3554c5 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -1,3 +1,5 @@
+@import url(color.css);
+
 td h6 {
   font-size: .75rem;
 }
@@ -13,11 +15,11 @@ tr.lab-collapsible-tr {
 .table-new-lab {
   --bs-table-bg: #fff;
   --bs-table-striped-bg: #fff;
-  --bs-table-striped-color: #023d6b;
+  --bs-table-striped-color:  var(--first-color);
   --bs-table-active-bg: #fff;
-  --bs-table-active-color: #023d6b;
-  --bs-table-hover-bg: #e5e6e7;
-  --bs-table-hover-color: #023d6b;
+  --bs-table-active-color:  var(--first-color);
+  --bs-table-hover-bg:  var(--fourth-color);
+  --bs-table-hover-color:  var(--first-color);
   color: #000;
   text-transform: uppercase
 }
@@ -28,7 +30,7 @@ Info icon
 */
 
 .progress-log-btn {
-  color: #023d6b;
+  color:  var(--first-color);
 }
 
 .progress-log-btn:hover {
@@ -70,12 +72,12 @@ Vertical tabs
   display: flex;
   justify-content: space-between;
   text-align: start;
-  color: #023d6b;
-  border: 1px solid #023d6b !important;
+  color:  var(--first-color);
+  border: 1px solid  var(--first-color) !important;
 }
 
 .nav-pills button.active {
-  background-color: #023d6b !important;
+  background-color:  var(--first-color) !important;
 }
 
 .nav-pills svg {
@@ -103,4 +105,4 @@ pre {
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
-}
\ No newline at end of file
+}
diff --git a/static/css/login.css b/static/css/login.css
index 664d335..ddbe172 100644
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -1,8 +1,10 @@
+@import url(color.css);
+
 /* Login div */
 
 #login-div h3, 
 #login-div h4 {
-  color: #023d6b;
+  color:  var(--first-color);
 }
 
 #upper-login-div {
@@ -52,10 +54,10 @@
  
 #link-div a {
   display: block;
-  color: #023d6b;
+  color:  var(--first-color);
   padding: 15px 20px 15px 30px;
-  background: url("/hub/static/images/sprite.png") #adbde3 no-repeat 12px -5139px;
-  /* background-color: #adbde3; */
+  background: url("/hub/static/images/sprite.png")  var(--second-color) no-repeat 12px -5139px;
+  /* background-color:  var(--second-color); */
 }
 
 #link-div a:hover {
@@ -84,7 +86,7 @@
 }
 
 .carousel-item a {
-  color: #023d6b;
+  color:  var(--first-color);
 }
 .carousel-item h3 {
   background: url("/hub/static/images/pages/login/blue_line.png") no-repeat 0 100%;
@@ -98,7 +100,7 @@
 
 .carousel-indicators button {
   border: 2px solid white !important;
-  background-color: #adbde3 !important;
+  background-color:  var(--second-color) !important;
   border-radius: 50%;
   height: 14px !important;
   width: 14px !important;
@@ -106,11 +108,11 @@
 }
 
 .carousel-indicators button:hover {
-  background-color: #002036 !important;
+  background-color:  var(--third-color) !important;
 }
 
 .carousel-indicators button.active {
-  background-color: #023d6b !important;
+  background-color:  var(--first-color) !important;
 }
 
 .carousel-control-prev,
@@ -130,4 +132,4 @@
 
 .carousel-control-next-icon {
   background-image: url("/hub/static/images/pages/login/right_whitebg_arrow.svg");
-}
\ No newline at end of file
+}

From 34cd6508ddb17c73a53a2092aba55662a1a836f2 Mon Sep 17 00:00:00 2001
From: ChristianWitzler <57713653+ChristianWitzler@users.noreply.github.com>
Date: Thu, 6 Jul 2023 07:56:39 +0200
Subject: [PATCH 2/2] Rename colors.css to color.css

---
 static/css/{colors.css => color.css} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename static/css/{colors.css => color.css} (100%)

diff --git a/static/css/colors.css b/static/css/color.css
similarity index 100%
rename from static/css/colors.css
rename to static/css/color.css