diff options
Diffstat (limited to 'webcards/styles/client')
| -rw-r--r-- | webcards/styles/client/base.css | 112 | ||||
| -rw-r--r-- | webcards/styles/client/desktop.css | 134 | ||||
| -rw-r--r-- | webcards/styles/client/mobile.css | 81 | ||||
| -rw-r--r-- | webcards/styles/client/tablet.css | 41 |
4 files changed, 368 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; + } +} |