From 2ce432034eb35f763182de03fb7b42d2a07afc4b Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Tue, 15 Sep 2020 20:03:52 -0400 Subject: Webcards update from local git server --- webcards/styles/client/base.css | 122 ++++++++++++++++++++++++++++++++- webcards/styles/client/card.css | 48 +++++++++---- webcards/styles/client/desktop.css | 2 +- webcards/styles/client/mobile.css | 4 ++ webcards/styles/home/base.css | 56 ++++++++++++++- webcards/styles/input.css | 6 +- webcards/styles/themes/colors-base.css | 26 +++++-- webcards/styles/themes/colors-dark.css | 26 ++++++- 8 files changed, 266 insertions(+), 24 deletions(-) (limited to 'webcards/styles') diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css index 52c2722..ba06e3c 100644 --- a/webcards/styles/client/base.css +++ b/webcards/styles/client/base.css @@ -13,6 +13,8 @@ html, body { background-color: var(--main-bg); color: var(--main-color); + + overflow: hidden; } /* Topbar rules */ @@ -140,6 +142,9 @@ div.game { box-shadow: var(--gui-shadow-game) 3px 3px 2px; box-sizing: border-box; margin-bottom: 10px; + padding: 5px; + + text-align: left; } div.game:last-child { @@ -162,7 +167,7 @@ div.settings { animation-duration: 0.8s; - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--table-bg); overflow: hidden; } @@ -195,3 +200,118 @@ div.settings { opacity: 1; } } + +/* Chat */ + +div.chat { + border-top-left-radius: 10px; + background-color: var(--chat-bg); + color: var(--chat-color); + + width: 50vw; + height: 50vh; + display: flex; + flex-direction: column; + position: absolute; + right: -50vw; + + box-sizing: border-box; + + top: 50vh; + + transition-duration: 0.2s; + + padding: 5px; + + z-index: 4; +} + +div.chat[show=true] { + right: 0; +} + +button.toggle-chat { + position: absolute; + bottom: 5px; + left: -5px; + transform-origin: bottom left; + transform: rotate(-90deg); +} + +div.chat > div { + box-sizing: border-box; + margin: 5px; +} + +div.chat-select, div.chat-input { + flex-basis: content; + display: flex; +} + +div.chat-text { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + padding: 5px; + background-color: var(--chat-bg-text); + border-radius: 10px; + border: 5px solid rgba(0, 0, 0, 0); +} + +div.chat-select > button { + flex: 1; + + margin-right: 2px; + margin-left: 2px; +} + +div.chat-select > button[active="false"] { + background-color: var(--chat-bg-inactive); +} + +div.chat-select > button[active="false"]:hover { + background-color: var(--chat-bg-inactive-hover); +} + +div.chat-select > button[active="false"]:active { + background-color: var(--chat-bg-inactive-active); +} + +div.chat-select > button:first-child { + margin-left: 0; +} + +div.chat-select > button:last-child { + margin-right: 0; +} + +div.chat-input > input { + flex: 5; + + margin: 0; + margin-right: 5px; + + border-radius: 5px; + + transition-duration: 0.2s; + border: none; + + background-color: var(--chat-bg-input); +} + +div.chat-input > input:hover { + background-color: var(--chat-bg-input-hover); +} + +div.chat-input > input:focus { + background-color: var(--chat-bg-input-active); +} + +div.chat-input > button { + flex: 1; +} + +div.chat-text > div { + word-wrap: break-word; + word-break: break-all; +} \ No newline at end of file diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css index 2f52255..de49175 100644 --- a/webcards/styles/client/card.css +++ b/webcards/styles/client/card.css @@ -125,43 +125,67 @@ card[drag=true] /* Deck */ deck { + --ccount: 0; + position: absolute; - min-width: 160px; - min-height: 240px; + width: 166px; + height: 250px; top: 0; left: 0; overflow: visible; - display: flex; - justify-content: center; - align-content: center; border-radius: 10px; transition-duration: 0.2s; + + border: 3px solid var(--deck-shadow); + box-sizing: border-box; } deck:hover { - box-shadow: 0 0 5px var(--deck-hover); + border: 3px solid var(--deck-hover); +} + +/* Deck modes */ + +deck[mode="stack"] > card { + transform: translate(5px, calc(var(--cpos) * 3px + 7px)); } -deck > card { - transform: translate(0, calc(var(--cpos) * 3px )); +deck[mode="stack"] { + height: calc(var(--ccount) * 3px + 250px); } deck[mode="strip-hl"] > card { - transform: translate(calc(var(--cpos) * -75px), 0); + transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); +} + +deck[mode="strip-hl"] { + width: calc(var(--ccount) * 75px + 160px); } deck[mode="strip-hr"] > card { - transform: translate(calc(var(--cpos) * 75px), 0); + transform: translate(calc(var(--cpos) * 75px + 5px), 7px); +} + +deck[mode="strip-hr"] { + width: calc(var(--ccount) * 75px + 160px); } deck[mode="strip-vu"] > card { - transform: translate(0, calc(var(--cpos) * -115px )); + transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); +} + +deck[mode="strip-vu"] { + height: calc(var(--ccount) * 115px + 240px); } deck[mode="strip-vd"] > card { - transform: translate(0, calc(var(--cpos) * 115px )); + transform: translate(5px, calc(var(--cpos) * 115px + 7px)); } + +deck[mode="strip-vd"] { + height: calc(var(--ccount) * 115px + 240px); +} \ No newline at end of file diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css index f072a71..10caa15 100644 --- a/webcards/styles/client/desktop.css +++ b/webcards/styles/client/desktop.css @@ -28,6 +28,7 @@ div.lobby { min-width: 70vw; min-height: 70vh; + max-height: 70vh; display: flex; text-align: center; @@ -145,5 +146,4 @@ /* Chat */ - } diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css index 1afc4fb..ed2e19d 100644 --- a/webcards/styles/client/mobile.css +++ b/webcards/styles/client/mobile.css @@ -10,6 +10,10 @@ display: none; } + div.chat { + display: none; + } + /* TopBar for mobile */ diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css index 80d0948..a082ec2 100644 --- a/webcards/styles/home/base.css +++ b/webcards/styles/home/base.css @@ -35,7 +35,7 @@ div.content { } a, button { - font-size: 24px; + font-size: 1em; display: block; color: white; box-sizing: border-box; @@ -51,4 +51,58 @@ a, button { text-decoration: none; margin-top: 10px; +} + + + +div.content > div.prev { + width: 100%; + margin: 10px; + + border-radius: 5px; + + display: block; + + padding: 0; +} + +div.prev > a{ + display: inline-block; + width: 80%; + margin: 0; + padding: 5px; + border-radius: 0; +} + +div.prev > a:first-of-type { + border-top-left-radius: 5px; +} + +div.prev > a:last-of-type { + border-bottom-left-radius: 5px; +} + +div.prev > button { + display: inline-block; + width: 20%; + margin: 0; + background-color: #ff1e00; + padding: 5px; + border-radius: 0; +} + +div.prev > button:first-of-type { + border-top-right-radius: 5px; +} + +div.prev > button:last-of-type { + border-bottom-right-radius: 5px; +} + +div.prev > button:hover { + background-color: #ff5741; +} + +div.prev > button:active { + background-color: #9c1200; } \ No newline at end of file diff --git a/webcards/styles/input.css b/webcards/styles/input.css index 0553fc2..42656a0 100644 --- a/webcards/styles/input.css +++ b/webcards/styles/input.css @@ -17,7 +17,7 @@ input, select /* Button input */ -input[type=button], input[type=submit], button +input[type=button], input[type=submit], button, a { padding: 10px; @@ -34,12 +34,12 @@ input[type=button], input[type=submit], button cursor: pointer; } -input[type=button]:hover, input[type=submit]:hover, button:hover +input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover { background-color: var(--input-bg-button-hover); } -input[type=button]:active, input[type=submit]:active, button:active +input[type=button]:active, input[type=submit]:active, button:active, a:active { background-color: var(--input-bg-button-active); } diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css index fa2b60e..62665a2 100644 --- a/webcards/styles/themes/colors-base.css +++ b/webcards/styles/themes/colors-base.css @@ -18,15 +18,16 @@ --gui-shadow-game: gray; --top-border: black; - --top-bg: white; - --top-bg-button: white; - --top-bg-button-hover: #ddd; - --top-bg-button-active: ; + --top-bg: #eee; + --top-bg-button: #eee; + --top-bg-button-hover: #ccc; + --top-bg-button-active: white; --top-color-button: black; --top-color-button-hover: black; --top-color-button-active: black; /* Table */ + --table-bg: rgb(20, 110, 50); /* Card defaults */ --card-color: black; @@ -34,7 +35,8 @@ --card-border: #bbb; --card-hover: #0f0; - --deck-hover: #3ea2ff; + --deck-shadow: #2696ff; + --deck-hover: #73bbff; /* Input */ @@ -75,4 +77,18 @@ --input-bg-multi: rgba(30, 30, 30, 0.3); --input-bg-multi-hover: rgba(200, 200, 200, 0.3); + + /* Chat */ + --chat-color: black; + --chat-bg: white; + + --chat-bg-text: rgba(0, 0, 0, 0.2); + + --chat-bg-input: rgb(220, 220, 220); + --chat-bg-input-hover: rgb(220, 220, 220); + --chat-bg-input-active: rgb(220, 220, 220); + + --chat-bg-inactive: rgb(80, 80, 80); + --chat-bg-inactive-hover: rgb(130, 130, 130); + --chat-bg-inactive-active: rgb(40, 40, 40); } \ No newline at end of file diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css index 2f6ef3e..f630ac0 100644 --- a/webcards/styles/themes/colors-dark.css +++ b/webcards/styles/themes/colors-dark.css @@ -15,7 +15,7 @@ --gui-bg-main: #555; --gui-bg-game: #777; --gui-color-game: white; - --gui-shadow-game: #222; + --gui-shadow-game: #444; --top-border: #999; --top-bg: #333; @@ -27,6 +27,7 @@ --top-color-button-active: white; /* Table */ + --table-bg: rgb(20, 110, 50); /* Card defaults */ --card-color: black; @@ -34,6 +35,7 @@ --card-border: #bbb; --card-hover: #0f0; + --deck-shadow: #2696ff; --deck-hover: #3ea2ff; /* Input */ @@ -76,4 +78,26 @@ --input-bg-multi: rgba(30, 30, 30, 0.3); --input-bg-multi-hover: rgba(200, 200, 200, 0.3); + + /* Chat */ + --chat-color: white; + --chat-bg: #555; + + --chat-bg-text: #444; + + --chat-bg-input: #555; + --chat-bg-input-hover: #777; + --chat-bg-input-active: #444; + + --chat-bg-select: #444; + --chat-bg-select-hover: #777; + --chat-bg-select-active: #333; + + --chat-bg-inactive: #444; + --chat-bg-inactive-hover: #777; + --chat-bg-inactive-active: #333; + + --chat-bg-active: rgb(255, 133, 34); + --chat-bg-active-hover: rgb(255, 165, 92); + --chat-bg-active-active: rgb(226, 102, 0); } \ No newline at end of file -- cgit v1.2.3