[Webcards] styles and some fixes

+ Fixed draging transformed cards
+ Fixed mobile styles
+ Theme template complete

2 files changed, 20 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
     */