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 +- webcards/styles/home/base.css | 5 +- webcards/styles/input.css | 203 +++++++++++++++++++++++++++------ webcards/styles/themes/colors-base.css | 76 ++++++++++++ webcards/styles/themes/colors-dark.css | 77 +++++++++++++ 8 files changed, 432 insertions(+), 62 deletions(-) create mode 100644 webcards/styles/themes/colors-base.css create mode 100644 webcards/styles/themes/colors-dark.css (limited to 'webcards/styles') 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; diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css index 99bb148..80d0948 100644 --- a/webcards/styles/home/base.css +++ b/webcards/styles/home/base.css @@ -17,14 +17,15 @@ body { align-items: center; justify-content: center; + + background-color: var(--main-bg); } div.content { padding: 20px; - background-color: #ddd; + background-color: var(--gui-bg-main); border-radius: 10px; - max-width: 500px; display: flex; text-align: center; diff --git a/webcards/styles/input.css b/webcards/styles/input.css index 16a5385..0553fc2 100644 --- a/webcards/styles/input.css +++ b/webcards/styles/input.css @@ -2,7 +2,7 @@ /* All input */ -input +input, select { -webkit-appearance: none; -moz-appearance: none; @@ -11,7 +11,8 @@ input margin: 5px; display: block; - z-index: 1; + + box-sizing: border-box; } /* Button input */ @@ -19,14 +20,13 @@ input input[type=button], input[type=submit], button { padding: 10px; - box-sizing: border-box; border: none; border-radius: 5px; - color: white; - background-color: #0084ff; - + background-color: var(--input-bg-button); + color: var(--input-color-button); + font-size: medium; transition-duration: 0.2s; @@ -36,33 +36,34 @@ input[type=button], input[type=submit], button input[type=button]:hover, input[type=submit]:hover, button:hover { - background-color: #3ea2ff; + background-color: var(--input-bg-button-hover); } input[type=button]:active, input[type=submit]:active, button:active { - background-color: #0056a7; + background-color: var(--input-bg-button-active); } /* Text, date, number, and time input */ input[type=text], input[type=date], input[type=time], input[type="number"] { - border: 2px solid #555; + border: 2px solid var(--input-border-text); border-radius: 3px; padding: 5px; - background-color: white; + background-color: var(--input-bg-text); + color: var(--input-color-text); font-size: 1em; } input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover { - border-color: black; + border-color: var(--input-border-text-hover); } input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus { - border-color: #0084ff; + border-color: var(--input-border-text-active); } /* Radial input */ @@ -72,12 +73,12 @@ input[type=radio] width: 20px; height: 20px; - border: 3px solid black; + border: 3px solid var(--input-border-bool); border-radius: 50%; transition-duration: 0.2s; - background-color: white; + background-color: var(--input-bg-bool); cursor: pointer; @@ -91,18 +92,20 @@ input[type=radio]:checked, input[type=radio]:hover{ input[type=radio]:checked { - background-color: black; - border-color: #0084ff; + background-color: var(--input-bg-bool-true); + border-color: var(--input-border-bool-true); } input[type=radio]:hover { - border-color: #3ea2ff; + background-color: var(--input-bg-bool-hover); + border-color: var(--input-border-bool-hover); } input[type=radio]:active { - border-color: black; + background-color: var(--input-bg-bool-active); + border-color: var(--input-border-bool-active); } /* Checkbox input */ @@ -119,13 +122,13 @@ input[type=checkbox] width: 20px; height: 20px; - border: 3px solid black; + border: 3px solid var(--input-border-bool); border-radius: 2px; transition-duration: 0.2s; - background-color: white; + background-color: var(--input-bg-bool); cursor: pointer; } @@ -133,22 +136,25 @@ input[type=checkbox] input[type=checkbox]:checked { border-width: 10px; - border-color: #0084ff; + background-color: var(--input-border-bool-true); + border-color: var(--input-border-bool-true); } input[type=checkbox]:hover { - border-color: #3ea2ff; + background-color: var(--input-bg-bool-hover); + border-color: var(--input-border-bool-hover); } input[type=checkbox]:active { - border-color: black; + background-color: var(--input-bg-bool-active); + border-color: var(--input-border-bool-active); } input[type=checkbox]::after { - height: 16px; + height: 15px; width: 10px; box-sizing: border-box; @@ -157,7 +163,7 @@ input[type=checkbox]::after display: block; - border-color: black; + border-color: var(--input-bg-bool-true); border-style: solid; border-width: 0px 0px 0px 0px; @@ -201,13 +207,68 @@ input[type=file] display: none; } +/* Custom select */ + +div.input-select +{ + font-size: 1em; + + display: block; + position: absolute; + +} + +div.input-select > div +{ + display: none; + pointer-events: none; +} + +div.input-select > div[selected=true] +{ + display: block; +} + +div.input-container:focus > div.input-select +{ + pointer-events: all; + + transform: translate(0, 2em); + + border: 2px solid var(--input-border-select-active); + background-color: var(--input-bg-select-active); +} + +div.input-container:focus > div.input-select > div +{ + pointer-events: all; + display: block; + padding: 5px; + width: 6em; +} + +div.input-container:focus > div.input-select > div:hover +{ + background-color: var(--input-bg-select-hover); + color: var(--input-color-select-hover); +} + +div.input-container:focus > div.input-select > div[selected=true]:after +{ + font-family: "IcoFont"; + content: '\eed8'; + font-size: medium; +} + /* Input container */ -div.input-container { +*.input-container { margin: 5px; padding: 5px; border-radius: 3px; + + display: inline-block; } /* Color container */ @@ -216,8 +277,8 @@ div.input-container[type=color] { text-align: center; - background-color: #0084ff; - color: white; + background-color: var(--input-bg-button); + color: var(--input-color-button); transition-duration: 0.2s; @@ -237,20 +298,20 @@ div.input-container[type=color]::after div.input-container[type=color]:hover { - background-color: #3ea2ff; + background-color: var(--input-bg-button-hover); } div.input-container[type=color]:active { - background-color: #0056a7; + background-color: var(--input-bg-button-active); } /* File input container */ div.input-container[type=file] { - background-color: #0084ff; - color: white; + background-color: var(--input-bg-button); + color: var(--input-color-button); transition-duration: 0.2s; @@ -264,12 +325,12 @@ div.input-container[type=file] div.input-container[type=file]:hover { - background-color: #3ea2ff; + background-color: var(--input-bg-button-hover); } div.input-container[type=file]:active { - background-color: #0056a7; + background-color: var(--input-bg-button-active); } div.input-container[type=file]::after @@ -283,14 +344,82 @@ div.input-container[type=file]::after /* Radio input container */ -div.input-container[type=radio]::before { +div.input-container[type=radio]::before +{ display: block; - content: 'Radio'; + content: 'Select one'; + transition-duration: 0.2s; } div.input-container[type=radio] { - background-color: rgba(255, 255, 255, 0.3); + background-color: var(--input-bg-multi); +} + +div.input-container[type=radio]:hover +{ + background-color: var(--input-bg-multi); +} + +/* Select input container */ + +div.input-container[type=select] +{ + border: 2px solid var(--input-border-select); + background-color: var(--input-bg-select); + min-height: 1em; + width: 7em; + + color: var(--input-color-select); + + cursor: pointer; + + overflow: hidden; + + display: inline-block; + + text-align: left; +} + +div.input-container[type=select]:hover +{ + border-color: var(--input-border-select-hover); + background-color: var(--input-bg-select-hover); + + color: var(--input-color-select-hover); +} + +div.input-container[type=select]:focus +{ + border-color: var(--input-border-select-active); + background-color: var(--input-bg-select-active); + + color: var(--input-color-select-active); + + overflow: visible; +} + +div.input-container[type=select]:after +{ + font-family: "IcoFont"; + font-size: medium; + content: '\eab2'; + display: block; + height: 100%; + width: 100%; + color: var(--input-color-select); + text-align: right; +} + +div.input-container[type=select]:after:hover +{ + color: var(--input-color-select-hover); +} + +div.input-container[type=select]:focus::after +{ + content: '\eab9'; + color: var(--input-color-select-active); } /* End Input CSS */ \ No newline at end of file diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css new file mode 100644 index 0000000..4f878da --- /dev/null +++ b/webcards/styles/themes/colors-base.css @@ -0,0 +1,76 @@ +* { + /* Main */ + --main-bg: white; + --main-color: black; + + /* Server */ + --server-bg-ok: #0C0; + --server-bg-loading: #DA0; + --server-bg-closed: #D00; + --server-color-ok: white; + --server-color-loading: white; + --server-color-closed: white; + + /* Gui and topbar */ + --gui-bg-main: #ddd; + --gui-bg-game: white; + --gui-color-game: black; + --gui-shadow-game: gray; + + --top-border: black; + --top-bg: white; + --top-bg-button: white; + --top-bg-button-hover: #ddd; + --top-bg-button-active: ; + --top-color-button: black; + --top-color-button-hover: black; + --top-color-button-active: black; + + /* Table */ + + /* Card defaults */ + --card-color: black; + --card-bg: white; + --card-border: #bbb; + --card-hover: #0f0; + + /* Input */ + + --input-color-text: black; + --input-color-text-hover: black; + --input-color-text-active: black; + --input-bg-text: white; + --input-bg-text-hover: white; + --input-bg-text-active: white; + --input-border-text: #555; + --input-border-text-hover: black; + --input-border-text-active: #0084ff; + + --input-color-button: white; + --input-color-button-hover: white; + --input-color-button-active: white; + --input-bg-button: #0084ff; + --input-bg-button-hover: #3ea2ff; + --input-bg-button-active:#0056a7; + + --input-bg-bool: white; + --input-bg-bool-hover: white; + --input-bg-bool-active: white; + --input-border-bool: black; + --input-border-bool-hover: #3ea2ff; + --input-border-bool-active: black; + --input-border-bool-true: #0084ff; + + --input-color-select: black; + --input-color-select-hover: black; + --input-color-select-active: #555; + --input-bg-select: white; + --input-bg-select-hover: white; + --input-bg-select-active: white; + --input-border-select: #555; + --input-border-select-hover: black; + --input-border-select-active: #0084ff; + + --input-bg-multi: rgba(30, 30, 30, 0.3); + --input-bg-multi-hover: rgba(200, 200, 200, 0.3); +} \ No newline at end of file diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css new file mode 100644 index 0000000..8020491 --- /dev/null +++ b/webcards/styles/themes/colors-dark.css @@ -0,0 +1,77 @@ +* { + /* Main */ + --main-bg: #333; + --main-color: white; + + /* Server */ + --server-bg-ok: #0B0; + --server-bg-loading: #DA0; + --server-bg-closed: #D00; + --server-color-ok: white; + --server-color-loading: white; + --server-color-closed: white; + + /* Gui and topbar */ + --gui-bg-main: #555; + --gui-bg-game: #777; + --gui-color-game: white; + --gui-shadow-game: #222; + + --top-border: #999; + --top-bg: #333; + --top-bg-button: #555; + --top-bg-button-hover: #999; + --top-bg-button-active: #777; + --top-color-button: white; + --top-color-button-hover: white; + --top-color-button-active: white; + + /* Table */ + + /* Card defaults */ + --card-color: black; + --card-bg: white; + --card-border: #bbb; + --card-hover: #0f0; + + /* Input */ + + --input-color-text: white; + --input-color-text-hover: white; + --input-color-text-active: white; + --input-bg-text: #777; + --input-bg-text-hover: #777; + --input-bg-text-active: #777; + --input-border-text: #222; + --input-border-text-hover: #AAA; + --input-border-text-active: #3ea2ff; + + --input-color-button: white; + --input-color-button-hover: white; + --input-color-button-active: white; + --input-bg-button: #0084ff; + --input-bg-button-hover: #3ea2ff; + --input-bg-button-active:#0056a7; + + --input-bg-bool: #555; + --input-bg-bool-hover: #999; + --input-bg-bool-active: #777; + --input-bg-bool-true: white; + --input-border-bool: #999; + --input-border-bool-hover: #999; + --input-border-bool-active: #999; + --input-border-bool-true: #999; + + --input-color-select: white; + --input-color-select-hover: white; + --input-color-select-active: white; + --input-bg-select: #777; + --input-bg-select-hover: #888; + --input-bg-select-active: #777; + --input-border-select: #222; + --input-border-select-hover: #AAA; + --input-border-select-active: #3ea2ff; + + --input-bg-multi: rgba(30, 30, 30, 0.3); + --input-bg-multi-hover: rgba(200, 200, 200, 0.3); +} \ No newline at end of file -- cgit v1.2.3