Update from local repo

9 files changed, 1162 insertions, 50 deletions

diff --git a/styles/client/base.css b/styles/client/base.css
index cae61f6..889d7bf 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -11,12 +11,19 @@ html, body {
 
     display: block;
 
+    background-color: var(--main-bg);
+    color: var(--main-color);
+
+    overflow: hidden;
 }
 
-.topbar {
+/*    Topbar rules    */
+
+.topbar
+{
     position: fixed;
 
-    background-color: white;
+    background-color: var(--gui-bg-main);
 
     top: 0;
     left: 0;
@@ -29,66 +36,95 @@ html, body {
     z-index: 1;
 }
 
-.top-buttons {
+.top-buttons
+{
     display: flex;
 }
 
-button, input[type="button"] {
-    display: inline-block;
-    border: none;
-    background-color: dodgerblue;
-    padding: 10px;
-    font-size: medium;
-    border-radius: 5px;
-    box-sizing: border-box;
-}
-
-button.top-button {
+button.top-button
+{
     border-radius: 0;
-    background-color: white;
+    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: var(--top-bg-button-hover);
+    color: var(--top-color-button-hover);
 }
 
-.top-buttons > button:first-child {
+button.top-button:active {
+    background-color: var(--top-bg-button-active);
+    color: var(--top-color-button-active);
+}
+
+.top-buttons > button:first-child
+{
     border-left: none;
 }
 
-.top-buttons > button:last-child {
+.top-buttons > button:last-child
+{
     border-right: none;
 }
 
-div.new-game {
+div.new-game
+{
     flex: 1;
     flex-grow: 1;
-    border-top: 2px solid black;
+    border-top: 2px solid var(--top-border);
 }
 
-div.mobile-settings {
+div.mobile-settings
+{
     flex: 1;
     flex-grow: 1;
-    border-top: 2px solid black;
+    border-top: 2px solid var(--top-border);
 }
 
-div.topbar > div.status {
+div.topbar > div.status
+{
     height: 5px;
     flex-basis: auto;
+
+    background-color: var(--server-bg-loading);
 }
 
-div.stats {
+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    */
+
+div.stats
+{
     padding: 5px;
     display: flex;
     flex-direction: column;
 }
 
-div.stats > div {
+div.stats > div
+{
     flex: 1;
     display: flex;
 }
 
-div.stats > div > span {
+div.stats > div > span
+{
     flex-basis: content;
     display: inline-block;
 }
@@ -100,13 +136,194 @@ 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;
+    padding: 5px;
+
+    text-align: left;
 }
 
 div.game:last-child {
     margin-bottom: none;
+}
+
+div.settings {
+    display:flex;
+    flex-direction: column;
+    padding: 5px;
+}
+
+/*    Table rules    */
+
+.table {
+    position: absolute;
+    z-index: 2;
+    width: 100vw;
+    height: 100vh;
+
+    animation-duration: 0.8s;
+
+    background-color: var(--table-bg);
+
+    overflow: hidden;
+}
+
+.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;
+    animation-direction: normal;
+    animation-fill-mode: forwards;
+}
+
+.table[state=close] {
+    animation-direction: reverse;
+}
+
+.table[state=closed] {
+    transform: translate(0, -100vh);
+    opacity: 0;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translate(0, -100vh);
+        opacity: 0;
+    }
+
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+/*    Chat    */
+
+div.chat {
+    border-top-left-radius: 10px;
+    background-color: var(--chat-bg);
+    color: var(--chat-color);
+
+    width: 50vw;
+    height: 50vh;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    right: -50vw;
+
+    box-sizing: border-box;
+
+    top: 50vh;
+
+    transition-duration: 0.2s;
+
+    padding: 5px;
+
+    z-index: 4;
+}
+
+div.chat[show=true] {
+    right: 0;
+}
+
+button.toggle-chat {
+    position: absolute;
+    bottom: 5px;
+    left: -5px;
+    transform-origin: bottom left;
+    transform: rotate(-90deg);
+}
+
+div.chat > div {
+    box-sizing: border-box;
+    margin: 5px;
+}
+
+div.chat-select, div.chat-input {
+    flex-basis: content;
+    display: flex;
+}
+
+div.chat-text {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 5px;
+    background-color: var(--chat-bg-text);
+    border-radius: 10px;
+    border: 5px solid rgba(0, 0, 0, 0);
+}
+
+div.chat-select > button {
+    flex: 1;
+
+    margin-right: 2px;
+    margin-left: 2px;
+}
+
+div.chat-select > button[active="false"] {
+    background-color: var(--chat-bg-inactive);
+}
+
+div.chat-select > button[active="false"]:hover {
+    background-color: var(--chat-bg-inactive-hover);
+}
+
+div.chat-select > button[active="false"]:active {
+    background-color: var(--chat-bg-inactive-active);
+}
+
+div.chat-select > button[active="true"] {
+    background-color: var(--chat-bg-active);
+}
+
+div.chat-select > button[active="true"]:hover {
+    background-color: var(--chat-bg-active-hover);
+}
+
+div.chat-select > button[active="true"]:active {
+    background-color: var(--chat-bg-active-active);
+}
+
+div.chat-select > button:first-child {
+    margin-left: 0;
+}
+
+div.chat-select > button:last-child {
+    margin-right: 0;
+}
+
+div.chat-input > input {
+    flex: 5;
+
+    margin: 0;
+    margin-right: 5px;
+
+    border-radius: 5px;
+
+    transition-duration: 0.2s;
+    border: none;
+
+    background-color: var(--chat-bg-input);
+}
+
+div.chat-input > input:hover {
+    background-color: var(--chat-bg-input-hover);
+}
+
+div.chat-input > input:focus {
+    background-color: var(--chat-bg-input-active);
+}
+
+div.chat-input > button {
+    flex: 1;
+}
+
+div.chat-text > div {
+    word-wrap: break-word;
+    word-break: break-all;
 }
\ No newline at end of file
diff --git a/styles/client/card.css b/styles/client/card.css
new file mode 100644
index 0000000..de49175
--- /dev/null
+++ b/styles/client/card.css
@@ -0,0 +1,191 @@
+card
+{
+    position: absolute;
+    display: block;
+    width: 150px;
+    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 var(--card-hover);
+}
+
+card > * {
+    pointer-events: none;
+}
+
+carea
+{
+    padding-left: 2px;
+    padding-right: 2px;
+    position: absolute;
+    display: flex;
+    vertical-align: middle;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+carea.top, carea.topl, carea.topr
+{
+    top: 0;
+    height: 8%;
+    text-align: center;
+}
+
+carea.topl
+{
+    width: 50%;
+    text-align: left;
+}
+
+carea.topr
+{
+    right: 0;
+    width: 50%;
+    text-align: right;
+}
+
+carea.mid
+{
+    top: 8%;
+    height: 84%;
+}
+
+carea.midt
+{
+    top: 8%;
+    height: 42%;
+}
+
+carea.midb
+{
+    
+    top: 50%;
+    height: 42%;
+}
+
+carea.bot, carea.botl, carea.botr
+{
+    bottom: 0;
+    height: 8%;
+    text-align: center;
+}
+
+carea.botl
+{
+    width: 50%;
+    text-align: left;
+}
+
+carea.botr
+{
+    right: 0;
+    width: 50%;
+    text-align: right;
+}
+
+carea.all
+{
+    top: 0;
+    height: 100%;
+}
+
+ctext
+{
+    display: inline-block;
+    flex: 1;
+    font-size: small;
+    height: auto;
+}
+
+cimage
+{
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    flex: 1;
+}
+
+card[drag=true]
+{
+    z-index: 3;
+}
+
+/*  Deck  */
+
+deck {
+    --ccount: 0;
+
+    position: absolute;
+    width: 166px;
+    height: 250px;
+
+    top: 0;
+    left: 0;
+
+    overflow: visible;
+
+    border-radius: 10px;
+
+    transition-duration: 0.2s;
+
+    border: 3px solid var(--deck-shadow);
+    box-sizing: border-box;
+}
+
+deck:hover {
+    border: 3px solid var(--deck-hover);
+}
+
+/* Deck modes */
+
+deck[mode="stack"] > card {
+    transform: translate(5px, calc(var(--cpos) * 3px + 7px));
+}
+
+deck[mode="stack"] {
+    height: calc(var(--ccount) * 3px + 250px);
+}
+
+deck[mode="strip-hl"] > card {
+    transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
+}
+
+deck[mode="strip-hl"] {
+    width: calc(var(--ccount) * 75px + 160px);
+}
+
+deck[mode="strip-hr"] > card {
+    transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
+}
+
+deck[mode="strip-hr"] {
+    width: calc(var(--ccount) * 75px + 160px);
+}
+
+deck[mode="strip-vu"] > card {
+    transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
+}
+
+deck[mode="strip-vu"] {
+    height: calc(var(--ccount) * 115px + 240px);
+}
+
+deck[mode="strip-vd"] > card {
+    transform: translate(5px, calc(var(--cpos) * 115px + 7px));
+}
+
+deck[mode="strip-vd"] {
+    height: calc(var(--ccount) * 115px + 240px);
+}
\ No newline at end of file
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
index 46dc83d..10caa15 100644
--- a/styles/client/desktop.css
+++ b/styles/client/desktop.css
@@ -10,14 +10,6 @@
         TopBar rules
     */
 
-    button.top-button {
-        transition-duration: 0.2s;
-    }
-
-    button.top-button:hover {
-        background-color: #ddd;
-    }
-
     button#newgame:before{
         content: "Create Game";
     }
@@ -36,6 +28,7 @@
     div.lobby {
         min-width: 70vw;
         min-height: 70vh;
+        max-height: 70vh;
     
         display: flex;
         text-align: center;
@@ -60,6 +53,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 {
@@ -67,7 +78,7 @@
         padding: 10px;
         border-radius: 10px;
 
-        background-color: #ddd;
+        background-color: var(--gui-bg-main);
 
         flex: 1;
     }
@@ -100,15 +111,15 @@
         overflow-x: hidden;
         padding: 10px;
         border-radius: 10px;
-        background-color: #ddd;
-        flex: 4;
+        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;
 
@@ -131,4 +142,8 @@
     /*
         Table rules
     */
+
+    /*
+        Chat
+    */
 }
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
index 4659ce6..ed2e19d 100644
--- a/styles/client/mobile.css
+++ b/styles/client/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 599px) or (max-height: 500px) {
+@media (max-width: 599px), (max-height: 500px) {
     /*
         Hide stuff
     */
@@ -10,6 +10,10 @@
         display: none;
     }
 
+    div.chat {
+        display: none;
+    }
+
     /*
         TopBar for mobile
     */
@@ -69,7 +73,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/styles/client/tablet.css b/styles/client/tablet.css
index 37750f8..b9b5bd1 100644
--- a/styles/client/tablet.css
+++ b/styles/client/tablet.css
@@ -38,4 +38,8 @@
         margin-top: 0px;
         margin-left: 10px;
     }
+
+    div.games {
+        flex: 4;
+    }
 }
diff --git a/styles/home/base.css b/styles/home/base.css
index 2ef3693..a082ec2 100644
--- a/styles/home/base.css
+++ b/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;
@@ -33,21 +34,75 @@ div.content {
     align-items: center;
 }
 
-a {
-    font-size: 24px;
+a, button {
+    font-size: 1em;
     display: block;
     color: white;
+    box-sizing: border-box;
 
     border-radius: 5px;
+    border: none;
     padding: 5px;
 
-    background-color: dodgerblue;
+    background-color: #0084ff;
     
     transition-duration: 0.2s;
 
     text-decoration: none;
 
     margin-top: 10px;
+}
+
+
+
+div.content > div.prev {
+    width: 100%;
+    margin: 10px;
+
+    border-radius: 5px;
+
+    display: block;
+
+    padding: 0;
+}
+
+div.prev > a{
+    display: inline-block;
+    width: 80%;
+    margin: 0;
+    padding: 5px;
+    border-radius: 0;
+}
+
+div.prev > a:first-of-type {
+    border-top-left-radius: 5px;
+}
+
+div.prev > a:last-of-type {
+    border-bottom-left-radius: 5px;
+}
+
+div.prev > button {
+    display: inline-block;
+    width: 20%;
+    margin: 0;
+    background-color: #ff1e00;
+    padding: 5px;
+    border-radius: 0;
+}
+
+div.prev > button:first-of-type {
+    border-top-right-radius: 5px;
+}
+
+div.prev > button:last-of-type {
+    border-bottom-right-radius: 5px;
+}
+
+div.prev > button:hover {
+    background-color: #ff5741;
+}
 
-    max-width: 100px;
+div.prev > button:active {
+    background-color: #9c1200;
 }
\ No newline at end of file
diff --git a/styles/input.css b/styles/input.css
new file mode 100644
index 0000000..42656a0
--- /dev/null
+++ b/styles/input.css
@@ -0,0 +1,425 @@
+/*    Begin Input CSS    */
+
+/*    All input    */
+
+input, select
+{
+    -webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	margin: 5px;
+	
+	display: block;
+	
+	box-sizing: border-box;
+}
+
+/*    Button input    */
+
+input[type=button], input[type=submit], button, a
+{
+    padding: 10px;
+
+    border: none;
+    border-radius: 5px;
+
+    background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+	
+    font-size: medium;
+
+    transition-duration: 0.2s;
+
+    cursor: pointer;
+}
+
+input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover
+{
+	background-color: var(--input-bg-button-hover);
+}
+
+input[type=button]:active, input[type=submit]:active, button:active, a:active
+{
+	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 var(--input-border-text);
+	border-radius: 3px;
+	padding: 5px;
+	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: var(--input-border-text-hover);
+}
+
+input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
+{
+	border-color: var(--input-border-text-active);
+}
+
+/*    Radial input    */
+
+input[type=radio]
+{	
+	width: 20px;
+	height: 20px;
+	
+	border: 3px solid var(--input-border-bool);
+	border-radius: 50%;
+	
+	transition-duration: 0.2s;
+	
+	background-color: var(--input-bg-bool);
+	
+	cursor: pointer;
+
+	display: inline-block;
+	vertical-align: middle;
+}
+
+input[type=radio]:checked, input[type=radio]:hover{
+	border-width: 6px;
+}
+
+input[type=radio]:checked
+{
+	background-color: var(--input-bg-bool-true);
+	border-color: var(--input-border-bool-true);
+}
+
+input[type=radio]:hover
+{
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
+}
+
+input[type=radio]:active
+{
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
+}
+
+/*    Checkbox input    */
+
+input[type=checkbox]
+{
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	
+	display: inline-block;
+	vertical-align: middle;
+	
+	width: 20px;
+	height: 20px;
+	
+	border: 3px solid var(--input-border-bool);
+	
+	border-radius: 2px;
+	
+	transition-duration: 0.2s;
+	
+	background-color: var(--input-bg-bool);
+	
+	cursor: pointer;
+}
+
+input[type=checkbox]:checked
+{
+	border-width: 10px;
+	background-color: var(--input-border-bool-true);
+	border-color: var(--input-border-bool-true);
+}
+
+input[type=checkbox]:hover
+{
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
+}
+
+input[type=checkbox]:active
+{
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
+}
+
+input[type=checkbox]::after
+{
+	height: 15px;
+	width: 10px;
+	
+	box-sizing: border-box;
+	
+	position: relative;
+	
+	display: block;
+	
+	border-color: var(--input-bg-bool-true);
+	border-style: solid;
+	border-width: 0px 0px 0px 0px;
+	
+	top: calc(50% - 10px);
+	left: calc(50% - 5px);
+	
+	transform-origin: center;
+	transform: rotate(45deg);
+	
+	content: '';
+}
+
+input[type=checkbox]:checked::after
+{
+	border-width: 0px 3px 3px 0px;
+}
+
+/*    Color input    */
+
+input[type=color]
+{	
+	display: inline-block;
+	
+	vertical-align: middle;
+	
+	height: 20px;
+	width: 20px;
+	
+	margin: 0;
+	padding: 0;
+	
+	border: 0;
+	
+	cursor: pointer;
+}
+
+/*    File input    */
+
+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    */
+
+*.input-container {
+	margin: 5px;
+	padding: 5px;
+
+	border-radius: 3px;
+
+	display: inline-block;
+}
+
+/*    Color container    */
+
+div.input-container[type=color]
+{
+	text-align: center;
+	
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+
+	transition-duration: 0.2s;
+	
+	cursor: pointer;
+	
+	width: max-content;
+}
+
+div.input-container[type=color]::after
+{
+	display: inline;
+	
+	vertical-align: middle;
+	
+	content: ' Pick a color';
+}
+
+div.input-container[type=color]:hover
+{
+	background-color: var(--input-bg-button-hover);
+}
+
+div.input-container[type=color]:active
+{
+	background-color: var(--input-bg-button-active);
+}
+
+/*    File input container    */
+
+div.input-container[type=file]
+{
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+	
+	transition-duration: 0.2s;
+
+	cursor: pointer;
+	
+	text-align: center;
+
+	width: max-content;
+	height: max-content;
+}
+
+div.input-container[type=file]:hover
+{
+	background-color: var(--input-bg-button-hover);
+}
+
+div.input-container[type=file]:active
+{
+	background-color: var(--input-bg-button-active);
+}
+
+div.input-container[type=file]::after
+{
+	display: inline;
+	
+	vertical-align: middle;
+	
+	content: attr(data-files);
+}
+
+/*    Radio input container    */
+
+div.input-container[type=radio]::before
+{
+	display: block;
+	content: 'Select one';
+	transition-duration: 0.2s;
+}
+
+div.input-container[type=radio]
+{
+	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/styles/themes/colors-base.css b/styles/themes/colors-base.css
new file mode 100644
index 0000000..56b06d8
--- /dev/null
+++ b/styles/themes/colors-base.css
@@ -0,0 +1,98 @@
+* {
+    /*  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: #eee;
+    --top-bg-button: #eee;
+    --top-bg-button-hover: #ccc;
+    --top-bg-button-active: white;
+    --top-color-button: black;
+    --top-color-button-hover: black;
+    --top-color-button-active: black;
+
+    /*  Table  */
+    --table-bg: rgb(20, 110, 50);
+
+    /*  Card defaults  */
+    --card-color: black;
+    --card-bg: white;
+    --card-border: #bbb;
+    --card-hover: #0f0;
+
+    --deck-shadow: #2696ff;
+    --deck-hover: #73bbff;
+
+    /*  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);
+
+    /*  Chat  */
+    --chat-color: black;
+    --chat-bg: white;
+
+    --chat-bg-text: rgba(0, 0, 0, 0.2);
+
+    --chat-bg-input: rgb(220, 220, 220);
+    --chat-bg-input-hover: rgb(220, 220, 220);
+    --chat-bg-input-active: rgb(220, 220, 220);
+    
+    --chat-bg-inactive: rgb(80, 80, 80);
+    --chat-bg-inactive-hover: rgb(130, 130, 130);
+    --chat-bg-inactive-active: rgb(40, 40, 40);
+
+    --chat-bg-active: #0084ff;
+    --chat-bg-active-hover: #3ea2ff;
+    --chat-bg-active-active:#0056a7;
+}
\ No newline at end of file
diff --git a/styles/themes/colors-dark.css b/styles/themes/colors-dark.css
new file mode 100644
index 0000000..f630ac0
--- /dev/null
+++ b/styles/themes/colors-dark.css
@@ -0,0 +1,103 @@
+* {
+    /*  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: #444;
+
+    --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  */
+    --table-bg: rgb(20, 110, 50);
+
+    /*  Card defaults  */
+    --card-color: black;
+    --card-bg: white;
+    --card-border: #bbb;
+    --card-hover: #0f0;
+
+    --deck-shadow: #2696ff;
+    --deck-hover: #3ea2ff;
+
+    /*  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);
+
+    /*  Chat  */
+    --chat-color: white;
+    --chat-bg: #555;
+
+    --chat-bg-text: #444;
+
+    --chat-bg-input: #555;
+    --chat-bg-input-hover: #777;
+    --chat-bg-input-active: #444;
+
+    --chat-bg-select: #444;
+    --chat-bg-select-hover: #777;
+    --chat-bg-select-active: #333;
+
+    --chat-bg-inactive: #444;
+    --chat-bg-inactive-hover: #777;
+    --chat-bg-inactive-active: #333;
+
+    --chat-bg-active: rgb(255, 133, 34);
+    --chat-bg-active-hover: rgb(255, 165, 92);
+    --chat-bg-active-active: rgb(226, 102, 0);
+}
\ No newline at end of file