From ea8f308bc00330b5378eb2b8f16d9cc348719c9a Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 27 Feb 2020 17:48:00 -0500 Subject: Init WebCards --- webcards/styles/client/base.css | 112 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 webcards/styles/client/base.css (limited to 'webcards/styles/client/base.css') 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 -- cgit v1.2.3