diff options
Diffstat (limited to 'webcards/styles')
-rw-r--r-- | webcards/styles/client/card.css | 26 | ||||
-rw-r--r-- | webcards/styles/client/mobile.css | 2 | ||||
-rw-r--r-- | webcards/styles/themes/colors-base.css | 2 | ||||
-rw-r--r-- | webcards/styles/themes/colors-dark.css | 2 |
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; |