1 files changed, 112 insertions, 0 deletions

diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
new file mode 100644
index 0000000..cae61f6
--- /dev/null
+++ b/webcards/styles/client/base.css
@@ -0,0 +1,112 @@
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+
+    min-width: 100vw;
+    min-height: 100vh;
+
+    display: block;
+
+}
+
+.topbar {
+    position: fixed;
+
+    background-color: white;
+
+    top: 0;
+    left: 0;
+
+    display: flex;
+
+    flex-direction: column;
+
+    width: 100vw;
+    z-index: 1;
+}
+
+.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 {
+    border-radius: 0;
+    background-color: white;
+    flex: 1;
+
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+}
+
+.top-buttons > button:first-child {
+    border-left: none;
+}
+
+.top-buttons > button:last-child {
+    border-right: none;
+}
+
+div.new-game {
+    flex: 1;
+    flex-grow: 1;
+    border-top: 2px solid black;
+}
+
+div.mobile-settings {
+    flex: 1;
+    flex-grow: 1;
+    border-top: 2px solid black;
+}
+
+div.topbar > div.status {
+    height: 5px;
+    flex-basis: auto;
+}
+
+div.stats {
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+}
+
+div.stats > div {
+    flex: 1;
+    display: flex;
+}
+
+div.stats > div > span {
+    flex-basis: content;
+    display: inline-block;
+}
+
+div.stats > div > span:last-child {
+    text-align: right;
+    flex: 1;
+    display: inline-block;
+}
+
+div.game {
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: lightgray 3px 3px 2px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+div.game:last-child {
+    margin-bottom: none;
+}
\ No newline at end of file