From dbaf69557c0d6e648120b068fec1920b9391a24a Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 18 Sep 2020 12:19:44 -0400 Subject: Update from local repo --- styles/client/base.css | 275 ++++++++++++++++++++++++--- styles/client/card.css | 191 +++++++++++++++++++ styles/client/desktop.css | 41 ++-- styles/client/mobile.css | 8 +- styles/client/tablet.css | 4 + styles/home/base.css | 67 ++++++- styles/input.css | 425 ++++++++++++++++++++++++++++++++++++++++++ styles/themes/colors-base.css | 98 ++++++++++ styles/themes/colors-dark.css | 103 ++++++++++ 9 files changed, 1162 insertions(+), 50 deletions(-) create mode 100644 styles/client/card.css create mode 100644 styles/input.css create mode 100644 styles/themes/colors-base.css create mode 100644 styles/themes/colors-dark.css (limited to 'styles') diff --git a/styles/client/base.css b/styles/client/base.css index cae61f6..889d7bf 100644 --- a/styles/client/base.css +++ b/styles/client/base.css @@ -11,12 +11,19 @@ html, body { display: block; + background-color: var(--main-bg); + color: var(--main-color); + + overflow: hidden; } -.topbar { +/* Topbar rules */ + +.topbar +{ position: fixed; - background-color: white; + background-color: var(--gui-bg-main); top: 0; left: 0; @@ -29,66 +36,95 @@ 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; + 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: var(--top-bg-button-hover); + color: var(--top-color-button-hover); } -.top-buttons > button:first-child { +button.top-button:active { + background-color: var(--top-bg-button-active); + color: var(--top-color-button-active); +} + +.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; + border-top: 2px solid var(--top-border); } -div.mobile-settings { +div.mobile-settings +{ flex: 1; flex-grow: 1; - border-top: 2px solid black; + border-top: 2px solid var(--top-border); } -div.topbar > div.status { +div.topbar > div.status +{ height: 5px; flex-basis: auto; + + background-color: var(--server-bg-loading); } -div.stats { +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 */ + +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; } @@ -100,13 +136,194 @@ 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; + padding: 5px; + + text-align: left; } div.game:last-child { margin-bottom: none; +} + +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: var(--table-bg); + + overflow: hidden; +} + +.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; + } +} + +/* 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[active="true"] { + background-color: var(--chat-bg-active); +} + +div.chat-select > button[active="true"]:hover { + background-color: var(--chat-bg-active-hover); +} + +div.chat-select > button[active="true"]:active { + background-color: var(--chat-bg-active-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/styles/client/card.css b/styles/client/card.css new file mode 100644 index 0000000..de49175 --- /dev/null +++ b/styles/client/card.css @@ -0,0 +1,191 @@ +card +{ + position: absolute; + display: block; + width: 150px; + 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 var(--card-hover); +} + +card > * { + pointer-events: none; +} + +carea +{ + padding-left: 2px; + padding-right: 2px; + position: absolute; + display: flex; + vertical-align: middle; + width: 100%; + box-sizing: border-box; +} + +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; +} + +/* Deck */ + +deck { + --ccount: 0; + + position: absolute; + width: 166px; + height: 250px; + + top: 0; + left: 0; + + overflow: visible; + + border-radius: 10px; + + transition-duration: 0.2s; + + border: 3px solid var(--deck-shadow); + box-sizing: border-box; +} + +deck:hover { + border: 3px solid var(--deck-hover); +} + +/* Deck modes */ + +deck[mode="stack"] > card { + transform: translate(5px, calc(var(--cpos) * 3px + 7px)); +} + +deck[mode="stack"] { + height: calc(var(--ccount) * 3px + 250px); +} + +deck[mode="strip-hl"] > card { + 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 + 5px), 7px); +} + +deck[mode="strip-hr"] { + width: calc(var(--ccount) * 75px + 160px); +} + +deck[mode="strip-vu"] > card { + 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(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/styles/client/desktop.css b/styles/client/desktop.css index 46dc83d..10caa15 100644 --- a/styles/client/desktop.css +++ b/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"; } @@ -36,6 +28,7 @@ div.lobby { min-width: 70vw; min-height: 70vh; + max-height: 70vh; display: flex; text-align: center; @@ -60,6 +53,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 { @@ -67,7 +78,7 @@ padding: 10px; border-radius: 10px; - background-color: #ddd; + background-color: var(--gui-bg-main); flex: 1; } @@ -100,15 +111,15 @@ overflow-x: hidden; padding: 10px; border-radius: 10px; - background-color: #ddd; - flex: 4; + 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; @@ -131,4 +142,8 @@ /* Table rules */ + + /* + Chat + */ } diff --git a/styles/client/mobile.css b/styles/client/mobile.css index 4659ce6..ed2e19d 100644 --- a/styles/client/mobile.css +++ b/styles/client/mobile.css @@ -1,4 +1,4 @@ -@media (max-width: 599px) or (max-height: 500px) { +@media (max-width: 599px), (max-height: 500px) { /* Hide stuff */ @@ -10,6 +10,10 @@ display: none; } + div.chat { + display: none; + } + /* TopBar for mobile */ @@ -69,7 +73,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/styles/client/tablet.css b/styles/client/tablet.css index 37750f8..b9b5bd1 100644 --- a/styles/client/tablet.css +++ b/styles/client/tablet.css @@ -38,4 +38,8 @@ margin-top: 0px; margin-left: 10px; } + + div.games { + flex: 4; + } } diff --git a/styles/home/base.css b/styles/home/base.css index 2ef3693..a082ec2 100644 --- a/styles/home/base.css +++ b/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; @@ -33,21 +34,75 @@ div.content { align-items: center; } -a { - font-size: 24px; +a, button { + font-size: 1em; display: block; color: white; + box-sizing: border-box; border-radius: 5px; + border: none; padding: 5px; - background-color: dodgerblue; + background-color: #0084ff; transition-duration: 0.2s; 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; +} - max-width: 100px; +div.prev > button:active { + background-color: #9c1200; } \ No newline at end of file diff --git a/styles/input.css b/styles/input.css new file mode 100644 index 0000000..42656a0 --- /dev/null +++ b/styles/input.css @@ -0,0 +1,425 @@ +/* Begin Input CSS */ + +/* All input */ + +input, select +{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + margin: 5px; + + display: block; + + box-sizing: border-box; +} + +/* Button input */ + +input[type=button], input[type=submit], button, a +{ + padding: 10px; + + border: none; + border-radius: 5px; + + background-color: var(--input-bg-button); + color: var(--input-color-button); + + font-size: medium; + + transition-duration: 0.2s; + + cursor: pointer; +} + +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, a:active +{ + 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 var(--input-border-text); + border-radius: 3px; + padding: 5px; + 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: var(--input-border-text-hover); +} + +input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus +{ + border-color: var(--input-border-text-active); +} + +/* Radial input */ + +input[type=radio] +{ + width: 20px; + height: 20px; + + border: 3px solid var(--input-border-bool); + border-radius: 50%; + + transition-duration: 0.2s; + + background-color: var(--input-bg-bool); + + cursor: pointer; + + display: inline-block; + vertical-align: middle; +} + +input[type=radio]:checked, input[type=radio]:hover{ + border-width: 6px; +} + +input[type=radio]:checked +{ + background-color: var(--input-bg-bool-true); + border-color: var(--input-border-bool-true); +} + +input[type=radio]:hover +{ + background-color: var(--input-bg-bool-hover); + border-color: var(--input-border-bool-hover); +} + +input[type=radio]:active +{ + background-color: var(--input-bg-bool-active); + border-color: var(--input-border-bool-active); +} + +/* Checkbox input */ + +input[type=checkbox] +{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + display: inline-block; + vertical-align: middle; + + width: 20px; + height: 20px; + + border: 3px solid var(--input-border-bool); + + border-radius: 2px; + + transition-duration: 0.2s; + + background-color: var(--input-bg-bool); + + cursor: pointer; +} + +input[type=checkbox]:checked +{ + border-width: 10px; + background-color: var(--input-border-bool-true); + border-color: var(--input-border-bool-true); +} + +input[type=checkbox]:hover +{ + background-color: var(--input-bg-bool-hover); + border-color: var(--input-border-bool-hover); +} + +input[type=checkbox]:active +{ + background-color: var(--input-bg-bool-active); + border-color: var(--input-border-bool-active); +} + +input[type=checkbox]::after +{ + height: 15px; + width: 10px; + + box-sizing: border-box; + + position: relative; + + display: block; + + border-color: var(--input-bg-bool-true); + border-style: solid; + border-width: 0px 0px 0px 0px; + + top: calc(50% - 10px); + left: calc(50% - 5px); + + transform-origin: center; + transform: rotate(45deg); + + content: ''; +} + +input[type=checkbox]:checked::after +{ + border-width: 0px 3px 3px 0px; +} + +/* Color input */ + +input[type=color] +{ + display: inline-block; + + vertical-align: middle; + + height: 20px; + width: 20px; + + margin: 0; + padding: 0; + + border: 0; + + cursor: pointer; +} + +/* File input */ + +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 */ + +*.input-container { + margin: 5px; + padding: 5px; + + border-radius: 3px; + + display: inline-block; +} + +/* Color container */ + +div.input-container[type=color] +{ + text-align: center; + + background-color: var(--input-bg-button); + color: var(--input-color-button); + + transition-duration: 0.2s; + + cursor: pointer; + + width: max-content; +} + +div.input-container[type=color]::after +{ + display: inline; + + vertical-align: middle; + + content: ' Pick a color'; +} + +div.input-container[type=color]:hover +{ + background-color: var(--input-bg-button-hover); +} + +div.input-container[type=color]:active +{ + background-color: var(--input-bg-button-active); +} + +/* File input container */ + +div.input-container[type=file] +{ + background-color: var(--input-bg-button); + color: var(--input-color-button); + + transition-duration: 0.2s; + + cursor: pointer; + + text-align: center; + + width: max-content; + height: max-content; +} + +div.input-container[type=file]:hover +{ + background-color: var(--input-bg-button-hover); +} + +div.input-container[type=file]:active +{ + background-color: var(--input-bg-button-active); +} + +div.input-container[type=file]::after +{ + display: inline; + + vertical-align: middle; + + content: attr(data-files); +} + +/* Radio input container */ + +div.input-container[type=radio]::before +{ + display: block; + content: 'Select one'; + transition-duration: 0.2s; +} + +div.input-container[type=radio] +{ + 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/styles/themes/colors-base.css b/styles/themes/colors-base.css new file mode 100644 index 0000000..56b06d8 --- /dev/null +++ b/styles/themes/colors-base.css @@ -0,0 +1,98 @@ +* { + /* 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: #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; + --card-bg: white; + --card-border: #bbb; + --card-hover: #0f0; + + --deck-shadow: #2696ff; + --deck-hover: #73bbff; + + /* 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); + + /* 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); + + --chat-bg-active: #0084ff; + --chat-bg-active-hover: #3ea2ff; + --chat-bg-active-active:#0056a7; +} \ No newline at end of file diff --git a/styles/themes/colors-dark.css b/styles/themes/colors-dark.css new file mode 100644 index 0000000..f630ac0 --- /dev/null +++ b/styles/themes/colors-dark.css @@ -0,0 +1,103 @@ +* { + /* 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: #444; + + --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 */ + --table-bg: rgb(20, 110, 50); + + /* Card defaults */ + --card-color: black; + --card-bg: white; + --card-border: #bbb; + --card-hover: #0f0; + + --deck-shadow: #2696ff; + --deck-hover: #3ea2ff; + + /* 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); + + /* 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