summaryrefslogtreecommitdiff
path: root/webcards/styles/client
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/styles/client')
-rw-r--r--webcards/styles/client/base.css317
-rw-r--r--webcards/styles/client/card.css191
-rw-r--r--webcards/styles/client/desktop.css149
-rw-r--r--webcards/styles/client/mobile.css85
-rw-r--r--webcards/styles/client/tablet.css45
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;
- }
-}