From b8c91f08adc7bdb0095fb61a59bc03f0d568f478 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sat, 16 Oct 2021 17:12:32 -0400 Subject: [Formatting] Tabs instead of spaces --- styles/client/base.css | 298 +++++++++++++++++++++--------------------- styles/client/card.css | 164 +++++++++++------------ styles/client/desktop.css | 294 ++++++++++++++++++++--------------------- styles/client/mobile.css | 166 +++++++++++------------ styles/client/tablet.css | 86 ++++++------ styles/home/base.css | 102 +++++++-------- styles/home/desktop.css | 8 +- styles/home/mobile.css | 18 +-- styles/icofont.css | 38 +++--- styles/input.css | 88 ++++++------- styles/themes/colors-base.css | 192 +++++++++++++-------------- styles/themes/colors-dark.css | 202 ++++++++++++++-------------- 12 files changed, 828 insertions(+), 828 deletions(-) (limited to 'styles') diff --git a/styles/client/base.css b/styles/client/base.css index a0178fd..60631ce 100644 --- a/styles/client/base.css +++ b/styles/client/base.css @@ -1,348 +1,348 @@ * { - font-family: 'Montserrat', sans-serif; + font-family: 'Montserrat', sans-serif; transition-duration: 0.2s; } html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; - min-width: 100vw; - min-height: 100vh; + min-width: 100vw; + min-height: 100vh; - display: block; + display: block; - background-color: var(--main-bg); - color: var(--main-color); + background-color: var(--main-bg); + color: var(--main-color); - overflow: hidden; + overflow: hidden; } /* Topbar rules */ .topbar { - position: fixed; + position: fixed; - background-color: var(--gui-bg-main); + background-color: var(--gui-bg-main); - top: 0; - left: 0; + top: 0; + left: 0; - display: flex; + display: flex; - flex-direction: column; + flex-direction: column; - width: 100vw; - z-index: 1; + width: 100vw; + z-index: 1; } .top-buttons { - display: flex; + display: flex; } button.top-button { - border-radius: 0; - background-color: var(--top-bg-button); - color: var(--top-color-button); - flex: 1; + border-radius: 0; + background-color: var(--top-bg-button); + color: var(--top-color-button); + flex: 1; - border-left: 1px solid var(--top-border); - border-right: 1px solid var(--top-border); + border-left: 1px solid var(--top-border); + border-right: 1px solid var(--top-border); - transition-duration: 0.2s; + transition-duration: 0.2s; } button.top-button:hover { - background-color: var(--top-bg-button-hover); - color: var(--top-color-button-hover); + 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); + background-color: var(--top-bg-button-active); + color: var(--top-color-button-active); } .top-buttons > button:first-child { - border-left: none; + border-left: none; } .top-buttons > button:last-child { - border-right: none; + border-right: none; } div.new-game { - flex: 1; - flex-grow: 1; - border-top: 2px solid var(--top-border); + flex: 1; + flex-grow: 1; + border-top: 2px solid var(--top-border); } div.mobile-settings { - flex: 1; - flex-grow: 1; - border-top: 2px solid var(--top-border); + flex: 1; + flex-grow: 1; + border-top: 2px solid var(--top-border); } div.topbar > div.status { - height: 5px; - flex-basis: auto; + height: 5px; + flex-basis: auto; - background-color: var(--server-bg-loading); + background-color: var(--server-bg-loading); } div.topbar > div.status[s=loading] { - background-color: var(--server-bg-loading); + background-color: var(--server-bg-loading); } div.topbar > div.status[s=ok] { - background-color: var(--server-bg-ok); + background-color: var(--server-bg-ok); } div.topbar > div.status[s=closed] { - background-color: var(--server-bg-closed); + background-color: var(--server-bg-closed); } /* Content rules */ div.stats { - padding: 5px; - display: flex; - flex-direction: column; + padding: 5px; + display: flex; + flex-direction: column; } div.stats > div { - flex: 1; - display: flex; + flex: 1; + display: flex; } div.stats > div > span { - flex-basis: content; - display: inline-block; + flex-basis: content; + display: inline-block; } div.stats > div > span:last-child { - text-align: right; - flex: 1; - display: inline-block; + text-align: right; + flex: 1; + display: inline-block; } div.game { - background-color: var(--gui-bg-game); - color: var(--gui-color-game); - border-radius: 5px; - box-shadow: var(--gui-shadow-game) 3px 3px 2px; - box-sizing: border-box; - margin-bottom: 10px; - padding: 5px; + background-color: var(--gui-bg-game); + color: var(--gui-color-game); + border-radius: 5px; + box-shadow: var(--gui-shadow-game) 3px 3px 2px; + box-sizing: border-box; + margin-bottom: 10px; + padding: 5px; - display: block; - position: relative; + display: block; + position: relative; - text-align: left; + text-align: left; } div.game:last-child { - margin-bottom: none; + margin-bottom: none; } div.settings { - display:flex; - flex-direction: column; - padding: 5px; - overflow-y: auto; + display:flex; + flex-direction: column; + padding: 5px; + overflow-y: auto; } /* Table rules */ .table { - position: absolute; - z-index: 2; - width: 100vw; - height: 100vh; + position: absolute; + z-index: 2; + width: 100vw; + height: 100vh; - animation-duration: 0.8s; + animation-duration: 0.8s; - background-color: var(--table-bg); + background-color: var(--table-bg); - overflow: hidden; + 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; + 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; + animation-direction: reverse; } .table[state=closed] { - transform: translate(0, -100vh); - opacity: 0; + transform: translate(0, -100vh); + opacity: 0; } @keyframes slide-in { - from { - transform: translate(0, -100vh); - opacity: 0; - } + from { + transform: translate(0, -100vh); + opacity: 0; + } - to { - transform: translate(0, 0); - opacity: 1; - } + to { + transform: translate(0, 0); + opacity: 1; + } } /* Chat */ div.chat { - border-top-left-radius: 10px; - background-color: var(--chat-bg); - color: var(--chat-color); + 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; + width: 50vw; + height: 50vh; + display: flex; + flex-direction: column; + position: absolute; + right: -50vw; - box-sizing: border-box; + box-sizing: border-box; - top: 50vh; + top: 50vh; - transition-duration: 0.2s; + transition-duration: 0.2s; - padding: 5px; + padding: 5px; - z-index: 4; + z-index: 4; } div.chat[show=true] { - right: 0; + right: 0; } button.toggle-chat { - position: absolute; - bottom: 5px; - left: -5px; - transform-origin: bottom left; - transform: rotate(-90deg); + position: absolute; + bottom: 5px; + left: -5px; + transform-origin: bottom left; + transform: rotate(-90deg); } div.chat > div { - box-sizing: border-box; - margin: 5px; + box-sizing: border-box; + margin: 5px; } div.chat-select, div.chat-input { - flex-basis: content; - display: flex; + 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); + 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; + flex: 1; - margin-right: 2px; - margin-left: 2px; + margin-right: 2px; + margin-left: 2px; } div.chat-select > button[active="false"] { - background-color: var(--chat-bg-inactive); + background-color: var(--chat-bg-inactive); } div.chat-select > button[active="false"]:hover { - background-color: var(--chat-bg-inactive-hover); + background-color: var(--chat-bg-inactive-hover); } div.chat-select > button[active="false"]:active { - background-color: var(--chat-bg-inactive-active); + background-color: var(--chat-bg-inactive-active); } div.chat-select > button[active="true"] { - background-color: var(--chat-bg-active); + background-color: var(--chat-bg-active); } div.chat-select > button[active="true"]:hover { - background-color: var(--chat-bg-active-hover); + background-color: var(--chat-bg-active-hover); } div.chat-select > button[active="true"]:active { - background-color: var(--chat-bg-active-active); + background-color: var(--chat-bg-active-active); } div.chat-select > button:first-child { - margin-left: 0; + margin-left: 0; } div.chat-select > button:last-child { - margin-right: 0; + margin-right: 0; } div.chat-input > input { - flex: 5; + flex: 5; - margin: 0; - margin-right: 5px; + margin: 0; + margin-right: 5px; - border-radius: 5px; + border-radius: 5px; - transition-duration: 0.2s; - border: none; + transition-duration: 0.2s; + border: none; - background-color: var(--chat-bg-input); + background-color: var(--chat-bg-input); } div.chat-input > input:hover { - background-color: var(--chat-bg-input-hover); + background-color: var(--chat-bg-input-hover); } div.chat-input > input:focus { - background-color: var(--chat-bg-input-active); + background-color: var(--chat-bg-input-active); } div.chat-input > button { - flex: 1; + flex: 1; } div.chat-text > div { - word-wrap: break-word; - word-break: break-all; + word-wrap: break-word; + word-break: break-all; } /* Game card element */ div.game > h2 { - margin: 0; + margin: 0; } button.join { - position: absolute; + position: absolute; - bottom: 5px; - right: 5px; + bottom: 5px; + right: 5px; } diff --git a/styles/client/card.css b/styles/client/card.css index 0ee8f6a..b19b17a 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -1,192 +1,192 @@ 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; - - z-index: 3; + 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; + + z-index: 3; } card:hover { - box-shadow: 0 0 10px var(--card-hover); + box-shadow: 0 0 10px var(--card-hover); - z-index: 4; + z-index: 4; } card > * { - pointer-events: none; + pointer-events: none; } carea { - padding-left: 2px; - padding-right: 2px; - position: absolute; - display: flex; - vertical-align: middle; - width: 100%; - box-sizing: border-box; + 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; + top: 0; + height: 8%; + text-align: center; } carea.topl { - width: 50%; - text-align: left; + width: 50%; + text-align: left; } carea.topr { - right: 0; - width: 50%; - text-align: right; + right: 0; + width: 50%; + text-align: right; } carea.mid { - top: 8%; - height: 84%; + top: 8%; + height: 84%; } carea.midt { - top: 8%; - height: 42%; + top: 8%; + height: 42%; } carea.midb { - top: 50%; - height: 42%; + top: 50%; + height: 42%; } carea.bot, carea.botl, carea.botr { - bottom: 0; - height: 8%; - text-align: center; + bottom: 0; + height: 8%; + text-align: center; } carea.botl { - width: 50%; - text-align: left; + width: 50%; + text-align: left; } carea.botr { - right: 0; - width: 50%; - text-align: right; + right: 0; + width: 50%; + text-align: right; } carea.all { - top: 0; - height: 100%; + top: 0; + height: 100%; } ctext { - display: inline-block; - flex: 1; - font-size: small; - height: auto; + display: inline-block; + flex: 1; + font-size: small; + height: auto; } cimage { - background-position: center center; - background-repeat: no-repeat; - background-size: contain; - flex: 1; + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + flex: 1; } card[drag=true] { - z-index: 3; + z-index: 3; } /* Deck */ deck { - --ccount: 0; + --ccount: 0; - position: absolute; - width: 166px; - height: 250px; + position: absolute; + width: 166px; + height: 250px; - top: calc(var(--y) * (100vh - 250px)); - left: calc(var(--x) * (100vw - 166px)); + top: calc(var(--y) * (100vh - 250px)); + left: calc(var(--x) * (100vw - 166px)); - overflow: visible; + overflow: visible; - border-radius: 10px; + border-radius: 10px; - transition-duration: 0.2s; + transition-duration: 0.2s; - border: 3px solid var(--deck-shadow); - box-sizing: border-box; + border: 3px solid var(--deck-shadow); + box-sizing: border-box; } deck:hover { - border: 3px solid var(--deck-hover); + border: 3px solid var(--deck-hover); } /* Deck modes */ deck[mode="stack"] > card { - transform: translate(5px, calc(var(--cpos) * 3px + 7px)); + transform: translate(5px, calc(var(--cpos) * 3px + 7px)); } deck[mode="stack"] { - height: calc(var(--ccount) * 3px + 250px); - top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px))); + height: calc(var(--ccount) * 3px + 250px); + top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px))); } deck[mode="strip-hl"] > card { - transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); + transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px); } deck[mode="strip-hr"] > card { - transform: translate(calc(var(--cpos) * 75px + 5px), 7px); + transform: translate(calc(var(--cpos) * 75px + 5px), 7px); } deck[mode="strip-hl"], deck[mode="strip-hr"] { - width: calc(var(--ccount) * 75px + 160px); - left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px))); + width: calc(var(--ccount) * 75px + 160px); + left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 160px))); } deck[mode="strip-vu"] > card { - transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); + transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px)); } deck[mode="strip-vd"] > card { - transform: translate(5px, calc(var(--cpos) * 115px + 7px)); + transform: translate(5px, calc(var(--cpos) * 115px + 7px)); } deck[mode="strip-vu"], deck[mode="strip-vd"] { - height: calc(var(--ccount) * 115px + 240px); - top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px))); + height: calc(var(--ccount) * 115px + 240px); + top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 240px))); } diff --git a/styles/client/desktop.css b/styles/client/desktop.css index 10caa15..410b516 100644 --- a/styles/client/desktop.css +++ b/styles/client/desktop.css @@ -1,149 +1,149 @@ @media (min-width: 600px) and (min-height: 501px) { - body { - display: flex; - - align-items: center; - justify-content: center; - } - - /* - TopBar rules - */ - - button#newgame:before{ - content: "Create Game"; - } - - button#settings { - display: none; - } - - button#reset:before{ - content: "Reset Connection"; - } - - /* - Lobby rules - */ - div.lobby { - min-width: 70vw; - min-height: 70vh; - max-height: 70vh; - - display: flex; - text-align: center; - flex-direction: column; - - align-items: center; - } - - div.server { - width: 100%; - display: flex; - flex-direction: row; - margin-bottom: 10px; - box-sizing: border-box; - } - - span.status { - box-sizing: border-box; - font-size: larger; - - margin-right: 10px; - 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 { - font-size: larger; - padding: 10px; - border-radius: 10px; - - background-color: var(--gui-bg-main); - - flex: 1; - } - - div.content { - min-width: 70vw; - min-height: 70vh; - - display: flex; - flex-direction: row; - - box-sizing: border-box; - } - - div.info { - display: flex; - text-align: center; - flex-direction: column; - - flex: 1; - - margin-left: 10px; - - box-sizing: border-box; - } - - div.games { - box-sizing: border-box; - overflow-y: auto; - overflow-x: hidden; - padding: 10px; - border-radius: 10px; - background-color: var(--gui-bg-main); - flex: 2; - - border: 5px solid var(--gui-bg-main); - } - - div.stats, div.settings { - border-radius: 10px; - background-color: var(--gui-bg-main); - - box-sizing: border-box; - - flex: 1; - - height: auto; - width: 100%; - - text-align: left; - } - - div.settings { - margin-top: 10px; - } - - div.game { - height: 20%; - } - - /* - Table rules - */ - - /* - Chat - */ + body { + display: flex; + + align-items: center; + justify-content: center; + } + + /* + TopBar rules + */ + + button#newgame:before{ + content: "Create Game"; + } + + button#settings { + display: none; + } + + button#reset:before{ + content: "Reset Connection"; + } + + /* + Lobby rules + */ + div.lobby { + min-width: 70vw; + min-height: 70vh; + max-height: 70vh; + + display: flex; + text-align: center; + flex-direction: column; + + align-items: center; + } + + div.server { + width: 100%; + display: flex; + flex-direction: row; + margin-bottom: 10px; + box-sizing: border-box; + } + + span.status { + box-sizing: border-box; + font-size: larger; + + margin-right: 10px; + 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 { + font-size: larger; + padding: 10px; + border-radius: 10px; + + background-color: var(--gui-bg-main); + + flex: 1; + } + + div.content { + min-width: 70vw; + min-height: 70vh; + + display: flex; + flex-direction: row; + + box-sizing: border-box; + } + + div.info { + display: flex; + text-align: center; + flex-direction: column; + + flex: 1; + + margin-left: 10px; + + box-sizing: border-box; + } + + div.games { + box-sizing: border-box; + overflow-y: auto; + overflow-x: hidden; + padding: 10px; + border-radius: 10px; + background-color: var(--gui-bg-main); + flex: 2; + + border: 5px solid var(--gui-bg-main); + } + + div.stats, div.settings { + border-radius: 10px; + background-color: var(--gui-bg-main); + + box-sizing: border-box; + + flex: 1; + + height: auto; + width: 100%; + + text-align: left; + } + + div.settings { + margin-top: 10px; + } + + div.game { + height: 20%; + } + + /* + Table rules + */ + + /* + Chat + */ } diff --git a/styles/client/mobile.css b/styles/client/mobile.css index ed2e19d..70e17dd 100644 --- a/styles/client/mobile.css +++ b/styles/client/mobile.css @@ -1,85 +1,85 @@ @media (max-width: 599px), (max-height: 500px) { - /* - Hide stuff - */ - div.server { - display: none; - } - - div.info { - display: none; - } - - div.chat { - display: none; - } - - /* - TopBar for mobile - */ - - div.topbar > div.status { - height: 10px; - } - - div.top-buttons { - height: 50px; - } - - button.top-button { - padding: 5px; - } - - button#reset:before, button#newgame:before, button#settings:before { - font-family: "IcoFont"; - font-size: xx-large; - } - - button#newgame:before{ - content: "\efc2"; - } - - button#settings { - display: inline-block; - } - - button#settings:before { - content: "\ef3a"; - } - - button#reset:before{ - content: "\efd1"; - } - - /* - Mobile lobby - */ - - div.lobby { - display: flex; - flex-direction: column; - height: 100vh; - } - - div.content { - margin-top: 60px; - box-sizing: border-box; - flex: 1; - } - - div.games { - height: 100%; - width: 100%; - overflow-x: hidden; - overflow-y: auto; - - background-color: var(--gui-bg-main); - padding: 5px; - box-sizing: border-box; - - } - - div.game { - height: 12.5%; - } + /* + Hide stuff + */ + div.server { + display: none; + } + + div.info { + display: none; + } + + div.chat { + display: none; + } + + /* + TopBar for mobile + */ + + div.topbar > div.status { + height: 10px; + } + + div.top-buttons { + height: 50px; + } + + button.top-button { + padding: 5px; + } + + button#reset:before, button#newgame:before, button#settings:before { + font-family: "IcoFont"; + font-size: xx-large; + } + + button#newgame:before{ + content: "\efc2"; + } + + button#settings { + display: inline-block; + } + + button#settings:before { + content: "\ef3a"; + } + + button#reset:before{ + content: "\efd1"; + } + + /* + Mobile lobby + */ + + div.lobby { + display: flex; + flex-direction: column; + height: 100vh; + } + + div.content { + margin-top: 60px; + box-sizing: border-box; + flex: 1; + } + + div.games { + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: auto; + + background-color: var(--gui-bg-main); + padding: 5px; + box-sizing: border-box; + + } + + div.game { + height: 12.5%; + } } diff --git a/styles/client/tablet.css b/styles/client/tablet.css index b9b5bd1..a4f135d 100644 --- a/styles/client/tablet.css +++ b/styles/client/tablet.css @@ -1,45 +1,45 @@ @media (min-width: 600px) and (orientation: portrait) { - body { - display: flex; - - align-items: center; - justify-content: center; - } - - div.lobby { - max-width: 500px; - - display: flex; - text-align: center; - flex-direction: column; - - align-items: center; - } - - div.content { - min-width: 70vw; - min-height: 70vh; - - display: flex; - flex-direction: column; - } - - div.info { - flex-direction: row; - margin-left: 0px; - margin-top: 10px; - } - - div.settings, div.stats { - width: auto; - } - - div.settings { - margin-top: 0px; - margin-left: 10px; - } - - div.games { - flex: 4; - } + body { + display: flex; + + align-items: center; + justify-content: center; + } + + div.lobby { + max-width: 500px; + + display: flex; + text-align: center; + flex-direction: column; + + align-items: center; + } + + div.content { + min-width: 70vw; + min-height: 70vh; + + display: flex; + flex-direction: column; + } + + div.info { + flex-direction: row; + margin-left: 0px; + margin-top: 10px; + } + + div.settings, div.stats { + width: auto; + } + + div.settings { + margin-top: 0px; + margin-left: 10px; + } + + div.games { + flex: 4; + } } diff --git a/styles/home/base.css b/styles/home/base.css index bfd7b46..8daae31 100644 --- a/styles/home/base.css +++ b/styles/home/base.css @@ -1,58 +1,58 @@ * { - font-family: 'Montserrat', sans-serif; + font-family: 'Montserrat', sans-serif; transition-duration: 0.2s; } html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; - min-width: 100vw; - min-height: 100vh; + min-width: 100vw; + min-height: 100vh; - display: block; + display: block; } body { - display: flex; + display: flex; - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; - background-color: var(--main-bg); + background-color: var(--main-bg); } div.content { - padding: 20px; + padding: 20px; - background-color: var(--gui-bg-main); + background-color: var(--gui-bg-main); color: var(--main-color); - border-radius: 10px; + border-radius: 10px; - display: flex; - text-align: center; - flex-direction: column; + display: flex; + text-align: center; + flex-direction: column; - align-items: center; + align-items: center; - width: min-content; + width: min-content; } a, button { - font-size: 1em; - display: block; - color: white; - box-sizing: border-box; + font-size: 1em; + display: block; + color: white; + box-sizing: border-box; - border-radius: 5px; - border: none; - padding: 5px; + border-radius: 5px; + border: none; + padding: 5px; - background-color: #0084ff; - - transition-duration: 0.2s; + background-color: #0084ff; - text-decoration: none; + transition-duration: 0.2s; + + text-decoration: none; margin: 5px; } @@ -60,53 +60,53 @@ a, button { div.content > div.prev { - width: 100%; - margin: 10px; + width: 100%; + margin: 10px; - display: block; + display: block; - padding: 0; + padding: 0; } div.prev > a{ - display: inline-block; - width: 80%; - margin: 0; - padding: 5px; - border-radius: 0; + display: inline-block; + width: 80%; + margin: 0; + padding: 5px; + border-radius: 0; - text-align: left; + text-align: left; } div.prev > a:first-of-type { - border-top-left-radius: 5px; + border-top-left-radius: 5px; } div.prev > a:last-of-type { - border-bottom-left-radius: 5px; + border-bottom-left-radius: 5px; } div.prev > button { - display: inline-block; - width: 20%; - margin: 0; - background-color: #ff1e00; - padding: 5px; - border-radius: 0; + 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; + border-top-right-radius: 5px; } div.prev > button:last-of-type { - border-bottom-right-radius: 5px; + border-bottom-right-radius: 5px; } div.prev > button:hover { - background-color: #ff5741; + background-color: #ff5741; } div.prev > button:active { - background-color: #9c1200; + background-color: #9c1200; } \ No newline at end of file diff --git a/styles/home/desktop.css b/styles/home/desktop.css index 64ca05f..9860f9a 100644 --- a/styles/home/desktop.css +++ b/styles/home/desktop.css @@ -1,6 +1,6 @@ @media (min-width: 900px) { - div.content > div { - display: flex; - flex-direction: row; - } + div.content > div { + display: flex; + flex-direction: row; + } } \ No newline at end of file diff --git a/styles/home/mobile.css b/styles/home/mobile.css index a57a988..1334ac1 100644 --- a/styles/home/mobile.css +++ b/styles/home/mobile.css @@ -1,12 +1,12 @@ @media (max-width: 899px) { - div.content > div { - display: flex; - flex-direction: column; - } + div.content > div { + display: flex; + flex-direction: column; + } - div.content { - border-radius: 0px; - width:100%; - height: 100%; - } + div.content { + border-radius: 0px; + width:100%; + height: 100%; + } } \ No newline at end of file diff --git a/styles/icofont.css b/styles/icofont.css index 3bc40e5..6e214a6 100644 --- a/styles/icofont.css +++ b/styles/icofont.css @@ -1,25 +1,25 @@ @font-face { - font-family: "IcoFont"; - font-weight: 400; - font-style: normal; - src: url("../fonts/icofont.woff2") format("woff2"), - url("../fonts/icofont.woff") format("woff"); + font-family: "IcoFont"; + font-weight: 400; + font-style: normal; + src: url("../fonts/icofont.woff2") format("woff2"), + url("../fonts/icofont.woff") format("woff"); } .icofont { - font-family: 'IcoFont' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - line-height: 1; - /* Better Font Rendering =========== */ - font-feature-settings: "liga"; - -webkit-font-feature-settings: "liga"; - -webkit-font-smoothing: antialiased; + font-family: 'IcoFont' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + line-height: 1; + /* Better Font Rendering =========== */ + font-feature-settings: "liga"; + -webkit-font-feature-settings: "liga"; + -webkit-font-smoothing: antialiased; } \ No newline at end of file diff --git a/styles/input.css b/styles/input.css index 8101ae2..0b56982 100644 --- a/styles/input.css +++ b/styles/input.css @@ -4,14 +4,14 @@ input, select { - -webkit-appearance: none; + -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 5px; - + display: block; - + box-sizing: border-box; } @@ -19,19 +19,19 @@ input, select input[type=button], input[type=submit], button, a { - padding: 10px; + padding: 10px; - border: none; - border-radius: 5px; + border: none; + border-radius: 5px; - background-color: var(--input-bg-button); + background-color: var(--input-bg-button); color: var(--input-color-button); - - font-size: medium; - transition-duration: 0.2s; + font-size: medium; - cursor: pointer; + transition-duration: 0.2s; + + cursor: pointer; } input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover @@ -72,14 +72,14 @@ 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; @@ -115,21 +115,21 @@ 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; } @@ -156,23 +156,23 @@ 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: ''; } @@ -186,17 +186,17 @@ input[type=checkbox]:checked::after input[type=color] { display: inline-block; - + vertical-align: middle; - + height: 20px; width: 20px; - + margin: 0; padding: 0; - + border: 0; - + cursor: pointer; } @@ -216,7 +216,7 @@ div.input-select display: block; position: absolute; z-index: 0; - + pointer-events: none; overflow-y: auto; @@ -286,23 +286,23 @@ div.input-container:focus > div.input-select > div[selected=true]:after 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'; } @@ -322,11 +322,11 @@ 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; @@ -346,9 +346,9 @@ div.input-container[type=file]:active div.input-container[type=file]::after { display: inline; - + vertical-align: middle; - + content: attr(data-files); } diff --git a/styles/themes/colors-base.css b/styles/themes/colors-base.css index 56b06d8..86e6483 100644 --- a/styles/themes/colors-base.css +++ b/styles/themes/colors-base.css @@ -1,98 +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; + /* 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 index f630ac0..e294889 100644 --- a/styles/themes/colors-dark.css +++ b/styles/themes/colors-dark.css @@ -1,103 +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); + /* 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