Feat : various CSS Changes

components/CardsGrouped.vue

@@ -20,7 +20,10 @@ const props = withDefaults(defineProps<Props>(), {
                 </CardPreview>
             </template>
             <template v-if="props.stack.length == 0">
-                <img :class="`card_image empty`" :src="'/cards/background.png'" draggable="false">
+                <div class="empty">
+                    <img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
+                </div>
+
             </template>
         </div>
     </div>
@@ -42,7 +45,11 @@ const props = withDefaults(defineProps<Props>(), {
     justify-content: center;
 }
 
-.card_image.empty {
+.empty {
+    max-width: 10px;
+}
+
+.empty>.card_image {
     filter: brightness(0.5);
     max-height: 250px;
 }

components/GameBoard.vue

@@ -86,7 +86,6 @@ function showWinnerScreen() {
 #current_player {
     grid-area: current_player;
     background-image: url("/images/bg-darkgrass.png");
-    padding-bottom: 75px;
 
 }
 

components/PlayerSlot.vue

@@ -100,9 +100,12 @@ function check_for_guard(player: Player) {
                     <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
                 </CardsGrouped>
             </div>
-            <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
-                <div class="discard_container" @click="() => discard_unwrapped = true">
-                    <CardsGrouped :stack="props.player.discard_pile" v-if="!discard_unwrapped"> </CardsGrouped>
+
+            <div class="discard" :class="{ invisible: discard_unwrapped }" @click="() => discard_unwrapped = true">
+                <CardsGrouped :stack="props.player.discard_pile" :visible="!discard_unwrapped"> </CardsGrouped>
+            </div>
+
+            <div class="discard_overlay" v-if="discard_unwrapped">
                 <CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
                     v-for="c in props.player.discard_pile">
                     <template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
@@ -127,7 +130,6 @@ function check_for_guard(player: Player) {
             </div>
             <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
                 @click="() => discard_unwrapped = false"></div>
-            </div>
         </template>
         <div id="player_banner" :class="hide_stack_and_discard ? 'small' : 'big'">
             <div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
@@ -293,26 +295,30 @@ function check_for_guard(player: Player) {
     justify-content: start;
     cursor: pointer;
     pointer-events: none;
+    margin-left: 75px;
 }
 
-.discard.unwrapped {
-    margin-top: 0px;
-
-    cursor: default;
-    position: absolute;
-    padding-bottom: 100px;
-    height: 100%;
+.discard.invisible {
+    visibility: hidden;
 }
 
-.discard_container {
+
+.discard_overlay {
     z-index: 9;
     display: flex;
     /* background: blue; */
     pointer-events: none;
     gap: 2px;
-    padding-left: 40px;
     flex-wrap: wrap-reverse;
     align-content: flex-end;
+    cursor: default;
+    position: absolute;
+    padding-bottom: inherit;
+    padding-left: 40px;
+    height: calc(100% - 64px);
+    padding-top: 64px;
+    width: calc(100% -40px);
+    margin-left: 0;
 }
 
 #discard_unwrapped_bg {
@@ -325,6 +331,7 @@ function check_for_guard(player: Player) {
     z-index: 8;
     background: rgba(0, 0, 0, 0.5);
     pointer-events: all;
+    padding: inherit;
 }
 
 #discard_unwrapped_bg.unwrapped {
@@ -341,14 +348,14 @@ function check_for_guard(player: Player) {
         "stack          player"
         "discard        player";
     transition: all 1s;
+    margin-bottom: -75px;
+    padding-bottom: 75px;
 }
 
-.player.discard_unwrapped {
+.discard_overlay {
     grid-template-areas:
         "player_stats   player_stats"
         "stack          player";
-    position: relative;
-    isolation: isolate;
 }
 
 #current_player_board {