summaryrefslogtreecommitdiff
path: root/webcards/styles
diff options
context:
space:
mode:
authorKyle Gunger <corechg@gmail.com>2020-05-17 20:31:10 -0400
committerKyle Gunger <corechg@gmail.com>2020-05-17 20:31:10 -0400
commit20201f77b5cf5cbb1c70b1cc51c4108d620a3202 (patch)
tree30e2871b60ac12f5b3ac2df5a1176faf682ce3ac /webcards/styles
parentb48f0adccb11619680a47cac5fa9c68f638bd489 (diff)
[Webcards] styles and some fixes
+ Fixed draging transformed cards + Fixed mobile styles + Theme template complete
Diffstat (limited to 'webcards/styles')
-rw-r--r--webcards/styles/client/card.css26
-rw-r--r--webcards/styles/client/mobile.css2
-rw-r--r--webcards/styles/themes/colors-base.css2
-rw-r--r--webcards/styles/themes/colors-dark.css2
4 files changed, 24 insertions, 8 deletions
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
index 01cdcc5..2f52255 100644
--- a/webcards/styles/client/card.css
+++ b/webcards/styles/client/card.css
@@ -21,6 +21,10 @@ card:hover
box-shadow: 0 0 10px var(--card-hover);
}
+card > * {
+ pointer-events: none;
+}
+
carea
{
padding-left: 2px;
@@ -122,8 +126,8 @@ card[drag=true]
deck {
position: absolute;
- width: 0;
- height: 0;
+ min-width: 160px;
+ min-height: 240px;
top: 0;
left: 0;
@@ -132,24 +136,32 @@ deck {
display: flex;
justify-content: center;
align-content: center;
+
+ border-radius: 10px;
+
+ transition-duration: 0.2s;
+}
+
+deck:hover {
+ box-shadow: 0 0 5px var(--deck-hover);
}
deck > card {
- transform: translate(-75px, calc(-115px + ( var(--cpos) * 3px )));
+ transform: translate(0, calc(var(--cpos) * 3px ));
}
deck[mode="strip-hl"] > card {
- transform: translate(calc(-75px - ( var(--cpos) * 75px )), -115px);
+ transform: translate(calc(var(--cpos) * -75px), 0);
}
deck[mode="strip-hr"] > card {
- transform: translate(calc(-75px + ( var(--cpos) * 75px )), -115px);
+ transform: translate(calc(var(--cpos) * 75px), 0);
}
deck[mode="strip-vu"] > card {
- transform: translate(-75px, calc(-115px - ( var(--cpos) * 115px )));
+ transform: translate(0, calc(var(--cpos) * -115px ));
}
deck[mode="strip-vd"] > card {
- transform: translate(-75px, calc(-115px + ( var(--cpos) * 115px )));
+ transform: translate(0, calc(var(--cpos) * 115px ));
}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index 5770dde..1afc4fb 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/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
*/
diff --git a/webcards/styles/themes/colors-base.css b/webcards/styles/themes/colors-base.css
index 4f878da..fa2b60e 100644
--- a/webcards/styles/themes/colors-base.css
+++ b/webcards/styles/themes/colors-base.css
@@ -34,6 +34,8 @@
--card-border: #bbb;
--card-hover: #0f0;
+ --deck-hover: #3ea2ff;
+
/* Input */
--input-color-text: black;
diff --git a/webcards/styles/themes/colors-dark.css b/webcards/styles/themes/colors-dark.css
index 8020491..2f6ef3e 100644
--- a/webcards/styles/themes/colors-dark.css
+++ b/webcards/styles/themes/colors-dark.css
@@ -34,6 +34,8 @@
--card-border: #bbb;
--card-hover: #0f0;
+ --deck-hover: #3ea2ff;
+
/* Input */
--input-color-text: white;