.openframe-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 300ms ease, visibility 300ms ease; } .openframe-overlay.active {
opacity: 1;
visibility: visible;
} .openframe-panel {
position: fixed;
top: 0;
height: 100%; background-color: #ffffff; z-index: 9999;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .openframe-panel.left {
left: 0;
transform: translateX(-100%); } .openframe-panel.right {
right: 0;
transform: translateX(100%); } .openframe-panel.active {
transform: translateX(0); } .openframe-close {
position: absolute;
top: 0px;
right: 15px;
width: 30px;
height: 30px; color: #fff;
border: none; cursor: pointer;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
line-height: 1;
}
.openframe-close:hover {
background-color: #555; } .openframe-overlay .close-area {
position: absolute;
top: 0;
bottom: 0;
width: 15px; } body.openframe-no-scroll {
overflow: hidden;
}