@charset "UTF-8"; /* ==================================================
 * Snapic Plus for Pushbar Main Stylesheet, Modified by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

html.pushbar_locked { margin-right: 7px !important; overflow: hidden; -ms-touch-action: none; touch-action: none; } .pushbar_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; min-height: 100vh; background-color: black; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; opacity: 0; will-change: opacity; z-index: -999; } html.pushbar_locked .pushbar_overlay { opacity: .7; z-index: 9999; } [data-pushbar-id] { position: fixed; background-color: white; will-change: transform; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform: translateZ(0px); -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; overflow-y: auto; z-index: 10000; } [data-pushbar-direction="left"][data-pushbar-id], [data-pushbar-direction="right"][data-pushbar-id] { top: 0; width: auto; height: auto; min-width: 250px; max-width: 75vw; max-height: 100%; } [data-pushbar-direction="top"][data-pushbar-id], [data-pushbar-direction="bottom"][data-pushbar-id] { left: 0; width: auto; max-width: 100%; min-height: 250px; max-height: 85vh; } [data-pushbar-direction="left"][data-pushbar-id] { left: 0; -webkit-transform: translateZ(0px) translateX(-100%); -moz-transform: translateZ(0px) translateX(-100%); -ms-transform: translateZ(0px) translateX(-100%); -o-transform: translateZ(0px) translateX(-100%); transform: translateZ(0px) translateX(-100%); } [data-pushbar-direction="right"][data-pushbar-id] { right: 0; -webkit-transform: translateZ(0px) translateX(100%); -moz-transform: translateZ(0px) translateX(100%); -ms-transform: translateZ(0px) translateX(100%); -o-transform: translateZ(0px) translateX(100%); transform: translateZ(0px) translateX(100%); } [data-pushbar-direction="left"][data-pushbar-id].opened, [data-pushbar-direction="right"][data-pushbar-id].opened { display: block; -webkit-transform: translateZ(0px) translateX(0px); -moz-transform: translateZ(0px) translateX(0px); -ms-transform: translateZ(0px) translateX(0px); -o-transform: translateZ(0px) translateX(0px); transform: translateZ(0px) translateX(0px); } [data-pushbar-direction="top"][data-pushbar-id] { top: 0; -webkit-transform: translateZ(0px) translateX(-100%); -moz-transform: translateZ(0px) translateX(-100%); -ms-transform: translateZ(0px) translateX(-100%); -o-transform: translateZ(0px) translateX(-100%); transform: translateZ(0px) translateX(-100%); } [data-pushbar-direction="top"][data-pushbar-id].opened { display: block; -webkit-transform: translateZ(0px) translateX(0px); -moz-transform: translateZ(0px) translateX(0px); -ms-transform: translateZ(0px) translateX(0px); -o-transform: translateZ(0px) translateX(0px); transform: translateZ(0px) translateX(0px); } [data-pushbar-direction="bottom"][data-pushbar-id] { bottom: 0; -webkit-transform: translateZ(0px) translateY(100%); -moz-transform: translateZ(0px) translateY(100%); -ms-transform: translateZ(0px) translateY(100%); -o-transform: translateZ(0px) translateY(100%); transform: translateZ(0px) translateY(100%); } [data-pushbar-direction="bottom"][data-pushbar-id].opened { display: block; -webkit-transform: translateZ(0px) translateY(0px); -moz-transform: translateZ(0px) translateY(0px); -ms-transform: translateZ(0px) translateY(0px); -o-transform: translateZ(0px) translateY(0px); transform: translateZ(0px) translateY(0px); } @media screen and (max-width: 480px) { html.pushbar_locked { margin-right: 0 !important; } }