From 20201f77b5cf5cbb1c70b1cc51c4108d620a3202 Mon Sep 17 00:00:00 2001
From: Kyle Gunger <corechg@gmail.com>
Date: Sun, 17 May 2020 20:31:10 -0400
Subject: [Webcards] styles and some fixes + Fixed draging transformed cards +
 Fixed mobile styles + Theme template complete

---
 webcards/styles/client/card.css        | 26 +++++++++++++++++++-------
 webcards/styles/client/mobile.css      |  2 +-
 webcards/styles/themes/colors-base.css |  2 ++
 webcards/styles/themes/colors-dark.css |  2 ++
 4 files changed, 24 insertions(+), 8 deletions(-)

(limited to 'webcards/styles')

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;
-- 
cgit v1.2.3