.dialog-container,
.dialog-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .dialog-container {
z-index: 2; display: flex; } .dialog-container[aria-hidden='true'] {
display: none; } .dialog-overlay {
background-color: rgb(43 46 56 / 0.9); animation: fade-in 200ms both;
} .dialog-content {
margin: auto; z-index: 2; position: relative; background-color: white; animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
padding: 1em;
max-width: 90%;
width: 600px;
border-radius: 5px;
}
@media screen and (min-width: 700px) {
.dialog-content {
padding: 2em;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes slide-up {
from {
transform: translateY(10%);
}
}
@media (prefers-reduced-motion: reduce) {
.dialog-overlay,
.dialog-content {
animation: none;
}
}
.dialog-close {
position: absolute;
top: 0.5em;
right: 0.5em;
border: 0;
padding: 0.25em;
background-color: transparent;
font-size: 1.5em;
width: 1.5em;
height: 1.5em;
text-align: center;
cursor: pointer;
transition: 0.15s;
border-radius: 50%;
}
@media screen and (min-width: 700px) {
.dialog-close {
top: 1em;
right: 1em;
}
}