summaryrefslogtreecommitdiff
path: root/webcards/styles/client
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/styles/client')
-rw-r--r--webcards/styles/client/base.css122
-rw-r--r--webcards/styles/client/card.css48
-rw-r--r--webcards/styles/client/desktop.css2
-rw-r--r--webcards/styles/client/mobile.css4
4 files changed, 162 insertions, 14 deletions
diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index 52c2722..ba06e3c 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -13,6 +13,8 @@ html, body {
background-color: var(--main-bg);
color: var(--main-color);
+
+ overflow: hidden;
}
/* Topbar rules */
@@ -140,6 +142,9 @@ div.game {
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 {
@@ -162,7 +167,7 @@ div.settings {
animation-duration: 0.8s;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: var(--table-bg);
overflow: hidden;
}
@@ -195,3 +200,118 @@ div.settings {
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
index 2f52255..de49175 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -125,43 +125,67 @@ card[drag=true]
/* Deck */
deck {
+ --ccount: 0;
+
position: absolute;
- min-width: 160px;
- min-height: 240px;
+ width: 166px;
+ height: 250px;
top: 0;
left: 0;
overflow: visible;
- display: flex;
- justify-content: center;
- align-content: center;
border-radius: 10px;
transition-duration: 0.2s;
+
+ border: 3px solid var(--deck-shadow);
+ box-sizing: border-box;
}
deck:hover {
- box-shadow: 0 0 5px var(--deck-hover);
+ border: 3px solid var(--deck-hover);
+}
+
+/* Deck modes */
+
+deck[mode="stack"] > card {
+ transform: translate(5px, calc(var(--cpos) * 3px + 7px));
}
-deck > card {
- transform: translate(0, calc(var(--cpos) * 3px ));
+deck[mode="stack"] {
+ height: calc(var(--ccount) * 3px + 250px);
}
deck[mode="strip-hl"] > card {
- transform: translate(calc(var(--cpos) * -75px), 0);
+ 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), 0);
+ 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(0, calc(var(--cpos) * -115px ));
+ 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(0, calc(var(--cpos) * 115px ));
+ 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
index f072a71..10caa15 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/styles/client/desktop.css
@@ -28,6 +28,7 @@
div.lobby {
min-width: 70vw;
min-height: 70vh;
+ max-height: 70vh;
display: flex;
text-align: center;
@@ -145,5 +146,4 @@
/*
Chat
*/
-
}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 1afc4fb..ed2e19d 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -10,6 +10,10 @@
display: none;
}
+ div.chat {
+ display: none;
+ }
+
/*
TopBar for mobile
*/