/** * FancyBox - jQuery Plugin * Simple and fancy lightbox alternative * * Examples and documentation at: http://fancybox.net * * Copyright (c) 2008 - 2010 Janis Skarnelis * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated. * * Copyright (c) 2020 - RavanH * Version: 1.5 (2020/11/09) * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ html.fancybox-active:not(.fancybox-allowscroll), html.fancybox-active:not(.fancybox-allowscroll) body { touch-action: none; overscroll-behavior: none; -webkit-overflow-scrolling: auto; overflow: hidden; } html.fancybox-active:not(.fancybox-allowscroll) body { margin-right: var(--vertical-scrollbar); margin-bottom: var(--horizontal-scrollbar); } html.fancybox-active:not(.fancybox-allowscroll) body.rtl { margin-right: 0; margin-left: var(--vertical-scrollbar); } #fancybox-loading, #fancybox-loading div, #fancybox-overlay, #fancybox-wrap *, #fancybox-wrap *::before, #fancybox-wrap *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* light box framework */ #fancybox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 111100; display: none; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 111101; display: none; outline: none !important; } #fancybox-outer { position: relative; width: 100%; height: 100%; box-shadow:0 0 20px #111; -moz-box-shadow:0 0 20px #111; -webkit-box-shadow:0 0 20px #111; background: #fff; } #fancybox-content { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 111102; border: 0px solid #fff; background: #fff; background-clip: padding-box; } #fancybox-content > * { max-width: 100%; max-height: 100%; -webkit-overflow-scrolling: touch; } #fancybox-error { color: #444; padding: 14px; margin: 0; } #fancybox-frame, #fancybox-img { width: 100%; height: 100%; border: none; } #fancybox-img { padding: 0; margin: 0; line-height: 0; vertical-align: top; max-width:none !important; max-height:none !important } #fancybox-frame { display: block; z-index: 0; /* z-index bug with -webkit-overflow-scrolling */ } /* buttons */ .fancy-ico { position: absolute; width: 48px; height: 48px; border-radius: 50%; } .fancy-ico span { display: block; position: relative; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: #000; border: 2px solid white; box-shadow: 0 0 4px #000; transition: transform .25s ease-in-out; } #fancybox-close:hover span, #fancybox-next:hover span, body.rtl #fancybox-prev:hover span { transform: rotate(360deg); } #fancybox-prev:hover span, body.rtl #fancybox-next:hover span { transform: rotate(-360deg); } /* close button */ #fancybox-close { top: -24px; right: -24px; cursor: pointer; z-index: 111105; display: none; } #fancybox-close span::after, #fancybox-close span::before { content: ''; position: absolute; top: 9px; left: 4px; width: 12px; height: 2px; background-color: #fff; } #fancybox-close span::before { transform: rotate(45deg); } #fancybox-close span::after { transform: rotate(-45deg); } /* navigation elements */ #fancybox-prev, #fancybox-next { top: 50%; margin-top: -24px; cursor: pointer; z-index: 111102; display: none; } #fancybox-next, body.rtl #fancybox-prev { left: auto; right: -24px; } #fancybox-prev, body.rtl #fancybox-next { left: -24px; right: auto; } #fancybox-prev span::after, #fancybox-next span::after { content: ''; position: absolute; top: 6px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; } #fancybox-prev span::after, body.rtl #fancybox-next span::after { transform: rotate(-135deg); left: 7px; } #fancybox-next span::after, body.rtl #fancybox-prev span::after { transform: rotate(45deg); left: initial; right: 7px; } /* title elements */ #fancybox-title-wrap { z-index: 111104; } .fancybox-title-inside { padding-bottom: 10px; text-align: center; color: #333; background-color: #fff; position: relative; } .fancybox-title-outside { padding-top: 10px; color: #fff; font-weight: 600; } .fancybox-title-over { position: absolute; width: 100%; bottom: 0; left: 0; color: #fff; text-align: left; } body.rtl .fancybox-title-over { text-align:right } .fancybox-title-over #fancybox-title { padding: 10px; background: rgba(0,0,0,.6); display: block; } .fancybox-title-float { text-align: center; } .fancybox-title-float #fancybox-title { display: table; margin: -12px auto; height: 24px; padding: 0 15px; line-height: 20px; font-size: 14px; color: #fff; background: #000; border: 2px solid #fff; border-radius: 12px; box-shadow: 0 0 4px #000; position: relative; z-index: 111104; } /* loader animation */ #fancybox-loading { position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; background-color: rgba(0,0,0,.9); border-radius: 5px; cursor: pointer; overflow: hidden; z-index: 111104; display: none; } #fancybox-loading div { transform-origin: 20px 20px; animation: fancybox-loading 1.2s linear infinite; } #fancybox-loading div::after { content: ''; display: block; position: absolute; top: 7px; left: 19px; width: 2px; height: 7px; border-radius: 20%; background: #fff; } #fancybox-loading div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } #fancybox-loading div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } #fancybox-loading div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } #fancybox-loading div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } #fancybox-loading div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } #fancybox-loading div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } #fancybox-loading div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } #fancybox-loading div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } #fancybox-loading div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } #fancybox-loading div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } #fancybox-loading div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } #fancybox-loading div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes fancybox-loading { 0% { opacity: 1; } 100% { opacity: 0; } } /* other */ .fancybox-hidden { display: none; } #fancybox-content .fancybox-hidden, #fancybox-tmp .fancybox-hidden { display: revert; }