/* === Photo Browser === */ .photo-browser { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 400; } .photo-browser-standalone { &.modal-in { transition-duration: 0ms; animation: photo-browser-in 400ms; } &.modal-out { transition-duration: 0ms; animation: photo-browser-out 400ms; &.swipe-close-to-bottom, &.swipe-close-to-top { animation: none; } } } .photo-browser-popup { &.modal-out { &.swipe-close-to-bottom, &.swipe-close-to-top { transition-duration: 300ms; } &.swipe-close-to-bottom { transform: translate3d(0, 100%, 0); } &.swipe-close-to-top { transform: translate3d(0, -100vh, 0); } } } .page.photo-browser-page { background: none; } .photo-browser-popup { background: none; } .photo-browser-exposed { .navbar, .toolbar { opacity: 0; visibility: hidden; pointer-events:none; } .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; transition: 400ms; &.photo-browser-captions-exposed { opacity: 0; } } .photo-browser-caption { box-sizing: border-box; transition: 300ms; position:absolute; bottom:0; left:0; opacity: 0; padding:4px 5px; width:100%; text-align:center; color: #fff; background: rgba(0,0,0,0.8); &:empty { display: none; } &.photo-browser-caption-active { opacity: 1; } .photo-browser-captions-light & { background: rgba(255,255,255,0.8); color: #000; } .photo-browser-captions-dark & { color: #fff; } .photo-browser-exposed & { color:#fff; background: rgba(0,0,0,0.8); } } .photo-browser-swiper-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; transition: 400ms; transition-property: background-color; } .photo-browser-prev, .photo-browser-next { &.swiper-button-disabled { opacity: 0.3; } } .photo-browser-slide { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0; box-sizing: border-box; &.photo-browser-transitioning { transition: 400ms; transition-property: transform; } span.swiper-zoom-container { display: none; } img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: none; } &.swiper-slide-active, &.swiper-slide-next, &.swiper-slide-prev { span.swiper-zoom-container { display: flex; } img { display: inline; } &.photo-browser-slide-lazy { .preloader { display: block; } } } iframe { width: 100%; height: 100%; } .preloader { display: none; position: absolute; width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; left: 50%; top: 50%; } } .photo-browser-dark, .photo-browser-page-dark { .photo-browser-swiper-container { background: #000; } } @keyframes photo-browser-in { 0% { transform: translate3d(0,0,0) scale(0.5); opacity: 0; } 50% { transform: translate3d(0,0,0) scale(1.05); opacity: 1; } 100% { transform: translate3d(0,0,0) scale(1); opacity: 1; } } @keyframes photo-browser-out { 0% { transform: translate3d(0,0,0) scale(1); opacity: 1; } 50% { transform: translate3d(0,0,0) scale(1.05); opacity: 1; } 100% { transform: translate3d(0,0,0) scale(0.5); opacity: 0; } } & when (@includeIosTheme) { @import url('./photo-browser-ios.less'); } & when (@includeMdTheme) { @import url('./photo-browser-md.less'); }