Feat : improve shadow effect

components/CardPreview.vue

@@ -11,7 +11,8 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     wrapped: () => false,
-    tilted: () => true
+    tilted: () => true,
+    locked: () => true
 })
 
 
@@ -44,9 +45,9 @@ watch(
 </script>
 
 <template>
-    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
-        @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
-        @mouseenter="mouseenter" @mouseleave="mouseleave">
+    <div class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }" @contextmenu.prevent="false"
+        @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''" @mouseenter="mouseenter"
+        @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
@@ -66,15 +67,18 @@ watch(
 
 <style scoped>
 .card {
+    --max-height: 250px;
+    --margin-bottom: calc(var(--max-height) * 0.05);
     transition: 0.025s rotate linear;
     max-width: 256px;
     position: relative;
     display: flex;
     margin-bottom: 0px;
-    margin-top: 15px;
+    margin-top: var(--margin-bottom);
     transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     isolation: isolate;
     pointer-events: all;
+    max-height: var(--max-height);
 }
 
 .card.active {
@@ -82,7 +86,7 @@ watch(
 }
 
 .card_image {
-    max-height: 250px;
+    max-height: var(--max-height);
     transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
     z-index: 1;
 }
@@ -92,20 +96,17 @@ watch(
     outline-offset: -2px;
 }
 
-.card.locked {
+.card.unlocked {
     margin-top: 0px;
-    margin-bottom: 15px;
-    filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
+
+    margin-bottom: var(--margin-bottom);
+    filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
 }
 
 .card.wrapped {
     max-width: 10px;
 }
 
-.card_image {
-    max-height: 250px;
-}
-
 #contextMenuButtons {
     position: absolute;
     display: flex;