html,
html.ocs-initialized {
overflow: hidden;
overflow-y: auto;
}
body,
[data-canvas=container],
.ocs-initialized [data-canvas=container] {
overflow: initial; height: auto;
min-height: 100vh;
} html.ocs-scroll-lock {
overflow-y: hidden;
}
html.ocs-scroll-lock.ocs-scroll-fixed {
position: fixed;
overflow-y: scroll;
}
html.ocs-scroll-lock.ocs-scroll-fixed body {
position: relative;
} .admin-bar [data-canvas=container] {
min-height: -webkit-calc( 100vh - 32px );
min-height: -moz-calc( 100vh - 32px );
min-height: calc( 100vh - 32px );
}
@media screen and (max-width: 782px) {
.admin-bar [data-canvas=container] {
min-height: -webkit-calc( 100vh - 46px );
min-height: -moz-calc( 100vh - 46px );
min-height: calc( 100vh - 46px );
}
}
@media screen and (max-width: 600px) {
html.ocs-sidebar-active #wpadminbar {
display: none;
height: 0;
}
} .ocs-legacy [data-canvas] {top: 0; right: 0; bottom: 0; left: 0;}
.ocs-legacy [data-canvas],
.ocs-legacy [data-off-canvas] {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: -webkit-transform 300ms, -webkit-filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
-moz-transition: -moz-transform 300ms, filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
-o-transition: -o-transform 300ms, filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
transition: transform 300ms, filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
} .ocs-trigger {cursor: pointer;} [data-off-canvas] {
overscroll-behavior: contain;
-ms-scroll-chaining: none;
} [data-off-canvas*=" top"][data-off-canvas*=" reveal"],
[data-off-canvas*=" top"][data-off-canvas*=" shift"],
[data-off-canvas*=" bottom"][data-off-canvas*=" reveal"],
[data-off-canvas*=" bottom"][data-off-canvas*=" shift"] {
z-index: 1;
}  .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 30%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 15%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 45%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 30%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 15%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 45%;
}
@media (max-width: 480px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 60%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 35%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 85%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 40%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 20%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 60%;
}
}
@media (min-width: 481px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 50%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 30%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 70%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 40%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 20%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 60%;
}
}
@media (min-width: 768px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 40%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 25%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 55%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 35%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 20%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 55%;
}
}
@media (min-width: 992px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 30%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 15%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 45%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 30%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 15%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 45%;
}
}
@media (min-width: 1200px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 25%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 10%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 40%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 25%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 10%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 40%;
}
}