From 1697da112a9b9f529fad2f54c62aecd7bbb614e6 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 3 Apr 2020 16:44:23 -0400 Subject: [WEBCARDS] Update some webcards stuff --- webcards/styles/client/base.css | 104 ++++++++++++++++++++++++++------- webcards/styles/client/card.css | 116 +++++++++++++++++++++++++++++++++++++ webcards/styles/client/desktop.css | 10 +--- webcards/styles/client/mobile.css | 2 +- webcards/styles/client/tablet.css | 4 ++ 5 files changed, 204 insertions(+), 32 deletions(-) create mode 100644 webcards/styles/client/card.css (limited to 'webcards/styles/client') diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css index cae61f6..fc8e310 100644 --- a/webcards/styles/client/base.css +++ b/webcards/styles/client/base.css @@ -13,7 +13,10 @@ html, body { } -.topbar { +/* Topbar rules */ + +.topbar +{ position: fixed; background-color: white; @@ -29,66 +32,75 @@ html, body { z-index: 1; } -.top-buttons { +.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 { +button.top-button +{ border-radius: 0; background-color: white; + color: black; flex: 1; border-left: 1px solid black; border-right: 1px solid black; + + transition-duration: 0.2s; } -.top-buttons > button:first-child { +button.top-button:hover { + background-color: #ddd; +} + +.top-buttons > button:first-child +{ border-left: none; } -.top-buttons > button:last-child { +.top-buttons > button:last-child +{ border-right: none; } -div.new-game { +div.new-game +{ flex: 1; flex-grow: 1; border-top: 2px solid black; } -div.mobile-settings { +div.mobile-settings +{ flex: 1; flex-grow: 1; border-top: 2px solid black; } -div.topbar > div.status { +div.topbar > div.status +{ height: 5px; flex-basis: auto; } -div.stats { +/* Content rules */ + +div.stats +{ padding: 5px; display: flex; flex-direction: column; } -div.stats > div { +div.stats > div +{ flex: 1; display: flex; } -div.stats > div > span { +div.stats > div > span +{ flex-basis: content; display: inline-block; } @@ -109,4 +121,52 @@ div.game { div.game:last-child { margin-bottom: none; -} \ No newline at end of file +} + +div.settings { + display:flex; + flex-direction: column; + padding: 5px; +} + +/* Table rules */ + +.table { + position: absolute; + z-index: 2; + width: 100vw; + height: 100vh; + + animation-duration: 0.8s; + + background-color: rgba(0, 0, 0, 0.5); +} + +.table[state="open"] ,.table[state="close"]{ + animation-name: slide-in; + animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); + animation-iteration-count: 1; + animation-direction: normal; + animation-fill-mode: forwards; +} + +.table[state="close"] { + animation-direction: reverse; +} + +.table[state="closed"] { + transform: translate(0, -100vh); + opacity: 0; +} + +@keyframes slide-in { + from { + transform: translate(0, -100vh); + opacity: 0; + } + + to { + transform: translate(0, 0); + opacity: 1; + } +} diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css new file mode 100644 index 0000000..62b4054 --- /dev/null +++ b/webcards/styles/client/card.css @@ -0,0 +1,116 @@ +card +{ + position: absolute; + display: block; + width: 150px; + height: 225px; + background-color: white; + border: 6px double #bbb; + border-radius: 10px; + transition-duration: 0.2s; + cursor: pointer; + flex-direction: column; + overflow: hidden; + user-select: none; +} + +card:hover +{ + box-shadow: 0 0 10px #0f0; +} + +carea +{ + padding-left: 2px; + padding-right: 2px; + position: absolute; + display: flex; + vertical-align: middle; + width: 100%; +} + +carea.top, carea.topl, carea.topr +{ + top: 0; + height: 8%; + text-align: center; +} + +carea.topl +{ + width: 50%; + text-align: left; +} + +carea.topr +{ + right: 0; + width: 50%; + text-align: right; +} + +carea.mid +{ + top: 8%; + height: 84%; +} + +carea.midt +{ + top: 8%; + height: 42%; +} + +carea.midb +{ + + top: 50%; + height: 42%; +} + +carea.bot, carea.botl, carea.botr +{ + bottom: 0; + height: 8%; + text-align: center; +} + +carea.botl +{ + width: 50%; + text-align: left; +} + +carea.botr +{ + right: 0; + width: 50%; + text-align: right; +} + +carea.all +{ + top: 0; + height: 100%; +} + +ctext +{ + display: inline-block; + flex: 1; + font-size: small; + height: auto; +} + +cimage +{ + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + flex: 1; +} + +card[drag = "true"] +{ + z-index: 3; +} diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css index 46dc83d..08e24fe 100644 --- a/webcards/styles/client/desktop.css +++ b/webcards/styles/client/desktop.css @@ -10,14 +10,6 @@ TopBar rules */ - button.top-button { - transition-duration: 0.2s; - } - - button.top-button:hover { - background-color: #ddd; - } - button#newgame:before{ content: "Create Game"; } @@ -101,7 +93,7 @@ padding: 10px; border-radius: 10px; background-color: #ddd; - flex: 4; + flex: 2; border: 5px solid #ddd; } diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css index cea233d..4659ce6 100644 --- a/webcards/styles/client/mobile.css +++ b/webcards/styles/client/mobile.css @@ -1,4 +1,4 @@ -@media (max-width: 599px), (max-height: 500px) { +@media (max-width: 599px) or (max-height: 500px) { /* Hide stuff */ diff --git a/webcards/styles/client/tablet.css b/webcards/styles/client/tablet.css index 37750f8..b9b5bd1 100644 --- a/webcards/styles/client/tablet.css +++ b/webcards/styles/client/tablet.css @@ -38,4 +38,8 @@ margin-top: 0px; margin-left: 10px; } + + div.games { + flex: 4; + } } -- cgit v1.2.3