5 files changed, 204 insertions, 32 deletions

diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index cae61f6..fc8e310 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -13,7 +13,10 @@ html, body {
 
 }
 
-.topbar {
+/*    Topbar rules    */
+
+.topbar
+{
     position: fixed;
 
     background-color: white;
@@ -29,66 +32,75 @@ 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;
+    color: black;
     flex: 1;
 
     border-left: 1px solid black;
     border-right: 1px solid black;
+
+    transition-duration: 0.2s;
 }
 
-.top-buttons > button:first-child {
+button.top-button:hover {
+    background-color: #ddd;
+}
+
+.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;
 }
 
-div.mobile-settings {
+div.mobile-settings
+{
     flex: 1;
     flex-grow: 1;
     border-top: 2px solid black;
 }
 
-div.topbar > div.status {
+div.topbar > div.status
+{
     height: 5px;
     flex-basis: auto;
 }
 
-div.stats {
+/*    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;
 }
@@ -109,4 +121,52 @@ div.game {
 
 div.game:last-child {
     margin-bottom: none;
-}
\ No newline at end of file
+}
+
+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: rgba(0, 0, 0, 0.5);
+}
+
+.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;
+    }
+}
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
new file mode 100644
index 0000000..62b4054
--- /dev/null
+++ b/webcards/styles/client/card.css
@@ -0,0 +1,116 @@
+card
+{
+    position: absolute;
+    display: block;
+    width: 150px;
+    height: 225px;
+    background-color: white;
+    border: 6px double #bbb;
+    border-radius: 10px;
+    transition-duration: 0.2s;
+    cursor: pointer;
+    flex-direction: column;
+    overflow: hidden;
+    user-select: none;
+}
+
+card:hover
+{
+    box-shadow: 0 0 10px #0f0;
+}
+
+carea
+{
+    padding-left: 2px;
+    padding-right: 2px;
+    position: absolute;
+    display: flex;
+    vertical-align: middle;
+    width: 100%;
+}
+
+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;
+}
diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
index 46dc83d..08e24fe 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/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";
     }
@@ -101,7 +93,7 @@
         padding: 10px;
         border-radius: 10px;
         background-color: #ddd;
-        flex: 4;
+        flex: 2;
 
         border: 5px solid #ddd;
     }
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index cea233d..4659ce6 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 599px), (max-height: 500px) {
+@media (max-width: 599px) or (max-height: 500px) {
     /*
         Hide stuff
     */
diff --git a/webcards/styles/client/tablet.css b/webcards/styles/client/tablet.css
index 37750f8..b9b5bd1 100644
--- a/webcards/styles/client/tablet.css
+++ b/webcards/styles/client/tablet.css
@@ -38,4 +38,8 @@
         margin-top: 0px;
         margin-left: 10px;
     }
+
+    div.games {
+        flex: 4;
+    }
 }