From 9681347b8e9f6059c3f5f02528e0893bef5acca4 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 18 Sep 2020 12:22:26 -0400 Subject: Move webcards to seperate repo --- webcards/styles/client/base.css | 317 ------------------------ webcards/styles/client/card.css | 191 --------------- webcards/styles/client/desktop.css | 149 ------------ webcards/styles/client/mobile.css | 85 ------- webcards/styles/client/tablet.css | 45 ---- webcards/styles/home/base.css | 108 --------- webcards/styles/home/desktop.css | 6 - webcards/styles/home/mobile.css | 6 - webcards/styles/icofont.css | 25 -- webcards/styles/input.css | 425 --------------------------------- webcards/styles/themes/colors-base.css | 94 -------- webcards/styles/themes/colors-dark.css | 103 -------- 12 files changed, 1554 deletions(-) delete mode 100644 webcards/styles/client/base.css delete mode 100644 webcards/styles/client/card.css delete mode 100644 webcards/styles/client/desktop.css delete mode 100644 webcards/styles/client/mobile.css delete mode 100644 webcards/styles/client/tablet.css delete mode 100644 webcards/styles/home/base.css delete mode 100644 webcards/styles/home/desktop.css delete mode 100644 webcards/styles/home/mobile.css delete mode 100644 webcards/styles/icofont.css delete mode 100644 webcards/styles/input.css delete mode 100644 webcards/styles/themes/colors-base.css delete mode 100644 webcards/styles/themes/colors-dark.css (limited to 'webcards/styles') diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css deleted file mode 100644 index ba06e3c..0000000 --- a/webcards/styles/client/base.css +++ /dev/null @@ -1,317 +0,0 @@ -* { - font-family: 'Montserrat', sans-serif; -} - -html, body { - margin: 0; - padding: 0; - - min-width: 100vw; - min-height: 100vh; - - display: block; - - background-color: var(--main-bg); - color: var(--main-color); - - overflow: hidden; -} - -/* Topbar rules */ - -.topbar -{ - position: fixed; - - background-color: var(--gui-bg-main); - - top: 0; - left: 0; - - display: flex; - - flex-direction: column; - - width: 100vw; - z-index: 1; -} - -.top-buttons -{ - display: flex; -} - -button.top-button -{ - 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); - - transition-duration: 0.2s; -} - -button.top-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); -} - -.top-buttons > button:first-child -{ - border-left: none; -} - -.top-buttons > button:last-child -{ - border-right: none; -} - -div.new-game -{ - 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); -} - -div.topbar > div.status -{ - height: 5px; - flex-basis: auto; - - background-color: var(--server-bg-loading); -} - -div.topbar > div.status[s=loading] { - background-color: var(--server-bg-loading); -} - -div.topbar > div.status[s=ok] { - background-color: var(--server-bg-ok); -} - -div.topbar > div.status[s=closed] { - background-color: var(--server-bg-closed); -} - -/* Content rules */ - -div.stats -{ - padding: 5px; - display: flex; - flex-direction: column; -} - -div.stats > div -{ - flex: 1; - display: flex; -} - -div.stats > div > span -{ - flex-basis: content; - display: inline-block; -} - -div.stats > div > span:last-child { - 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; - - 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: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/webcards/styles/client/card.css b/webcards/styles/client/card.css deleted file mode 100644 index de49175..0000000 --- a/webcards/styles/client/card.css +++ /dev/null @@ -1,191 +0,0 @@ -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/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css deleted file mode 100644 index 10caa15..0000000 --- a/webcards/styles/client/desktop.css +++ /dev/null @@ -1,149 +0,0 @@ -@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 - */ -} diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css deleted file mode 100644 index ed2e19d..0000000 --- a/webcards/styles/client/mobile.css +++ /dev/null @@ -1,85 +0,0 @@ -@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%; - } -} diff --git a/webcards/styles/client/tablet.css b/webcards/styles/client/tablet.css deleted file mode 100644 index b9b5bd1..0000000 --- a/webcards/styles/client/tablet.css +++ /dev/null @@ -1,45 +0,0 @@ -@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; - } -} diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css deleted file mode 100644 index a082ec2..0000000 --- a/webcards/styles/home/base.css +++ /dev/null @@ -1,108 +0,0 @@ -* { - font-family: 'Montserrat', sans-serif; -} - -html, body { - margin: 0; - padding: 0; - - min-width: 100vw; - min-height: 100vh; - - display: block; -} - -body { - display: flex; - - align-items: center; - justify-content: center; - - background-color: var(--main-bg); -} - -div.content { - padding: 20px; - - background-color: var(--gui-bg-main); - border-radius: 10px; - - display: flex; - text-align: center; - flex-direction: column; - - align-items: center; -} - -a, button { - font-size: 1em; - display: block; - color: white; - box-sizing: border-box; - - border-radius: 5px; - border: none; - padding: 5px; - - 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; -} - -div.prev > button:active { - background-color: #9c1200; -} \ No newline at end of file diff --git a/webcards/styles/home/desktop.css b/webcards/styles/home/desktop.css deleted file mode 100644 index 0edda76..0000000 --- a/webcards/styles/home/desktop.css +++ /dev/null @@ -1,6 +0,0 @@ -@media (min-width: 600px) { - div.content > div { - display: flex; - flex-direction: row; - } -} \ No newline at end of file diff --git a/webcards/styles/home/mobile.css b/webcards/styles/home/mobile.css deleted file mode 100644 index 4e469de..0000000 --- a/webcards/styles/home/mobile.css +++ /dev/null @@ -1,6 +0,0 @@ -@media (max-width: 599px) { - div.content > div { - display: flex; - flex-direction: column; - } -} \ No newline at end of file diff --git a/webcards/styles/icofont.css b/webcards/styles/icofont.css deleted file mode 100644 index 3bc40e5..0000000 --- a/webcards/styles/icofont.css +++ /dev/null @@ -1,25 +0,0 @@ -@font-face -{ - 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; -} \ No newline at end of file diff --git a/webcards/styles/input.css b/webcards/styles/input.css deleted file mode 100644 index 42656a0..0000000 --- a/webcards/styles/input.css +++ /dev/null @@ -1,425 +0,0 @@ -/* 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/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css deleted file mode 100644 index 62665a2..0000000 --- a/webcards/styles/themes/colors-base.css +++ /dev/null @@ -1,94 +0,0 @@ -* { - /* 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); -} \ No newline at end of file diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css deleted file mode 100644 index f630ac0..0000000 --- a/webcards/styles/themes/colors-dark.css +++ /dev/null @@ -1,103 +0,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