summaryrefslogtreecommitdiff
path: root/webcards/styles
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/styles')
-rw-r--r--webcards/styles/client/base.css112
-rw-r--r--webcards/styles/client/desktop.css134
-rw-r--r--webcards/styles/client/mobile.css81
-rw-r--r--webcards/styles/client/tablet.css41
-rw-r--r--webcards/styles/home/base.css53
-rw-r--r--webcards/styles/home/desktop.css6
-rw-r--r--webcards/styles/home/mobile.css6
-rw-r--r--webcards/styles/icofont.css25
8 files changed, 458 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
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
+ */
+}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
new file mode 100644
index 0000000..cea233d
--- /dev/null
+++ b/webcards/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/webcards/styles/client/tablet.css b/webcards/styles/client/tablet.css
new file mode 100644
index 0000000..37750f8
--- /dev/null
+++ b/webcards/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;
+ }
+}
diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css
new file mode 100644
index 0000000..2ef3693
--- /dev/null
+++ b/webcards/styles/home/base.css
@@ -0,0 +1,53 @@
+* {
+ font-family: 'Montserrat', sans-serif;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+
+ min-width: 100vw;
+ min-height: 100vh;
+
+ display: block;
+}
+
+body {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+}
+
+div.content {
+ padding: 20px;
+
+ background-color: #ddd;
+ border-radius: 10px;
+ max-width: 500px;
+
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+
+ align-items: center;
+}
+
+a {
+ font-size: 24px;
+ display: block;
+ color: white;
+
+ border-radius: 5px;
+ padding: 5px;
+
+ background-color: dodgerblue;
+
+ transition-duration: 0.2s;
+
+ text-decoration: none;
+
+ margin-top: 10px;
+
+ max-width: 100px;
+} \ No newline at end of file
diff --git a/webcards/styles/home/desktop.css b/webcards/styles/home/desktop.css
new file mode 100644
index 0000000..0edda76
--- /dev/null
+++ b/webcards/styles/home/desktop.css
@@ -0,0 +1,6 @@
+@media (min-width: 600px) {
+ div.content > div {
+ display: flex;
+ flex-direction: row;
+ }
+} \ No newline at end of file
diff --git a/webcards/styles/home/mobile.css b/webcards/styles/home/mobile.css
new file mode 100644
index 0000000..4e469de
--- /dev/null
+++ b/webcards/styles/home/mobile.css
@@ -0,0 +1,6 @@
+@media (max-width: 599px) {
+ div.content > div {
+ display: flex;
+ flex-direction: column;
+ }
+} \ No newline at end of file
diff --git a/webcards/styles/icofont.css b/webcards/styles/icofont.css
new file mode 100644
index 0000000..3bc40e5
--- /dev/null
+++ b/webcards/styles/icofont.css
@@ -0,0 +1,25 @@
+@font-face
+{
+ font-family: "IcoFont";
+ font-weight: 400;
+ font-style: normal;
+ src: url("../fonts/icofont.woff2") format("woff2"),
+ url("../fonts/icofont.woff") format("woff");
+}
+
+.icofont {
+ font-family: 'IcoFont' !important;
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ line-height: 1;
+ /* Better Font Rendering =========== */
+ font-feature-settings: "liga";
+ -webkit-font-feature-settings: "liga";
+ -webkit-font-smoothing: antialiased;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-19 23:53:02 +0000