55 lines
1.3 KiB
CSS
55 lines
1.3 KiB
CSS
.modal {
|
|
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */
|
|
backdrop-filter: blur(10px); /* Sophisticated blur effect */
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-content {
|
|
margin-top: 20vh;
|
|
background: radial-gradient(circle, #222, #000); /* Dark radial gradient */
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
border: none;
|
|
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Intense shadows */
|
|
transform: perspective(1000px) rotateX(5deg); /* 3D tilt effect */
|
|
padding: 20px;
|
|
width: 40vw;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.bouton-ok {
|
|
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */
|
|
font-size: 20px;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50px;
|
|
padding: 15px 30px;
|
|
cursor: pointer;
|
|
animation: pulse 1.5s infinite; /* Pulse animation */
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.bouton-ok:hover {
|
|
transform: scale(1.2) ; /* Slightly larger on hover */
|
|
background-color: rebeccapurple;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|