Update color scheme

packages/jobboerse/static/index.css

@@ -1,14 +1,15 @@
 :root {
     font-family: "FreeSans", sans-serif;
-    --green: #87d38b;
-    --blue: #8ab9e7;
-    --yellow: #e9a12f;
-    --light-green: #c3e9c5;
-    --dark-green: #27682a;
-    --light-blue: #cce0f5;
-    --dark-blue: #1c5287;
-    --light-yellow: #f7deb6;
-    --dark-yellow: #a66d11;
+    --green: #558e00;
+    --light-green: #89df08;
+    --dark-green: #365d00;
+    --yellow: #f5f11e;
+    --red: #a11b21;
+    --light-turqoise: #2dc2bf;
+    --turquoise: #2dc2bf;
+    --dark-blue: #003d86;
+    --purple: #9b0a7d;
+    --header-grey: #acaeae;
     --default-padding: calc((5 / 16) * 1rem)
 }
 
@@ -21,7 +22,7 @@
 }
 
 .header-inner, .header-banner {
-    background: var(--light-green);
+    background: var(--header-grey);
     padding: var(--default-padding);
 }
 
@@ -31,7 +32,7 @@
 
 .header::after {
     content: "";
-    background-color: var(--light-green);
+    background-color: var(--header-grey);
     clip-path: polygon(100% 0%, 0% 0%, 0% 100%);
     width: 100%;
     height: min(5vh, 2.5rem);
@@ -108,6 +109,21 @@ h3 {
     color: black;
 }
 
+.footer {
+    background-color: var(--purple);
+}
+
+.footer-item {
+    color: white;
+    text-decoration: underline solid;
+    cursor: pointer;
+    padding: var(--default-padding);
+}
+
+.footer .menu a {
+    color: white;
+}
+
 .menu-item {
     background-color: #80808000;
     transition: background-color 0.25s ease-in-out;
@@ -164,7 +180,7 @@ body main {
     grid-template: [retry-msg] "m  m"[username] "ul ui"[password] "pl pi"[submit] "sb empty";
     padding: var(--default-padding);
     border-style: solid;
-    border-color: var(--blue);
+    border-color: var(--dark-blue);
     border-width: var(--default-padding);
     border-radius: var(--default-padding);
     -webkit-border-radius: var(--default-padding);
@@ -306,7 +322,7 @@ body main {
     margin: var(--default-padding);
     padding: var(--default-padding);
     border-style: solid;
-    border-color: var(--green);
+    border-color: var(--dark-blue);
     border-width: var(--default-padding);
     border-radius: var(--default-padding);
     -webkit-border-radius: var(--default-padding);
@@ -317,14 +333,14 @@ body main {
 }
 
 .joboffer-index-entry.AwaitingReview, .joboffer-index-entry.UnPublished {
-    background: var(--light-yellow);
+    background: var(--light-turqoise);
     border-style: dashed;
-    border-color: var(--yellow);
+    border-color: var(--purple);
 }
 
 .joboffer-index-entry:target {
-    background: var(--light-green);
-    border-color: var(--dark-green);
+    background: var(--light-turqoise);
+    border-color: var(--purple);
 }
 
 .column, .submission-preview {
@@ -339,7 +355,7 @@ body main {
     padding: var(--default-padding);
     text-decoration: none;
     background-color: var(--dark-blue);
-    border-color: var(--blue);
+    border-color: var(--header-grey);
     border-radius: var(--default-padding);
     -webkit-border-radius: var(--default-padding);
     -moz-border-radius: var(--default-padding);
@@ -348,7 +364,7 @@ body main {
 }
 
 .expired, .unconfirmed, .unreviewed {
-    color: red;
+    color: var(--red);
 }
 
 .hidden {
@@ -379,7 +395,8 @@ input.modal-open-check:not(:checked)+.modal-confirm-box {
 }
 
 .modal-confirm-box>.modal-open-button.confirm {
-    background-color: var(--green);
+    background-color: var(--dark-green);
+    color: white;
     padding: var(--default-padding);
     border-radius: var(--default-padding);
     -webkit-border-radius: var(--default-padding);
@@ -389,7 +406,8 @@ input.modal-open-check:not(:checked)+.modal-confirm-box {
 }
 
 .modal-confirm-box>.modal-open-button.retract {
-    background-color: var(--yellow);
+    background-color: var(--red);
+    color: white;
     padding: var(--default-padding);
     border-radius: var(--default-padding);
     -webkit-border-radius: var(--default-padding);
@@ -445,7 +463,7 @@ input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-submit-button {
     background: white;
     margin-bottom: var(--default-padding);
     padding: var(--default-padding);
-    border: var(--default-padding) solid var(--blue);
+    border: var(--default-padding) solid var(--dark-blue);
     width: fit-content;
 }
 
@@ -453,13 +471,13 @@ input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-submit-button {
     margin-left: var(--default-padding);
     border: solid;
     padding: var(--default-padding);
-    border-color: var(--yellow);
+    border-color: var(--purple);
     border-radius: 20px;
     border-width: var(--default-padding);
 }
 
 #awaiting-review:checked~.joboffer-filters>.filter-label[for="awaiting-review"] {
-    background: var(--light-yellow);
+    background: var(--light-turqoise);
 }
 
 #awaiting-review:checked~.joboffer-index>.joboffer-index-entry:not(.AwaitingReview) {