summaryrefslogtreecommitdiff
path: root/styles/client
diff options
context:
space:
mode:
Diffstat (limited to 'styles/client')
-rw-r--r--styles/client/base.css112
-rw-r--r--styles/client/desktop.css134
-rw-r--r--styles/client/mobile.css81
-rw-r--r--styles/client/tablet.css41
4 files changed, 368 insertions, 0 deletions
diff --git a/styles/client/base.css b/styles/client/base.css
new file mode 100644
index 0000000..cae61f6
--- /dev/null
+++ b/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
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
new file mode 100644
index 0000000..46dc83d
--- /dev/null
+++ b/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
+ */
+}
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
new file mode 100644
index 0000000..cea233d
--- /dev/null
+++ b/styles/client/mobile.css
@@ -0,0 +1,81 @@
+@media (max-width: 599px), (max-height: 500px) {
+ /*
+ Hide stuff
+ */
+ div.server {
+ display: none;
+ }
+
+ div.info {
+ display: none;
+ }
+
+ /*
+ TopBar for mobile
+ */
+
+ div.topbar > div.status {
+ height: 10px;
+ }
+
+ div.top-buttons {
+ height: 50px;
+ }
+
+ button.top-button {
+ padding: 5px;
+ }
+
+ button#reset:before, button#newgame:before, button#settings:before {
+ font-family: "IcoFont";
+ font-size: xx-large;
+ }
+
+ button#newgame:before{
+ content: "\efc2";
+ }
+
+ button#settings {
+ display: inline-block;
+ }
+
+ button#settings:before {
+ content: "\ef3a";
+ }
+
+ button#reset:before{
+ content: "\efd1";
+ }
+
+ /*
+ Mobile lobby
+ */
+
+ div.lobby {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+
+ div.content {
+ margin-top: 60px;
+ box-sizing: border-box;
+ flex: 1;
+ }
+
+ div.games {
+ height: 100%;
+ width: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ background-color: #ddd;
+ padding: 5px;
+ box-sizing: border-box;
+
+ }
+
+ div.game {
+ height: 12.5%;
+ }
+}
diff --git a/styles/client/tablet.css b/styles/client/tablet.css
new file mode 100644
index 0000000..37750f8
--- /dev/null
+++ b/styles/client/tablet.css
@@ -0,0 +1,41 @@
+@media (min-width: 600px) and (orientation: portrait) {
+ body {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+ }
+
+ div.lobby {
+ max-width: 500px;
+
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+
+ align-items: center;
+ }
+
+ div.content {
+ min-width: 70vw;
+ min-height: 70vh;
+
+ display: flex;
+ flex-direction: column;
+ }
+
+ div.info {
+ flex-direction: row;
+ margin-left: 0px;
+ margin-top: 10px;
+ }
+
+ div.settings, div.stats {
+ width: auto;
+ }
+
+ div.settings {
+ margin-top: 0px;
+ margin-left: 10px;
+ }
+}