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

.media-cover { display: block; position: relative; width: 100%; height: 0; background-color: var(--color-video-background); } .snapic-post-content .media-cover { padding-top: initial !important; height: 75vh; } .grid__item:hover .media-cover { background-color: var(--color-video-background-hover); } .grid__media .video-js { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; overflow: hidden; } .grid__media .video-js, .grid__media .video-js .vjs-tech { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .grid__media .vjs-poster { background-size: 100%; } .MediaFullscreen { height: 100% !important; object-fit: contain !important; } .video-js, .my-video-dimensions { width: auto !important; height: 100% !important; } .video-js, .video-js .vjs-tech { background-color: var(--color-video-fullscreen-background) !important; } .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block !important; } .video-js.vjs-playing .vjs-tech { pointer-events: auto !important; } .video-js .vjs-big-play-button { position: absolute; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0 !important; width: 1.6em; height: 1.6em !important; border-radius: 50% !important; border: 0.1em solid var(--color-video-play-button) !important; z-index: 4; } .video-js .vjs-big-play-button .vjs-icon-placeholder { font-size: 1.2em !important; } .video-js .vjs-big-play-button .vjs-icon-placeholder:before { content: "\f101"; line-height: 3em !important; position: absolute; top: 50% !important; left: 50% !important; width: 3em !important; height: 3em !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video-js .vjs-control-bar { display: flex !important; justify-content: space-around !important; align-items: flex-end !important; position: absolute !important; left: calc(50% - 1px) !important; bottom: 0 !important; right: auto !important; width: calc(100% + 2px) !important; height: 4em !important; min-width: auto !important; border-radius: 0 !important; -webkit-transform: translate(-50%, 0%) !important; -moz-transform: translate(-50%, 0%) !important; -ms-transform: translate(-50%, 0%) !important; -o-transform: translate(-50%, 0%) !important; transform: translate(-50%, 0%) !important; background-color: rgba(0 0 0 / 15%) !important; background-image: linear-gradient(to bottom, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 10%) 10%, rgba(0 0 0 / 20%) 20%, rgba(0 0 0 / 30%) 30%, rgba(0 0 0 / 40%) 40%, rgba(0 0 0 / 50%) 50%, rgba(0 0 0 / 60%) 60%, rgba(0 0 0 / 70%) 70%, rgba(0 0 0 / 80%) 80%, rgba(0 0 0 / 90%) 90%, rgba(0 0 0 / 100%) 100% ) !important; z-index: 3 !important; } .video-js .vjs-control { display: flex; height: 4em !important; } .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, .video-js .vjs-control:focus { outline: none !important; } .video-js .vjs-time-control { display: flex; justify-content: center; align-items: center; } .vjs-remaining-time-display { margin-left: 3px !important; } .video-js .vjs-volume-panel, .video-js .vjs-current-time, .vjs-time-divider, .video-js .vjs-duration, .video-js .vjs-picture-in-picture-control { display: none !important; } .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before { position: absolute; top: 50%; left: 50%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video-js .vjs-play-progress:before { font-size: 1.2em !important; } @media screen and (max-width: 360px) { .video-js .vjs-big-play-button { width: 1.2em; height: 1.2em !important; } .video-js .vjs-big-play-button .vjs-icon-placeholder { font-size: 0.8em !important; } }