8 files changed, 432 insertions, 62 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;
 
diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css
index 99bb148..80d0948 100644
--- a/webcards/styles/home/base.css
+++ b/webcards/styles/home/base.css
@@ -17,14 +17,15 @@ body {
 
     align-items: center;
     justify-content: center;
+
+    background-color: var(--main-bg);
 }
 
 div.content {
     padding: 20px;
 
-    background-color: #ddd;
+    background-color: var(--gui-bg-main);
     border-radius: 10px;
-    max-width: 500px;
 
     display: flex;
     text-align: center;
diff --git a/webcards/styles/input.css b/webcards/styles/input.css
index 16a5385..0553fc2 100644
--- a/webcards/styles/input.css
+++ b/webcards/styles/input.css
@@ -2,7 +2,7 @@
 
 /*    All input    */
 
-input
+input, select
 {
     -webkit-appearance: none;
 	-moz-appearance: none;
@@ -11,7 +11,8 @@ input
 	margin: 5px;
 	
 	display: block;
-	z-index: 1;
+	
+	box-sizing: border-box;
 }
 
 /*    Button input    */
@@ -19,14 +20,13 @@ input
 input[type=button], input[type=submit], button
 {
     padding: 10px;
-    box-sizing: border-box;
 
     border: none;
     border-radius: 5px;
 
-    color: white;
-    background-color: #0084ff;
-    
+    background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+	
     font-size: medium;
 
     transition-duration: 0.2s;
@@ -36,33 +36,34 @@ input[type=button], input[type=submit], button
 
 input[type=button]:hover, input[type=submit]:hover, button:hover
 {
-	background-color: #3ea2ff;
+	background-color: var(--input-bg-button-hover);
 }
 
 input[type=button]:active, input[type=submit]:active, button:active
 {
-	background-color: #0056a7;
+	background-color: var(--input-bg-button-active);
 }
 
 /*    Text, date, number, and time input    */
 
 input[type=text], input[type=date], input[type=time], input[type="number"]
 {
-	border: 2px solid #555;
+	border: 2px solid var(--input-border-text);
 	border-radius: 3px;
 	padding: 5px;
-	background-color: white;
+	background-color: var(--input-bg-text);
+	color: var(--input-color-text);
 	font-size: 1em;
 }
 
 input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
 {
-	border-color: black;
+	border-color: var(--input-border-text-hover);
 }
 
 input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
 {
-	border-color: #0084ff;
+	border-color: var(--input-border-text-active);
 }
 
 /*    Radial input    */
@@ -72,12 +73,12 @@ input[type=radio]
 	width: 20px;
 	height: 20px;
 	
-	border: 3px solid black;
+	border: 3px solid var(--input-border-bool);
 	border-radius: 50%;
 	
 	transition-duration: 0.2s;
 	
-	background-color: white;
+	background-color: var(--input-bg-bool);
 	
 	cursor: pointer;
 
@@ -91,18 +92,20 @@ input[type=radio]:checked, input[type=radio]:hover{
 
 input[type=radio]:checked
 {
-	background-color: black;
-	border-color: #0084ff;
+	background-color: var(--input-bg-bool-true);
+	border-color: var(--input-border-bool-true);
 }
 
 input[type=radio]:hover
 {
-	border-color: #3ea2ff;
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
 }
 
 input[type=radio]:active
 {
-	border-color: black;
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
 }
 
 /*    Checkbox input    */
@@ -119,13 +122,13 @@ input[type=checkbox]
 	width: 20px;
 	height: 20px;
 	
-	border: 3px solid black;
+	border: 3px solid var(--input-border-bool);
 	
 	border-radius: 2px;
 	
 	transition-duration: 0.2s;
 	
-	background-color: white;
+	background-color: var(--input-bg-bool);
 	
 	cursor: pointer;
 }
@@ -133,22 +136,25 @@ input[type=checkbox]
 input[type=checkbox]:checked
 {
 	border-width: 10px;
-	border-color: #0084ff;
+	background-color: var(--input-border-bool-true);
+	border-color: var(--input-border-bool-true);
 }
 
 input[type=checkbox]:hover
 {
-	border-color: #3ea2ff;
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
 }
 
 input[type=checkbox]:active
 {
-	border-color: black;
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
 }
 
 input[type=checkbox]::after
 {
-	height: 16px;
+	height: 15px;
 	width: 10px;
 	
 	box-sizing: border-box;
@@ -157,7 +163,7 @@ input[type=checkbox]::after
 	
 	display: block;
 	
-	border-color: black;
+	border-color: var(--input-bg-bool-true);
 	border-style: solid;
 	border-width: 0px 0px 0px 0px;
 	
@@ -201,13 +207,68 @@ input[type=file]
 	display: none;
 }
 
+/*    Custom select    */
+
+div.input-select
+{
+	font-size: 1em;
+
+	display: block;
+	position: absolute;
+	
+}
+
+div.input-select > div
+{
+	display: none;
+	pointer-events: none;
+}
+
+div.input-select > div[selected=true]
+{
+	display: block;
+}
+
+div.input-container:focus > div.input-select
+{
+	pointer-events: all;
+
+	transform: translate(0, 2em);
+
+	border: 2px solid var(--input-border-select-active);
+	background-color: var(--input-bg-select-active);
+}
+
+div.input-container:focus > div.input-select > div
+{
+	pointer-events: all;
+	display: block;
+	padding: 5px;
+	width: 6em;
+}
+
+div.input-container:focus > div.input-select > div:hover
+{
+	background-color: var(--input-bg-select-hover);
+	color: var(--input-color-select-hover);
+}
+
+div.input-container:focus > div.input-select > div[selected=true]:after
+{
+	font-family: "IcoFont";
+	content: '\eed8';
+	font-size: medium;
+}
+
 /*    Input container    */
 
-div.input-container {
+*.input-container {
 	margin: 5px;
 	padding: 5px;
 
 	border-radius: 3px;
+
+	display: inline-block;
 }
 
 /*    Color container    */
@@ -216,8 +277,8 @@ div.input-container[type=color]
 {
 	text-align: center;
 	
-	background-color: #0084ff;
-	color: white;
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
 
 	transition-duration: 0.2s;
 	
@@ -237,20 +298,20 @@ div.input-container[type=color]::after
 
 div.input-container[type=color]:hover
 {
-	background-color: #3ea2ff;
+	background-color: var(--input-bg-button-hover);
 }
 
 div.input-container[type=color]:active
 {
-	background-color: #0056a7;
+	background-color: var(--input-bg-button-active);
 }
 
 /*    File input container    */
 
 div.input-container[type=file]
 {
-	background-color: #0084ff;
-	color: white;
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
 	
 	transition-duration: 0.2s;
 
@@ -264,12 +325,12 @@ div.input-container[type=file]
 
 div.input-container[type=file]:hover
 {
-	background-color: #3ea2ff;
+	background-color: var(--input-bg-button-hover);
 }
 
 div.input-container[type=file]:active
 {
-	background-color: #0056a7;
+	background-color: var(--input-bg-button-active);
 }
 
 div.input-container[type=file]::after
@@ -283,14 +344,82 @@ div.input-container[type=file]::after
 
 /*    Radio input container    */
 
-div.input-container[type=radio]::before {
+div.input-container[type=radio]::before
+{
 	display: block;
-	content: 'Radio';
+	content: 'Select one';
+	transition-duration: 0.2s;
 }
 
 div.input-container[type=radio]
 {
-	background-color: rgba(255, 255, 255, 0.3);
+	background-color: var(--input-bg-multi);
+}
+
+div.input-container[type=radio]:hover
+{
+	background-color: var(--input-bg-multi);
+}
+
+/*	  Select input container    */
+
+div.input-container[type=select]
+{
+	border: 2px solid var(--input-border-select);
+	background-color: var(--input-bg-select);
+	min-height: 1em;
+	width: 7em;
+
+	color: var(--input-color-select);
+
+	cursor: pointer;
+
+	overflow: hidden;
+
+	display: inline-block;
+
+	text-align: left;
+}
+
+div.input-container[type=select]:hover
+{
+	border-color: var(--input-border-select-hover);
+	background-color: var(--input-bg-select-hover);
+
+	color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus
+{
+	border-color: var(--input-border-select-active);
+	background-color: var(--input-bg-select-active);
+
+	color: var(--input-color-select-active);
+
+	overflow: visible;
+}
+
+div.input-container[type=select]:after
+{
+	font-family: "IcoFont";
+	font-size: medium;
+	content: '\eab2';
+	display: block;
+	height: 100%;
+	width: 100%;
+	color: var(--input-color-select);
+	text-align: right;
+}
+
+div.input-container[type=select]:after:hover
+{
+	color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus::after
+{
+	content: '\eab9';
+	color: var(--input-color-select-active);
 }
 
 /*    End Input CSS    */
\ No newline at end of file
diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css
new file mode 100644
index 0000000..4f878da
--- /dev/null
+++ b/webcards/styles/themes/colors-base.css
@@ -0,0 +1,76 @@
+* {
+    /*  Main  */
+    --main-bg: white;
+    --main-color: black;
+
+    /*  Server  */
+    --server-bg-ok: #0C0;
+    --server-bg-loading: #DA0;
+    --server-bg-closed: #D00;
+    --server-color-ok: white;
+    --server-color-loading: white;
+    --server-color-closed: white;
+
+    /*  Gui and topbar  */
+    --gui-bg-main: #ddd;
+    --gui-bg-game: white;
+    --gui-color-game: black;
+    --gui-shadow-game: gray;
+
+    --top-border: black;
+    --top-bg: white;
+    --top-bg-button: white;
+    --top-bg-button-hover: #ddd;
+    --top-bg-button-active: ;
+    --top-color-button: black;
+    --top-color-button-hover: black;
+    --top-color-button-active: black;
+
+    /*  Table  */
+
+    /*  Card defaults  */
+    --card-color: black;
+    --card-bg: white;
+    --card-border: #bbb;
+    --card-hover: #0f0;
+
+    /*  Input  */
+    
+    --input-color-text: black;
+    --input-color-text-hover: black;
+    --input-color-text-active: black;
+    --input-bg-text: white;
+    --input-bg-text-hover: white;
+    --input-bg-text-active: white;
+    --input-border-text: #555;
+    --input-border-text-hover: black;
+    --input-border-text-active: #0084ff;
+
+    --input-color-button: white;
+    --input-color-button-hover: white;
+    --input-color-button-active: white;
+    --input-bg-button: #0084ff;
+    --input-bg-button-hover: #3ea2ff;
+    --input-bg-button-active:#0056a7;
+
+    --input-bg-bool: white;
+    --input-bg-bool-hover: white;
+    --input-bg-bool-active: white;
+    --input-border-bool: black;
+    --input-border-bool-hover: #3ea2ff;
+    --input-border-bool-active: black;
+    --input-border-bool-true: #0084ff;
+
+    --input-color-select: black;
+    --input-color-select-hover: black;
+    --input-color-select-active: #555;
+    --input-bg-select: white;
+    --input-bg-select-hover: white;
+    --input-bg-select-active: white;
+    --input-border-select: #555;
+    --input-border-select-hover: black;
+    --input-border-select-active: #0084ff;
+
+    --input-bg-multi: rgba(30, 30, 30, 0.3);
+    --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
+}
\ No newline at end of file
diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css
new file mode 100644
index 0000000..8020491
--- /dev/null
+++ b/webcards/styles/themes/colors-dark.css
@@ -0,0 +1,77 @@
+* {
+    /*  Main  */
+    --main-bg: #333;
+    --main-color: white;
+
+    /*  Server  */
+    --server-bg-ok: #0B0;
+    --server-bg-loading: #DA0;
+    --server-bg-closed: #D00;
+    --server-color-ok: white;
+    --server-color-loading: white;
+    --server-color-closed: white;
+
+    /*  Gui and topbar  */
+    --gui-bg-main: #555;
+    --gui-bg-game: #777;
+    --gui-color-game: white;
+    --gui-shadow-game: #222;
+
+    --top-border: #999;
+    --top-bg: #333;
+    --top-bg-button: #555;
+    --top-bg-button-hover: #999;
+    --top-bg-button-active: #777;
+    --top-color-button: white;
+    --top-color-button-hover: white;
+    --top-color-button-active: white;
+
+    /*  Table  */
+
+    /*  Card defaults  */
+    --card-color: black;
+    --card-bg: white;
+    --card-border: #bbb;
+    --card-hover: #0f0;
+
+    /*  Input  */
+    
+    --input-color-text: white;
+    --input-color-text-hover: white;
+    --input-color-text-active: white;
+    --input-bg-text: #777;
+    --input-bg-text-hover: #777;
+    --input-bg-text-active: #777;
+    --input-border-text: #222;
+    --input-border-text-hover: #AAA;
+    --input-border-text-active: #3ea2ff;
+
+    --input-color-button: white;
+    --input-color-button-hover: white;
+    --input-color-button-active: white;
+    --input-bg-button: #0084ff;
+    --input-bg-button-hover: #3ea2ff;
+    --input-bg-button-active:#0056a7;
+
+    --input-bg-bool: #555;
+    --input-bg-bool-hover: #999;
+    --input-bg-bool-active: #777;
+    --input-bg-bool-true: white;
+    --input-border-bool: #999;
+    --input-border-bool-hover: #999;
+    --input-border-bool-active: #999;
+    --input-border-bool-true: #999;
+
+    --input-color-select: white;
+    --input-color-select-hover: white;
+    --input-color-select-active: white;
+    --input-bg-select: #777;
+    --input-bg-select-hover: #888;
+    --input-bg-select-active: #777;
+    --input-border-select: #222;
+    --input-border-select-hover: #AAA;
+    --input-border-select-active: #3ea2ff;
+
+    --input-bg-multi: rgba(30, 30, 30, 0.3);
+    --input-bg-multi-hover: rgba(200, 200, 200, 0.3);
+}
\ No newline at end of file