81 lines
1.9 KiB
CSS
81 lines
1.9 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('./img/fond_mystere2_b.webp') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#zone_cartes {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carte {
|
|
animation: zoomOut 0.4s ease-out; /* Applique l'animation à chaque carte */
|
|
position: absolute;
|
|
width: 15vw; /* Taille des cartes */
|
|
height: calc(15vw * 1.4); /* Respecte le ratio */
|
|
background-size: cover;
|
|
z-index: 10; /* Au-dessus des ronds */
|
|
cursor: grab;
|
|
touch-action: none;
|
|
}
|
|
|
|
|
|
|
|
#zone_cartes .carte.zoom-in {
|
|
transform: scale(1.8) !important;
|
|
z-index: 20 !important;
|
|
transition: transform 0.2s ease-in-out !important;
|
|
}
|
|
|
|
|
|
|
|
#emplacements {
|
|
position: absolute;
|
|
bottom: 150px; /* Augmente la distance par rapport au bas de l'écran */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 80%; /* Largeur totale de la rangée */
|
|
height: 50px; /* Hauteur totale */
|
|
z-index: 1; /* Sous les cartes */
|
|
}
|
|
|
|
.emplacement {
|
|
width: 5vw; /* Taille des ronds */
|
|
height: 5vw;
|
|
background-color: #34b115; /* Nouvelle couleur */
|
|
border: 2px solid black;
|
|
border-radius: 50%; /* Forme ronde */
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.zone-blanche {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100px; /* Ajustez la taille selon vos besoins */
|
|
height: 100px; /* Ajustez la taille selon vos besoins */
|
|
background-color: white;
|
|
border: 2px solid black;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Animation de zoom */
|
|
@keyframes zoomOut {
|
|
from {
|
|
transform: scale(10); /* Taille initiale (double) */
|
|
opacity: 0; /* Invisible */
|
|
}
|
|
to {
|
|
transform: scale(1); /* Taille normale */
|
|
opacity: 1; /* Visible */
|
|
}
|
|
} |