summaryrefslogtreecommitdiff
path: root/styles/client
diff options
context:
space:
mode:
Diffstat (limited to 'styles/client')
-rw-r--r--styles/client/base.css275
-rw-r--r--styles/client/card.css191
-rw-r--r--styles/client/desktop.css41
-rw-r--r--styles/client/mobile.css8
-rw-r--r--styles/client/tablet.css4
5 files changed, 475 insertions, 44 deletions
diff --git a/styles/client/base.css b/styles/client/base.css
index cae61f6..889d7bf 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -11,12 +11,19 @@ html, body {
display: block;
+ background-color: var(--main-bg);
+ color: var(--main-color);
+
+ overflow: hidden;
}
-.topbar {
+/* Topbar rules */
+
+.topbar
+{
position: fixed;
- background-color: white;
+ background-color: var(--gui-bg-main);
top: 0;
left: 0;
@@ -29,66 +36,95 @@ html, body {
z-index: 1;
}
-.top-buttons {
+.top-buttons
+{
display: flex;
}
-button, input[type="button"] {
- display: inline-block;
- border: none;
- background-color: dodgerblue;
- padding: 10px;
- font-size: medium;
- border-radius: 5px;
- box-sizing: border-box;
-}
-
-button.top-button {
+button.top-button
+{
border-radius: 0;
- background-color: white;
+ background-color: var(--top-bg-button);
+ color: var(--top-color-button);
flex: 1;
- border-left: 1px solid black;
- border-right: 1px solid black;
+ 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);
}
-.top-buttons > button:first-child {
+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 {
+.top-buttons > button:last-child
+{
border-right: none;
}
-div.new-game {
+div.new-game
+{
flex: 1;
flex-grow: 1;
- border-top: 2px solid black;
+ border-top: 2px solid var(--top-border);
}
-div.mobile-settings {
+div.mobile-settings
+{
flex: 1;
flex-grow: 1;
- border-top: 2px solid black;
+ border-top: 2px solid var(--top-border);
}
-div.topbar > div.status {
+div.topbar > div.status
+{
height: 5px;
flex-basis: auto;
+
+ background-color: var(--server-bg-loading);
}
-div.stats {
+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 {
+div.stats > div
+{
flex: 1;
display: flex;
}
-div.stats > div > span {
+div.stats > div > span
+{
flex-basis: content;
display: inline-block;
}
@@ -100,13 +136,194 @@ div.stats > div > span:last-child {
}
div.game {
- background-color: white;
+ background-color: var(--gui-bg-game);
+ color: var(--gui-color-game);
border-radius: 5px;
- box-shadow: lightgray 3px 3px 2px;
+ 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[active="true"] {
+ background-color: var(--chat-bg-active);
+}
+
+div.chat-select > button[active="true"]:hover {
+ background-color: var(--chat-bg-active-hover);
+}
+
+div.chat-select > button[active="true"]:active {
+ background-color: var(--chat-bg-active-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/styles/client/card.css b/styles/client/card.css
new file mode 100644
index 0000000..de49175
--- /dev/null
+++ b/styles/client/card.css
@@ -0,0 +1,191 @@
+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/styles/client/desktop.css b/styles/client/desktop.css
index 46dc83d..10caa15 100644
--- a/styles/client/desktop.css
+++ b/styles/client/desktop.css
@@ -10,14 +10,6 @@
TopBar rules
*/
- button.top-button {
- transition-duration: 0.2s;
- }
-
- button.top-button:hover {
- background-color: #ddd;
- }
-
button#newgame:before{
content: "Create Game";
}
@@ -36,6 +28,7 @@
div.lobby {
min-width: 70vw;
min-height: 70vh;
+ max-height: 70vh;
display: flex;
text-align: center;
@@ -60,6 +53,24 @@
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 {
@@ -67,7 +78,7 @@
padding: 10px;
border-radius: 10px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
flex: 1;
}
@@ -100,15 +111,15 @@
overflow-x: hidden;
padding: 10px;
border-radius: 10px;
- background-color: #ddd;
- flex: 4;
+ background-color: var(--gui-bg-main);
+ flex: 2;
- border: 5px solid #ddd;
+ border: 5px solid var(--gui-bg-main);
}
div.stats, div.settings {
border-radius: 10px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
box-sizing: border-box;
@@ -131,4 +142,8 @@
/*
Table rules
*/
+
+ /*
+ Chat
+ */
}
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
index 4659ce6..ed2e19d 100644
--- a/styles/client/mobile.css
+++ b/styles/client/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 599px) or (max-height: 500px) {
+@media (max-width: 599px), (max-height: 500px) {
/*
Hide stuff
*/
@@ -10,6 +10,10 @@
display: none;
}
+ div.chat {
+ display: none;
+ }
+
/*
TopBar for mobile
*/
@@ -69,7 +73,7 @@
overflow-x: hidden;
overflow-y: auto;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
padding: 5px;
box-sizing: border-box;
diff --git a/styles/client/tablet.css b/styles/client/tablet.css
index 37750f8..b9b5bd1 100644
--- a/styles/client/tablet.css
+++ b/styles/client/tablet.css
@@ -38,4 +38,8 @@
margin-top: 0px;
margin-left: 10px;
}
+
+ div.games {
+ flex: 4;
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-07 14:40:04 +0000