framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 6.32 kB
CSS
:root{--f7-photobrowser-caption-font-size:13px;--f7-photobrowser-caption-font-weight:500;--f7-photobrowser-exposed-bg-color:#000;--f7-photobrowser-bg-color:#fff;--f7-photobrowser-caption-text-color:#000}:root .dark,:root.dark{--f7-photobrowser-bg-color:#000;--f7-photobrowser-caption-text-color:#fff}.photo-browser{height:100%;left:0;position:absolute;top:0;width:100%;z-index:400}.photo-browser-standalone.modal-in{animation:photo-browser-in .4s;transition-duration:0s}.photo-browser-standalone.modal-out{animation:photo-browser-out .4s;transition-duration:0s}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none}.photo-browser-standalone.photo-browser-transitioning{animation:none;transition:.4s}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:none}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:none}.photo-browser-of{margin:0 5px}.photo-browser-captions{bottom:var(--f7-safe-area-bottom);left:0;opacity:1;pointer-events:none;position:absolute;transition-duration:.4s;width:100%;z-index:10}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.toolbar.photo-browser-thumbs{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.page~.photo-browser-page:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-popup:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs,.photo-browser-standalone:not(.photo-browser-exposed) .toolbar~.toolbar.photo-browser-thumbs{height:var(--f7-toolbar-height)}.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs{transform:translate3d(0,calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom, 0)),0)}.navbar+.toolbar.photo-browser-thumbs .swiper,.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs .swiper{height:calc(100% - var(--f7-safe-area-bottom, 0))}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translateZ(0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translateZ(0)}.toolbar~.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height)*2 + var(--f7-safe-area-bottom))}.toolbar~.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,var(--f7-toolbar-height),0)}.toolbar:has(+.photo-browser-thumbs):after,.toolbar:has(+.photo-browser-thumbs):before{top:calc(-16px - var(--f7-toolbar-height))}.photo-browser-thumbs{transition-property:transform,background-color,color}.photo-browser-thumbs:after,.photo-browser-thumbs:before{display:none}.photo-browser-thumbs .swiper{height:100%;width:100%}.photo-browser-thumbs .swiper-slide{align-items:center;display:flex;justify-content:center;width:auto}.photo-browser-thumbs img{border-radius:8px;display:block;height:75%;min-width:4px;width:auto}.photo-browser-thumbs .swiper-slide img{transform:translateX(-4px);transition-duration:.15s}.photo-browser-thumbs .swiper-slide-active img{transform:scale(1.2)}.photo-browser-thumbs .swiper-slide-active~.swiper-slide img{transform:translateX(4px)}.photo-browser-caption{bottom:0;box-sizing:border-box;color:var(--f7-photobrowser-caption-text-color);font-size:var(--f7-photobrowser-caption-font-size);font-weight:var(--f7-photobrowser-caption-font-weight);left:0;opacity:0;padding:4px 5px;position:absolute;text-align:center;transition-duration:.4s;width:100%}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.photo-browser-swiper-container{background:var(--f7-photobrowser-bg-color);height:100%;left:0;overflow:hidden;position:absolute;top:0;touch-action:none;transition:.4s;transition-property:background-color;width:100%}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{align-items:center;box-sizing:border-box;display:flex;flex-shrink:0;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{display:none;height:auto;max-height:100%;max-width:100%;width:auto}.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: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{height:100%;width:100%}.photo-browser-slide .preloader{display:none;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;width:42px}.photo-browser-page{touch-action:none}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translateZ(0);transition-duration:.4s}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar:not(.photo-browser-thumbs){opacity:0;pointer-events:none;visibility:hidden}.photo-browser-exposed .toolbar:not(.photo-browser-thumbs)~.photo-browser-captions,.photo-browser-exposed .toolbar~.toolbar.photo-browser-thumbs~.photo-browser-captions{transform:translate3d(0,var(--f7-toolbar-height),0)}.photo-browser-exposed .photo-browser-swiper-container{background:var(--f7-photobrowser-exposed-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}@keyframes photo-browser-in{0%{opacity:0;transform:translateZ(0) scale(.5)}50%{opacity:1;transform:translateZ(0) scale(1.05)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes photo-browser-out{0%{opacity:1;transform:translateZ(0) scale(1)}50%{opacity:1;transform:translateZ(0) scale(1.05)}to{opacity:0;transform:translateZ(0) scale(.5)}}