summaryrefslogtreecommitdiff
path: root/styles
diff options
context:
space:
mode:
authorKyle Gunger <kgunger12@gmail.com>2021-10-16 17:12:32 -0400
committerKyle Gunger <kgunger12@gmail.com>2021-10-16 17:12:32 -0400
commitb8c91f08adc7bdb0095fb61a59bc03f0d568f478 (patch)
tree1c9f39c2d2c2279593d2117ef64274b561981db6 /styles
parent8f71df8341224a0898984a9bc67005fdbea9ee30 (diff)
[Formatting] Tabs instead of spaces
Diffstat (limited to 'styles')
-rw-r--r--styles/client/base.css298
-rw-r--r--styles/client/card.css164
-rw-r--r--styles/client/desktop.css294
-rw-r--r--styles/client/mobile.css166
-rw-r--r--styles/client/tablet.css86
-rw-r--r--styles/home/base.css102
-rw-r--r--styles/home/desktop.css8
-rw-r--r--styles/home/mobile.css18
-rw-r--r--styles/icofont.css38
-rw-r--r--styles/input.css88
-rw-r--r--styles/themes/colors-base.css192
-rw-r--r--styles/themes/colors-dark.css202
12 files changed, 828 insertions, 828 deletions
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