Webcards update from local git server

8 files changed, 266 insertions, 24 deletions

diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index 52c2722..ba06e3c 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -13,6 +13,8 @@ html, body {
 
     background-color: var(--main-bg);
     color: var(--main-color);
+
+    overflow: hidden;
 }
 
 /*    Topbar rules    */
@@ -140,6 +142,9 @@ div.game {
     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 {
@@ -162,7 +167,7 @@ div.settings {
 
     animation-duration: 0.8s;
 
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--table-bg);
 
     overflow: hidden;
 }
@@ -195,3 +200,118 @@ div.settings {
         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: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/webcards/styles/client/card.css b/webcards/styles/client/card.css
index 2f52255..de49175 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -125,43 +125,67 @@ card[drag=true]
 /*  Deck  */
 
 deck {
+    --ccount: 0;
+
     position: absolute;
-    min-width: 160px;
-    min-height: 240px;
+    width: 166px;
+    height: 250px;
 
     top: 0;
     left: 0;
 
     overflow: visible;
-    display: flex;
-    justify-content: center;
-    align-content: center;
 
     border-radius: 10px;
 
     transition-duration: 0.2s;
+
+    border: 3px solid var(--deck-shadow);
+    box-sizing: border-box;
 }
 
 deck:hover {
-    box-shadow: 0 0 5px var(--deck-hover);
+    border: 3px solid var(--deck-hover);
+}
+
+/* Deck modes */
+
+deck[mode="stack"] > card {
+    transform: translate(5px, calc(var(--cpos) * 3px + 7px));
 }
 
-deck > card {
-    transform: translate(0, calc(var(--cpos) * 3px ));
+deck[mode="stack"] {
+    height: calc(var(--ccount) * 3px + 250px);
 }
 
 deck[mode="strip-hl"] > card {
-    transform: translate(calc(var(--cpos) * -75px), 0);
+    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), 0);
+    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(0, calc(var(--cpos) * -115px ));
+    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(0, calc(var(--cpos) * 115px ));
+    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/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
index f072a71..10caa15 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/styles/client/desktop.css
@@ -28,6 +28,7 @@
     div.lobby {
         min-width: 70vw;
         min-height: 70vh;
+        max-height: 70vh;
     
         display: flex;
         text-align: center;
@@ -145,5 +146,4 @@
     /*
         Chat
     */
-    
 }
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 1afc4fb..ed2e19d 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -10,6 +10,10 @@
         display: none;
     }
 
+    div.chat {
+        display: none;
+    }
+
     /*
         TopBar for mobile
     */
diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css
index 80d0948..a082ec2 100644
--- a/webcards/styles/home/base.css
+++ b/webcards/styles/home/base.css
@@ -35,7 +35,7 @@ div.content {
 }
 
 a, button {
-    font-size: 24px;
+    font-size: 1em;
     display: block;
     color: white;
     box-sizing: border-box;
@@ -51,4 +51,58 @@ a, button {
     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;
+}
+
+div.prev > button:active {
+    background-color: #9c1200;
 }
\ No newline at end of file
diff --git a/webcards/styles/input.css b/webcards/styles/input.css
index 0553fc2..42656a0 100644
--- a/webcards/styles/input.css
+++ b/webcards/styles/input.css
@@ -17,7 +17,7 @@ input, select
 
 /*    Button input    */
 
-input[type=button], input[type=submit], button
+input[type=button], input[type=submit], button, a
 {
     padding: 10px;
 
@@ -34,12 +34,12 @@ input[type=button], input[type=submit], button
     cursor: pointer;
 }
 
-input[type=button]:hover, input[type=submit]:hover, button:hover
+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
+input[type=button]:active, input[type=submit]:active, button:active, a:active
 {
 	background-color: var(--input-bg-button-active);
 }
diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css
index fa2b60e..62665a2 100644
--- a/webcards/styles/themes/colors-base.css
+++ b/webcards/styles/themes/colors-base.css
@@ -18,15 +18,16 @@
     --gui-shadow-game: gray;
 
     --top-border: black;
-    --top-bg: white;
-    --top-bg-button: white;
-    --top-bg-button-hover: #ddd;
-    --top-bg-button-active: ;
+    --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;
@@ -34,7 +35,8 @@
     --card-border: #bbb;
     --card-hover: #0f0;
 
-    --deck-hover: #3ea2ff;
+    --deck-shadow: #2696ff;
+    --deck-hover: #73bbff;
 
     /*  Input  */
     
@@ -75,4 +77,18 @@
 
     --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);
 }
\ No newline at end of file
diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css
index 2f6ef3e..f630ac0 100644
--- a/webcards/styles/themes/colors-dark.css
+++ b/webcards/styles/themes/colors-dark.css
@@ -15,7 +15,7 @@
     --gui-bg-main: #555;
     --gui-bg-game: #777;
     --gui-color-game: white;
-    --gui-shadow-game: #222;
+    --gui-shadow-game: #444;
 
     --top-border: #999;
     --top-bg: #333;
@@ -27,6 +27,7 @@
     --top-color-button-active: white;
 
     /*  Table  */
+    --table-bg: rgb(20, 110, 50);
 
     /*  Card defaults  */
     --card-color: black;
@@ -34,6 +35,7 @@
     --card-border: #bbb;
     --card-hover: #0f0;
 
+    --deck-shadow: #2696ff;
     --deck-hover: #3ea2ff;
 
     /*  Input  */
@@ -76,4 +78,26 @@
 
     --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