framework7/lazy-components/photo-browser.css

Full featured mobile HTML framework for building iOS & Android apps

.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{-webkit-transition-duration:0s;transition-duration:0s;-webkit-animation:photo-browser-in .4s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{-webkit-transition-duration:0s;transition-duration:0s;-webkit-animation:photo-browser-out .4s;animation:photo-browser-out .4s}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{-webkit-animation:none;animation:none}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{-webkit-transition-duration:.3s;transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.photo-browser-popup.modal-out.swipe-close-to-top{-webkit-transform:translate3d(0,-100vh,0);transform:translate3d(0,-100vh,0)}.page.photo-browser-page{background:0 0}.photo-browser-popup{background:0 0}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar{opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .photo-browser-swiper-container{background:#000}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:0;z-index:10;opacity:1;-webkit-transition:.4s;transition:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.photo-browser-caption{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:.3s;transition:.3s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;color:#fff;background:rgba(0,0,0,.8)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.photo-browser-captions-light .photo-browser-caption{background:rgba(255,255,255,.8);color:#000}.photo-browser-captions-dark .photo-browser-caption{color:#fff}.photo-browser-exposed .photo-browser-caption{color:#fff;background:rgba(0,0,0,.8)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:#fff;-webkit-transition:.4s;transition:.4s;-webkit-transition-property:background-color;transition-property:background-color}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box}.photo-browser-slide.photo-browser-transitioning{-webkit-transition:.4s;transition:.4s;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:#000}@-webkit-keyframes photo-browser-in{0%{-webkit-transform:translate3d(0,0,0) scale(.5);transform:translate3d(0,0,0) scale(.5);opacity:0}50%{-webkit-transform:translate3d(0,0,0) scale(1.05);transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-in{0%{-webkit-transform:translate3d(0,0,0) scale(.5);transform:translate3d(0,0,0) scale(.5);opacity:0}50%{-webkit-transform:translate3d(0,0,0) scale(1.05);transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:1}}@-webkit-keyframes photo-browser-out{0%{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:1}50%{-webkit-transform:translate3d(0,0,0) scale(1.05);transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{-webkit-transform:translate3d(0,0,0) scale(.5);transform:translate3d(0,0,0) scale(.5);opacity:0}}@keyframes photo-browser-out{0%{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:1}50%{-webkit-transform:translate3d(0,0,0) scale(1.05);transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{-webkit-transform:translate3d(0,0,0) scale(.5);transform:translate3d(0,0,0) scale(.5);opacity:0}}.ios .toolbar~.photo-browser-captions{bottom:44px;-webkit-transform:translate3d(0,0px,0);transform:translate3d(0,0px,0)}.ios .toolbar~.photo-browser-captions.photo-browser-captions-exposed{-webkit-transform:translate3d(0,0px,0);transform:translate3d(0,0px,0)}.ios .photo-browser-exposed .toolbar~.photo-browser-captions{-webkit-transform:translate3d(0,44px,0);transform:translate3d(0,44px,0)}.ios .photo-browser-page .toolbar{-webkit-transform:none;transform:none}.ios .view.with-photo-browser-page-exposed .navbar{opacity:0}.ios .photo-browser-page .navbar,.ios .photo-browser-page .toolbar,.ios .view.with-photo-browser-page .navbar,.ios .view.with-photo-browser-page .toolbar{background:rgba(247,247,248,.95);-webkit-transition:.4s;transition:.4s}.ios .photo-browser-dark .navbar,.ios .photo-browser-dark .toolbar,.ios .photo-browser-page-dark .navbar,.ios .photo-browser-page-dark .toolbar,.ios .view.with-photo-browser-page-dark .navbar,.ios .view.with-photo-browser-page-dark .toolbar{background:rgba(30,30,30,.8);color:#fff}.ios .photo-browser-dark .navbar:before,.ios .photo-browser-dark .toolbar:before,.ios .photo-browser-page-dark .navbar:before,.ios .photo-browser-page-dark .toolbar:before,.ios .view.with-photo-browser-page-dark .navbar:before,.ios .view.with-photo-browser-page-dark .toolbar:before{display:none!important}.ios .photo-browser-dark .navbar:after,.ios .photo-browser-dark .toolbar:after,.ios .photo-browser-page-dark .navbar:after,.ios .photo-browser-page-dark .toolbar:after,.ios .view.with-photo-browser-page-dark .navbar:after,.ios .view.with-photo-browser-page-dark .toolbar:after{display:none!important}.ios .photo-browser-dark .navbar a,.ios .photo-browser-dark .toolbar a,.ios .photo-browser-page-dark .navbar a,.ios .photo-browser-page-dark .toolbar a,.ios .view.with-photo-browser-page-dark .navbar a,.ios .view.with-photo-browser-page-dark .toolbar a{color:#fff}.ios.device-iphone-x .photo-browser-captions{bottom:constant(safe-area-inset-bottom);bottom:env(safe-area-inset-bottom)}.ios.device-iphone-x .toolbar~.photo-browser-captions{bottom:calc(44px + constant(safe-area-inset-bottom));bottom:calc(44px + env(safe-area-inset-bottom))}.md .toolbar~.photo-browser-captions{bottom:48px;-webkit-transform:translate3d(0,0px,0);transform:translate3d(0,0px,0)}.md .toolbar~.photo-browser-captions.photo-browser-captions-exposed{-webkit-transform:translate3d(0,0px,0);transform:translate3d(0,0px,0)}.md .photo-browser-exposed .toolbar~.photo-browser-captions{-webkit-transform:translate3d(0,48px,0);transform:translate3d(0,48px,0)}.md .photo-browser-page .toolbar{-webkit-transform:none;transform:none}.md .photo-browser-page .navbar,.md .photo-browser-page .toolbar{background:rgba(33,150,243,.95);-webkit-transition:.4s;transition:.4s}.md .photo-browser-dark .navbar,.md .photo-browser-dark .toolbar,.md .photo-browser-page-dark .navbar,.md .photo-browser-page-dark .toolbar{background:rgba(30,30,30,.8)!important;color:#fff}.md .photo-browser-dark .navbar a,.md .photo-browser-dark .toolbar a,.md .photo-browser-page-dark .navbar a,.md .photo-browser-page-dark .toolbar a{color:#fff}.md .color-red .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-red .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-red .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-red .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(244,67,54,.95)}.md .color-green .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-green .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-green .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-green .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(76,175,80,.95)}.md .color-blue .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-blue .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-blue .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-blue .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(33,150,243,.95)}.md .color-pink .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-pink .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-pink .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-pink .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(233,30,99,.95)}.md .color-theme-yellow .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-yellow .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-yellow .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-yellow .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(255,235,59,.95)}.md .color-orange .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-orange .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-orange .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-orange .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(255,152,0,.95)}.md .color-gray .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-gray .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-gray .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-gray .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(158,158,158,.95)}.md .color-theme-white .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-white .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-white .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-white .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(255,255,255,.95)}.md .color-black .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-black .photo-browser-page:not(.photo-browser-page-dark) .toolbar,.md .color-theme-black .photo-browser-page:not(.photo-browser-page-dark) .navbar,.md .color-theme-black .photo-browser-page:not(.photo-browser-page-dark) .toolbar{background-color:rgba(0,0,0,.95)}.md.device-iphone-x .photo-browser-captions{bottom:constant(safe-area-inset-bottom);bottom:env(safe-area-inset-bottom)}.md.device-iphone-x .toolbar~.photo-browser-captions{bottom:calc(48px + constant(safe-area-inset-bottom));bottom:calc(48px + env(safe-area-inset-bottom))}