feat: end turn style

components/PlayerSlot.vue

@@ -135,8 +135,8 @@ function damage_team_all(team: Team) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" @click="checkEndTurn">END TURN</button>
+                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button" @click="checkEndTurn">END TURN</button>
-                        <div class="warning" v-if="warning">/!\<br> Effets restants!<br> /!\</div>
+                        <div class="warning" v-if="warning">/!\<br> Effets restants!</div>
                     </template>
 
                 </template>
@@ -231,8 +231,9 @@ function damage_team_all(team: Team) {
     color: white;
     padding: 5px;
     border-radius: 5px;
-    width: 60px;
+    width: 85px;
-    font-size: 0.9em;
+    font-size: 0.85em;
+    margin-left: 5px;
 }
 
 #end_turn {
@@ -440,6 +441,30 @@ function damage_team_all(team: Team) {
     transform: translate(-50%, -50%);
 }
 
+.end_turn_button {
+    background-color: #4CAF50; /* Green background color */
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    margin: 0 0 0 5px;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.end_turn_button:hover {
+    background-color: #45a049; /* Darker green on hover */
+}
+
+.end_turn_button:active {
+    transform: translateY(2px); /* Add a slight press effect on click */
+    box-shadow: none; /* Remove shadow on click */
+}
+
 .ready-bubble {
     color: white;
     padding: 0.5em;