Init WebCards

1 files changed, 134 insertions, 0 deletions

diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
new file mode 100644
index 0000000..46dc83d
--- /dev/null
+++ b/webcards/styles/client/desktop.css
@@ -0,0 +1,134 @@
+@media (min-width: 600px) and (min-height: 501px) {
+    body {
+        display: flex;
+    
+        align-items: center;
+        justify-content: center;
+    }
+
+    /*
+        TopBar rules
+    */
+
+    button.top-button {
+        transition-duration: 0.2s;
+    }
+
+    button.top-button:hover {
+        background-color: #ddd;
+    }
+
+    button#newgame:before{
+        content: "Create Game";
+    }
+
+    button#settings {
+        display: none;
+    }
+
+    button#reset:before{
+        content: "Reset Connection";
+    }
+
+    /*
+        Lobby rules
+    */
+    div.lobby {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    
+        align-items: center;
+    }
+
+    div.server {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    span.status {
+        box-sizing: border-box;
+        font-size: larger;
+
+        margin-right: 10px;
+        padding: 10px;
+        border-radius: 10px;
+        flex-basis: content;
+    }
+
+    span.addr {
+        font-size: larger;
+        padding: 10px;
+        border-radius: 10px;
+
+        background-color: #ddd;
+
+        flex: 1;
+    }
+
+    div.content {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        flex-direction: row;
+
+        box-sizing: border-box;
+    }
+
+    div.info {
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+
+        flex: 1;
+
+        margin-left: 10px;
+
+        box-sizing: border-box;
+    }
+
+    div.games {
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 10px;
+        border-radius: 10px;
+        background-color: #ddd;
+        flex: 4;
+
+        border: 5px solid #ddd;
+    }
+
+    div.stats, div.settings {
+        border-radius: 10px;
+        background-color: #ddd;
+
+        box-sizing: border-box;
+
+        flex: 1;
+
+        height: auto;
+        width: 100%;
+
+        text-align: left;
+    }
+
+    div.settings {
+        margin-top: 10px;
+    }
+
+    div.game {
+        height: 20%;
+    }
+
+    /*
+        Table rules
+    */
+}