/home/bdqbpbxa/demo-subdomains/homesearch.goodface.com.ua/frontend/css/ui-components/modals.css
.modals-wrapper {
position: fixed;
left: 0;
top: 0;
z-index: 99;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
padding: 105px 73px 73px 73px;
overflow-y: scroll;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.modals-wrapper.-active {
opacity: 1;
pointer-events: auto;
}
.modal-window {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
margin: auto;
width: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.modal-window.-active {
opacity: 1;
pointer-events: auto;
}
.modal-window.-video-modal {
width: 100%;
height: auto;
max-height: 100%;
}
.modal-window__close {
position: absolute;
right: -36px;
top: -55px;
width: 30px;
height: 30px;
background: no-repeat center / contain
url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNDUwMDIgMjkuODQ5OUwwLjE1MDAyNCAyNi41NDk5TDExLjcgMTQuOTk5OUwwLjE1MDAyNCAzLjQ0OTlMMy40NTAwMiAwLjE0OTkwMkwxNSAxMS42OTk5TDI2LjU1IDAuMTQ5OTAyTDI5Ljg1IDMuNDQ5OUwxOC4zIDE0Ljk5OTlMMjkuODUgMjYuNTQ5OUwyNi41NSAyOS44NDk5TDE1IDE4LjI5OTlMMy40NTAwMiAyOS44NDk5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
cursor: pointer;
transition: transform 0.4s;
}
.modal-window__video {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.modal-window__video-preview {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
cursor: pointer;
}
.modal-window__video-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.play-button {
position: absolute;
z-index: 2;
width: 76px;
height: 76px;
border-radius: 50%;
box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.25);
background: no-repeat center / contain url("../../images/ui/components/play-video-button.svg");
transition: opacity 0.4s;
}
@media screen and (max-width: 759px) {
.modals-wrapper {
padding: 50px 20px;
}
.modal-window__close {
right: 0;
top: -35px;
width: 20px;
height: 20px;
}
}