summaryrefslogtreecommitdiff
path: root/webcards/styles/client
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-05-17 13:15:41 -0400
committerKyle Gunger <corechg@gmail.com>2020-05-17 13:15:41 -0400
commitb48f0adccb11619680a47cac5fa9c68f638bd489 (patch)
tree9e75612c21ae9944b354afa13e2e94834e020e9c /webcards/styles/client
parentc9e2eee382df60bc7a058b56c804258848477d67 (diff)
[WebCards] Update from my local repos
Diffstat (limited to 'webcards/styles/client')
-rw-r--r--webcards/styles/client/base.css51
-rw-r--r--webcards/styles/client/card.css49
-rw-r--r--webcards/styles/client/desktop.css31
-rw-r--r--webcards/styles/client/mobile.css2
4 files changed, 110 insertions, 23 deletions
diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index fc8e310..52c2722 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -11,6 +11,8 @@ html, body {
display: block;
+ background-color: var(--main-bg);
+ color: var(--main-color);
}
/* Topbar rules */
@@ -19,7 +21,7 @@ html, body {
{
position: fixed;
- background-color: white;
+ background-color: var(--gui-bg-main);
top: 0;
left: 0;
@@ -40,18 +42,24 @@ html, body {
button.top-button
{
border-radius: 0;
- background-color: white;
- color: black;
+ 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: #ddd;
+ 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
@@ -68,20 +76,34 @@ div.new-game
{
flex: 1;
flex-grow: 1;
- border-top: 2px solid black;
+ border-top: 2px solid var(--top-border);
}
div.mobile-settings
{
flex: 1;
flex-grow: 1;
- border-top: 2px solid black;
+ 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 */
@@ -112,9 +134,10 @@ 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;
}
@@ -140,9 +163,11 @@ div.settings {
animation-duration: 0.8s;
background-color: rgba(0, 0, 0, 0.5);
+
+ overflow: hidden;
}
-.table[state="open"] ,.table[state="close"]{
+.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;
@@ -150,11 +175,11 @@ div.settings {
animation-fill-mode: forwards;
}
-.table[state="close"] {
+.table[state=close] {
animation-direction: reverse;
}
-.table[state="closed"] {
+.table[state=closed] {
transform: translate(0, -100vh);
opacity: 0;
}
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
index 62b4054..01cdcc5 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -3,20 +3,22 @@ card
position: absolute;
display: block;
width: 150px;
- height: 225px;
- background-color: white;
- border: 6px double #bbb;
+ 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 #0f0;
+ box-shadow: 0 0 10px var(--card-hover);
}
carea
@@ -27,6 +29,7 @@ carea
display: flex;
vertical-align: middle;
width: 100%;
+ box-sizing: border-box;
}
carea.top, carea.topl, carea.topr
@@ -110,7 +113,43 @@ cimage
flex: 1;
}
-card[drag = "true"]
+card[drag=true]
{
z-index: 3;
}
+
+/* Deck */
+
+deck {
+ position: absolute;
+ width: 0;
+ height: 0;
+
+ top: 0;
+ left: 0;
+
+ overflow: visible;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+}
+
+deck > card {
+ transform: translate(-75px, calc(-115px + ( var(--cpos) * 3px )));
+}
+
+deck[mode="strip-hl"] > card {
+ transform: translate(calc(-75px - ( var(--cpos) * 75px )), -115px);
+}
+
+deck[mode="strip-hr"] > card {
+ transform: translate(calc(-75px + ( var(--cpos) * 75px )), -115px);
+}
+
+deck[mode="strip-vu"] > card {
+ transform: translate(-75px, calc(-115px - ( var(--cpos) * 115px )));
+}
+
+deck[mode="strip-vd"] > card {
+ transform: translate(-75px, calc(-115px + ( var(--cpos) * 115px )));
+}
diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
index 08e24fe..f072a71 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/styles/client/desktop.css
@@ -52,6 +52,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 {
@@ -59,7 +77,7 @@
padding: 10px;
border-radius: 10px;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
flex: 1;
}
@@ -92,15 +110,15 @@
overflow-x: hidden;
padding: 10px;
border-radius: 10px;
- background-color: #ddd;
+ 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;
@@ -123,4 +141,9 @@
/*
Table rules
*/
+
+ /*
+ Chat
+ */
+
}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 4659ce6..5770dde 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -69,7 +69,7 @@
overflow-x: hidden;
overflow-y: auto;
- background-color: #ddd;
+ background-color: var(--gui-bg-main);
padding: 5px;
box-sizing: border-box;