diff options
author | Kyle Gunger <corechg@gmail.com> | 2020-09-18 12:22:26 -0400 |
---|---|---|
committer | Kyle Gunger <corechg@gmail.com> | 2020-09-18 12:22:26 -0400 |
commit | 9681347b8e9f6059c3f5f02528e0893bef5acca4 (patch) | |
tree | 16e5dff45804d13abeda17041668eff0485483c7 /webcards/styles/client | |
parent | 2ce432034eb35f763182de03fb7b42d2a07afc4b (diff) |
Move webcards to seperate repo
Diffstat (limited to 'webcards/styles/client')
-rw-r--r-- | webcards/styles/client/base.css | 317 | ||||
-rw-r--r-- | webcards/styles/client/card.css | 191 | ||||
-rw-r--r-- | webcards/styles/client/desktop.css | 149 | ||||
-rw-r--r-- | webcards/styles/client/mobile.css | 85 | ||||
-rw-r--r-- | webcards/styles/client/tablet.css | 45 |
5 files changed, 0 insertions, 787 deletions
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; - } -} |