4 files changed, 110 insertions, 23 deletions
diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index fc8e310..52c2722 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -11,6 +11,8 @@ html, body {
 
     display: block;
 
+    background-color: var(--main-bg);
+    color: var(--main-color);
 }
 
 /*    Topbar rules    */
@@ -19,7 +21,7 @@ html, body {
 {
     position: fixed;
 
-    background-color: white;
+    background-color: var(--gui-bg-main);
 
     top: 0;
     left: 0;
@@ -40,18 +42,24 @@ html, body {
 button.top-button
 {
     border-radius: 0;
-    background-color: white;
-    color: black;
+    background-color: var(--top-bg-button);
+    color: var(--top-color-button);
     flex: 1;
 
-    border-left: 1px solid black;
-    border-right: 1px solid black;
+    border-left: 1px solid var(--top-border);
+    border-right: 1px solid var(--top-border);
 
     transition-duration: 0.2s;
 }
 
 button.top-button:hover {
-    background-color: #ddd;
+    background-color: var(--top-bg-button-hover);
+    color: var(--top-color-button-hover);
+}
+
+button.top-button:active {
+    background-color: var(--top-bg-button-active);
+    color: var(--top-color-button-active);
 }
 
 .top-buttons > button:first-child
@@ -68,20 +76,34 @@ div.new-game
 {
     flex: 1;
     flex-grow: 1;
-    border-top: 2px solid black;
+    border-top: 2px solid var(--top-border);
 }
 
 div.mobile-settings
 {
     flex: 1;
     flex-grow: 1;
-    border-top: 2px solid black;
+    border-top: 2px solid var(--top-border);
 }
 
 div.topbar > div.status
 {
     height: 5px;
     flex-basis: auto;
+
+    background-color: var(--server-bg-loading);
+}
+
+div.topbar > div.status[s=loading] {
+    background-color: var(--server-bg-loading);
+}
+
+div.topbar > div.status[s=ok] {
+    background-color: var(--server-bg-ok);
+}
+
+div.topbar > div.status[s=closed] {
+    background-color: var(--server-bg-closed);
 }
 
 /*    Content rules    */
@@ -112,9 +134,10 @@ div.stats > div > span:last-child {
 }
 
 div.game {
-    background-color: white;
+    background-color: var(--gui-bg-game);
+    color: var(--gui-color-game);
     border-radius: 5px;
-    box-shadow: lightgray 3px 3px 2px;
+    box-shadow: var(--gui-shadow-game) 3px 3px 2px;
     box-sizing: border-box;
     margin-bottom: 10px;
 }
@@ -140,9 +163,11 @@ div.settings {
     animation-duration: 0.8s;
 
     background-color: rgba(0, 0, 0, 0.5);
+
+    overflow: hidden;
 }
 
-.table[state="open"] ,.table[state="close"]{
+.table[state=open] ,.table[state=close]{
     animation-name: slide-in;
     animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
     animation-iteration-count: 1;
@@ -150,11 +175,11 @@ div.settings {
     animation-fill-mode: forwards;
 }
 
-.table[state="close"] {
+.table[state=close] {
     animation-direction: reverse;
 }
 
-.table[state="closed"] {
+.table[state=closed] {
     transform: translate(0, -100vh);
     opacity: 0;
 }
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
index 62b4054..01cdcc5 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -3,20 +3,22 @@ card
     position: absolute;
     display: block;
     width: 150px;
-    height: 225px;
-    background-color: white;
-    border: 6px double #bbb;
+    height: 230px;
+    background-color: var(--card-bg);
+    color: var(--card-color);
+    border: 2px solid var(--card-border);
     border-radius: 10px;
     transition-duration: 0.2s;
     cursor: pointer;
     flex-direction: column;
     overflow: hidden;
     user-select: none;
+    box-sizing: border-box;
 }
 
 card:hover
 {
-    box-shadow: 0 0 10px #0f0;
+    box-shadow: 0 0 10px var(--card-hover);
 }
 
 carea
@@ -27,6 +29,7 @@ carea
     display: flex;
     vertical-align: middle;
     width: 100%;
+    box-sizing: border-box;
 }
 
 carea.top, carea.topl, carea.topr
@@ -110,7 +113,43 @@ cimage
     flex: 1;
 }
 
-card[drag = "true"]
+card[drag=true]
 {
     z-index: 3;
 }
+
+/*  Deck  */
+
+deck {
+    position: absolute;
+    width: 0;
+    height: 0;
+
+    top: 0;
+    left: 0;
+
+    overflow: visible;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+
+deck > card {
+    transform: translate(-75px, calc(-115px + ( var(--cpos) * 3px )));
+}
+
+deck[mode="strip-hl"] > card {
+    transform: translate(calc(-75px - ( var(--cpos) * 75px )), -115px);
+}
+
+deck[mode="strip-hr"] > card {
+    transform: translate(calc(-75px + ( var(--cpos) * 75px )), -115px);
+}
+
+deck[mode="strip-vu"] > card {
+    transform: translate(-75px, calc(-115px - ( var(--cpos) * 115px )));
+}
+
+deck[mode="strip-vd"] > card {
+    transform: translate(-75px, calc(-115px + ( var(--cpos) * 115px )));
+}
diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
index 08e24fe..f072a71 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/styles/client/desktop.css
@@ -52,6 +52,24 @@
         padding: 10px;
         border-radius: 10px;
         flex-basis: content;
+
+        background-color: var(--server-bg-loading);
+        color: var(--server-color-loading);
+    }
+
+    span.status[s=loading] {
+        background-color: var(--server-bg-loading);
+        color: var(--server-color-loading);
+    }
+    
+    span.status[s=ok] {
+        background-color: var(--server-bg-ok);
+        color: var(--server-color-ok);
+    }
+    
+    span.status[s=closed] {
+        background-color: var(--server-bg-closed);
+        color: var(--server-color-closed);
     }
 
     span.addr {
@@ -59,7 +77,7 @@
         padding: 10px;
         border-radius: 10px;
 
-        background-color: #ddd;
+        background-color: var(--gui-bg-main);
 
         flex: 1;
     }
@@ -92,15 +110,15 @@
         overflow-x: hidden;
         padding: 10px;
         border-radius: 10px;
-        background-color: #ddd;
+        background-color: var(--gui-bg-main);
         flex: 2;
 
-        border: 5px solid #ddd;
+        border: 5px solid var(--gui-bg-main);
     }
 
     div.stats, div.settings {
         border-radius: 10px;
-        background-color: #ddd;
+        background-color: var(--gui-bg-main);
 
         box-sizing: border-box;
 
@@ -123,4 +141,9 @@
     /*
         Table rules
     */
+
+    /*
+        Chat
+    */
+    
 }
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 4659ce6..5770dde 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -69,7 +69,7 @@
         overflow-x: hidden;
         overflow-y: auto;
 
-        background-color: #ddd;
+        background-color: var(--gui-bg-main);
         padding: 5px;
         box-sizing: border-box;