From b48f0adccb11619680a47cac5fa9c68f638bd489 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sun, 17 May 2020 13:15:41 -0400 Subject: [WebCards] Update from my local repos --- webcards/styles/client/base.css | 51 ++++++++++++++++++++++++++++---------- webcards/styles/client/card.css | 49 ++++++++++++++++++++++++++++++++---- webcards/styles/client/desktop.css | 31 ++++++++++++++++++++--- webcards/styles/client/mobile.css | 2 +- 4 files changed, 110 insertions(+), 23 deletions(-) (limited to 'webcards/styles/client') diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css index fc8e310..52c2722 100644 --- a/webcards/styles/client/base.css +++ b/webcards/styles/client/base.css @@ -11,6 +11,8 @@ html, body { display: block; + background-color: var(--main-bg); + color: var(--main-color); } /* Topbar rules */ @@ -19,7 +21,7 @@ html, body { { position: fixed; - background-color: white; + background-color: var(--gui-bg-main); top: 0; left: 0; @@ -40,18 +42,24 @@ html, body { button.top-button { border-radius: 0; - background-color: white; - color: black; + background-color: var(--top-bg-button); + color: var(--top-color-button); flex: 1; - border-left: 1px solid black; - border-right: 1px solid black; + border-left: 1px solid var(--top-border); + border-right: 1px solid var(--top-border); transition-duration: 0.2s; } button.top-button:hover { - background-color: #ddd; + background-color: var(--top-bg-button-hover); + color: var(--top-color-button-hover); +} + +button.top-button:active { + background-color: var(--top-bg-button-active); + color: var(--top-color-button-active); } .top-buttons > button:first-child @@ -68,20 +76,34 @@ div.new-game { flex: 1; flex-grow: 1; - border-top: 2px solid black; + border-top: 2px solid var(--top-border); } div.mobile-settings { flex: 1; flex-grow: 1; - border-top: 2px solid black; + border-top: 2px solid var(--top-border); } div.topbar > div.status { height: 5px; flex-basis: auto; + + background-color: var(--server-bg-loading); +} + +div.topbar > div.status[s=loading] { + background-color: var(--server-bg-loading); +} + +div.topbar > div.status[s=ok] { + background-color: var(--server-bg-ok); +} + +div.topbar > div.status[s=closed] { + background-color: var(--server-bg-closed); } /* Content rules */ @@ -112,9 +134,10 @@ div.stats > div > span:last-child { } div.game { - background-color: white; + background-color: var(--gui-bg-game); + color: var(--gui-color-game); border-radius: 5px; - box-shadow: lightgray 3px 3px 2px; + box-shadow: var(--gui-shadow-game) 3px 3px 2px; box-sizing: border-box; margin-bottom: 10px; } @@ -140,9 +163,11 @@ div.settings { animation-duration: 0.8s; background-color: rgba(0, 0, 0, 0.5); + + overflow: hidden; } -.table[state="open"] ,.table[state="close"]{ +.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; @@ -150,11 +175,11 @@ div.settings { animation-fill-mode: forwards; } -.table[state="close"] { +.table[state=close] { animation-direction: reverse; } -.table[state="closed"] { +.table[state=closed] { transform: translate(0, -100vh); opacity: 0; } diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css index 62b4054..01cdcc5 100644 --- a/webcards/styles/client/card.css +++ b/webcards/styles/client/card.css @@ -3,20 +3,22 @@ card position: absolute; display: block; width: 150px; - height: 225px; - background-color: white; - border: 6px double #bbb; + height: 230px; + background-color: var(--card-bg); + color: var(--card-color); + border: 2px solid var(--card-border); border-radius: 10px; transition-duration: 0.2s; cursor: pointer; flex-direction: column; overflow: hidden; user-select: none; + box-sizing: border-box; } card:hover { - box-shadow: 0 0 10px #0f0; + box-shadow: 0 0 10px var(--card-hover); } carea @@ -27,6 +29,7 @@ carea display: flex; vertical-align: middle; width: 100%; + box-sizing: border-box; } carea.top, carea.topl, carea.topr @@ -110,7 +113,43 @@ cimage flex: 1; } -card[drag = "true"] +card[drag=true] { z-index: 3; } + +/* Deck */ + +deck { + position: absolute; + width: 0; + height: 0; + + top: 0; + left: 0; + + overflow: visible; + display: flex; + justify-content: center; + align-content: center; +} + +deck > card { + transform: translate(-75px, calc(-115px + ( var(--cpos) * 3px ))); +} + +deck[mode="strip-hl"] > card { + transform: translate(calc(-75px - ( var(--cpos) * 75px )), -115px); +} + +deck[mode="strip-hr"] > card { + transform: translate(calc(-75px + ( var(--cpos) * 75px )), -115px); +} + +deck[mode="strip-vu"] > card { + transform: translate(-75px, calc(-115px - ( var(--cpos) * 115px ))); +} + +deck[mode="strip-vd"] > card { + transform: translate(-75px, calc(-115px + ( var(--cpos) * 115px ))); +} diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css index 08e24fe..f072a71 100644 --- a/webcards/styles/client/desktop.css +++ b/webcards/styles/client/desktop.css @@ -52,6 +52,24 @@ padding: 10px; border-radius: 10px; flex-basis: content; + + background-color: var(--server-bg-loading); + color: var(--server-color-loading); + } + + span.status[s=loading] { + background-color: var(--server-bg-loading); + color: var(--server-color-loading); + } + + span.status[s=ok] { + background-color: var(--server-bg-ok); + color: var(--server-color-ok); + } + + span.status[s=closed] { + background-color: var(--server-bg-closed); + color: var(--server-color-closed); } span.addr { @@ -59,7 +77,7 @@ padding: 10px; border-radius: 10px; - background-color: #ddd; + background-color: var(--gui-bg-main); flex: 1; } @@ -92,15 +110,15 @@ overflow-x: hidden; padding: 10px; border-radius: 10px; - background-color: #ddd; + background-color: var(--gui-bg-main); flex: 2; - border: 5px solid #ddd; + border: 5px solid var(--gui-bg-main); } div.stats, div.settings { border-radius: 10px; - background-color: #ddd; + background-color: var(--gui-bg-main); box-sizing: border-box; @@ -123,4 +141,9 @@ /* Table rules */ + + /* + Chat + */ + } diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css index 4659ce6..5770dde 100644 --- a/webcards/styles/client/mobile.css +++ b/webcards/styles/client/mobile.css @@ -69,7 +69,7 @@ overflow-x: hidden; overflow-y: auto; - background-color: #ddd; + background-color: var(--gui-bg-main); padding: 5px; box-sizing: border-box; -- cgit v1.2.3