Feat: Decks page.

static/css/components/button.css

@@ -17,8 +17,8 @@
 
 .button-primary {
     background: var(--colour-accent);
-    color: var(--colour-primary);
-    border: 2px solid var(--colour-primary);
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
 }
 
 .button-primary:hover {
@@ -28,7 +28,7 @@
 
 .button-light {
     background: white;
-    color: var(--colour-primary);
+    color: var(--primary-color);
 }
 
 .button-light:hover {

static/css/components/form.css

@@ -2,5 +2,5 @@
 
 select {
     border: 1px solid var(--colour-accent);
-    background-color: var(--colour-page-background-1);
+    background-color: var(--background-color-1);
 }

static/css/components/overlay.css

@@ -8,7 +8,7 @@
     position: fixed;
     width: 100px;
     /* height: 50%; */ 
-    background: var(--colour-page-background);
+    background: var(--background-color);
     justify-content: right;
     align-items: right;
     align-self: right;
@@ -73,11 +73,11 @@
     border-bottom-right-radius: 12px;
 }
 #overlayHamburger > :hover {
-    color: var(--colour-page-background);
-    background-color: var(--colour-primary);
+    color: var(--background-color);
+    background-color: var(--primary-color);
 }
 #overlayHamburger .container {
-    background-color: var(--colour-page-background);
+    background-color: var(--tcg-accent-purple);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -93,8 +93,8 @@
     height: fit-content;
 }
 #overlayHamburger .container:hover {
-    color: var(--colour-page-background);
-    background-color: var(--colour-primary);
+    color: var(--background-color);
+    background-color: var(--primary-color);
 }
 #overlayHamburger > .container {
     /*
@@ -105,13 +105,13 @@
 #overlayHamburger .container a {
     width: 100%;
     padding: 4.5px 0;
-    color: var(--colour-text);
+    color: var(--tcg-text-primary);
     text-decoration: none;
     line-height: initial;
 }
 #overlayHamburger .container a:hover {
-    color: var(--colour-page-background);
-    background-color: var(--colour-primary);
+    color: var(--background-color);
+    background-color: var(--primary-color);
 }
 
 @media screen and (max-width: 400px) {

static/css/components/table.css

@@ -28,7 +28,7 @@ th.is_collapsed, td.is_collapsed {
     display: table-cell !important;
 }
 td.dirty {
-    background-color: var(--colour-primary);
+    background-color: var(--primary-color);
 }
 td:not(.dirty) {
     background-color: transparent;
@@ -48,7 +48,7 @@ table button {
 }
 
 table button.active {
-    background-color: var(--colour-page-background);
+    background-color: var(--background-color);
 }
 
 tr.delete, tr.delete > td {