refactor(style.css): use new palette

src/judas_server/web/static/css/style.css

@@ -1,22 +1,4 @@
-:root {
-    --nord-bg0: #2e3440;
-    --nord-bg1: #3b4252;
-    --nord-bg2: #434c5e;
-    --nord-bg3: #4c566a;
-    --nord-fg0: #eceff4;
-    --nord-fg1: #e5e9f0;
-    --nord-fg2: #d8dee9;
-    --nord-acc0: #8fbcbb;
-    --nord-acc1: #88c0d0;
-    --nord-acc2: #81a1c1;
-    --nord-acc3: #5e81ac;
-    --nord-aur0: #bf616a;
-    --nord-aur1: #d08770;
-    --nord-aur2: #ebcb8b;
-    --nord-aur3: #a3be8c;
-    --nord-aur4: #b48ead;
-
-}
+@import "palette.css";
 
 * {
     margin: 0;
@@ -25,22 +7,22 @@
 }
 
 body {
-    background-color: var(--nord-aur4);
+    background-color: var(--ctp-base);
     font-family: monospace, sans-serif !important;
-    color: var(--nord-fg0);
+    color: var(--ctp-text);
 }
 
 input {
     font-family: inherit;
     color: #eceff4;
-    background-color: var(--nord-bg2);
+    background-color: var(--ctp-crust);
     border: none;
     border-radius: 0.25rem;
     padding: 0.25rem;
 }
 
 a {
-    color: var(--nord-acc0);
+    color: var(--ctp-blue);
     text-decoration: none;
 }
 
@@ -54,8 +36,8 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--nord-bg0);
-    color: var(--nord-fg0);
+    background-color: var(--ctp-mantle);
+    /* color: var(--ctp-text); */
     padding: 1rem;
 }
 
@@ -64,34 +46,34 @@ main {
     flex-direction: column;
     gap: 1rem;
     padding: 1rem;
-    background-color: var(--nord-bg1);
+    /* background-color: var(--ctp-base); */
     flex-grow: 1;
     text-align: center;
 }
 
 header a {
     text-decoration: none;
-    color: var(--nord-fg0);
+    /* color: var(--nord-fg0); */
 }
 
 .button {
     display: inline-block;
     padding: 0.5rem 1rem;
-    background-color: var(--nord-acc0);
-    color: var(--nord-bg0);
+    background-color: var(--ctp-lavender);
+    color: var(--ctp-base);
     border: none;
     border-radius: 0.25rem;
     text-decoration: none;
     transition: 0.3s ease-in-out;
 }
 
-.button a:hover {
-    color: var(--nord-bg0);
-    text-decoration: none;
-}
+/* .button a:hover { */
+/*     color: var(--nord-bg0); */
+/*     text-decoration: none; */
+/* } */
 
 .button:hover {
-    background-color: var(--nord-acc2);
+    background-color: var(--ctp-mauve);
     cursor: pointer;
 }
 
@@ -106,9 +88,9 @@ header a {
     justify-content: center;
     margin: 1rem;
     padding: 1rem;
-    background-color: var(--nord-aur0);
-    color: var(--nord-fg0);
-    border: 6px solid var(--nord-aur1);
+    background-color: var(--ctp-surface0);
+    color: var(--ctp-red);
+    border: 6px solid var(--ctp-red);
     border-radius: 24px;
 }
 
@@ -117,9 +99,9 @@ header a {
     width: 100%;
 }
 
-.select-table{
+.select-table {
     border-collapse: collapse;
-    border: 2px solid var(--nord-fg0);
+    border: 2px solid var(--ctp-surface0);
 }
 
 .select-table thead {
@@ -131,18 +113,18 @@ header a {
 .select-table th, .select-table td {
     padding: 0.5rem;
     text-align: center;
-    border: 1px solid var(--nord-fg1);
+    border: 1px solid var(--ctp-surface0);
     border-collapse: collapse;
 }
 
 .select-table th {
-    background-color: var(--nord-bg2);
+    background-color: var(--ctp-surface1);
     color: var(--nord-fg0);
 }
 
 .select-table a {
     display: block;
-    color: var(--nord-acc0);
+    /* color: var(--nord-acc0); */
     text-decoration: none;
     transition: 0.1s ease-in-out;
 }
@@ -152,23 +134,23 @@ header a {
 }
 
 .select-table tr:hover {
-    background-color: var(--nord-acc1);
+    background-color: var(--ctp-surface0);
 }
 
 .select-table tr:hover a {
-    color: var(--nord-bg0);
+    color: var(--ctp-base);
 }
 
 .red-bg {
-    background-color: var(--nord-aur0);
+    background-color: var(--ctp-red);
 }
 
 .yellow-bg {
-    background-color: var(--nord-aur2);
+    background-color: var(--ctp-yellow);
 }
 
 .green-bg {
-    background-color: var(--nord-aur3);
+    background-color: var(--ctp-green);
 }
 
 .button-container {
@@ -183,24 +165,24 @@ header a {
 }
 
 .link:hover {
-    color: var(--nord-acc2);
+    color: var(--ctp-blue);
 }
 
 .details-table tr td:first-child {
     font-weight: 900;
-    background-color: var(--nord-bg3);
+    background-color: var(--ctp-surface0);
     white-space: nowrap;
     width: 1%;
 }
 
 .details-table {
     border-collapse: collapse;
-    border: 2px solid var(--nord-fg0);
+    border: 2px solid var(--ctp-surface1);
 }
 
 .details-table th, .details-table td {
     padding: 0.5rem;
     text-align: left;
-    border: 1px solid var(--nord-fg1);
+    border: 1px solid var(--ctp-text);
     border-collapse: collapse;
-}
+}