@keyframes popupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes popupZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes popupZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); } } @keyframes popupSlideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popupSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(30px); } } .popup-anim-fade.is-opening { animation: popupFadeIn 0.3s ease-out forwards; }
.popup-anim-fade.is-closing { animation: popupFadeOut 0.3s ease-in forwards; }
.popup-anim-zoomIn.is-opening { animation: popupZoomIn 0.3s ease-out forwards; }
.popup-anim-zoomIn.is-closing { animation: popupZoomOut 0.3s ease-in forwards; }
.popup-anim-slideIn.is-opening { animation: popupSlideIn 0.3s ease-out forwards; }
.popup-anim-slideIn.is-closing { animation: popupSlideOut 0.3s ease-in forwards; }
.popup-obvio-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
padding: 20px;
z-index: 999999 !important;
} .popup-position-center-center {
justify-content: center;
align-items: center;
}
.popup-position-top-left {
justify-content: flex-start;
align-items: flex-start;
}
.popup-position-top-center {
justify-content: center;
align-items: flex-start;
}
.popup-position-top-right {
justify-content: flex-end;
align-items: flex-start;
}
.popup-position-bottom-left {
justify-content: flex-start;
align-items: flex-end;
}
.popup-position-bottom-center {
justify-content: center;
align-items: flex-end;
}
.popup-position-bottom-right {
justify-content: flex-end;
align-items: flex-end;
}
.popup-obvio-content {
position: relative;
background: none;
opacity: 0; padding: 0;
border-radius: 10px;
}
.popup-obvio-content img {
max-width: 80vw;
max-height: 80vh;
display: block;
}
#popup-obvio-container .popup-obvio-close-btn {
position: absolute !important;
top: 10px !important;
width: 30px !important;
height: 30px !important;
background: rgba(0,0,0,0.5) !important;
border: none !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: background-color 0.3s ease, transform 0.3s ease !important;
z-index: 10 !important;
font-size: 0 !important; }
#popup-obvio-container .popup-obvio-close-btn:hover {
background: rgba(0,0,0,0.8) !important;
transform: rotate(90deg) !important;
}
#popup-obvio-container .popup-obvio-close-btn::before,
#popup-obvio-container .popup-obvio-close-btn::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 16px !important;
height: 2px !important;
background-color: white !important;
}
#popup-obvio-container .popup-obvio-close-btn::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
#popup-obvio-container .popup-obvio-close-btn::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
} #popup-obvio-container .popup-obvio-close-btn.position-right {
right: 10px !important;
}
#popup-obvio-container .popup-obvio-close-btn.position-left {
left: 10px !important;
}