nutui-taro-upgrade/dist/packages/imagepreview/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.overlay-fade-enter-active,.overlay-fade-leave-active{transition-property:opacity;transition-timing-function:ease}.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7))}.nut-overflow-hidden{overflow:hidden !important}.nut-theme-dark .nut-popup{background:var(--nut-dark-background2, #1b1b1b)}.nut-theme-dark .nut-popup__close-icon{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-popup-slide-center-enter-active,.nut-popup-slide-center-leave-active{transition-property:opacity;transition-timing-function:ease}.nut-popup-slide-center-enter-from,.nut-popup-slide-center-leave-to{opacity:0}.nut-popup-slide-top-enter-from,.nut-popup-slide-top-leave-active{transform:translate(0, -100%)}.nut-popup-slide-right-enter-from,.nut-popup-slide-right-leave-active{transform:translate(100%, 0)}.nut-popup-slide-bottom-enter-from,.nut-popup-slide-bottom-leave-active{transform:translate(0, 100%)}.nut-popup-slide-left-enter-from,.nut-popup-slide-left-leave-active{transform:translate(-100%, 0)}.nut-popup--center{top:50%;left:50%;transform:translate(-50%, -50%)}.nut-popup--center.round{border-radius:var(--nut-popup-border-radius, 20px)}.nut-popup--bottom{bottom:0;left:0;width:100%}.nut-popup--bottom.round{border-radius:var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0 0}.nut-popup--bottom--safebottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.nut-popup--right{top:0;right:0}.nut-popup--right.round{border-radius:var(--nut-popup-border-radius, 20px) 0 0 var(--nut-popup-border-radius, 20px)}.nut-popup--left{top:0;left:0}.nut-popup--left.round{border-radius:0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0}.nut-popup--top{top:0;left:0;width:100%}.nut-popup--top.round{border-radius:0 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px)}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nut-white, #fff);-webkit-overflow-scrolling:touch}.nut-popup__close-icon{position:absolute !important;z-index:1;color:#969799;font-size:18px;cursor:pointer;width:30px;height:30px;line-height:30px;text-align:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nut-popup-close-icon-margin, 16px);left:var(--nut-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nut-popup-close-icon-margin, 16px);right:var(--nut-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nut-popup-close-icon-margin, 16px);left:var(--nut-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nut-popup-close-icon-margin, 16px);bottom:var(--nut-popup-close-icon-margin, 16px)}.nut-swiper{position:relative;display:flex;transition-property:transform;box-sizing:content-box;overflow:hidden;cursor:grab;user-select:none}.nut-swiper-inner{display:flex;height:100%}.nut-swiper-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-swiper-pagination{display:flex;position:absolute;left:50%;bottom:12px;transform:translateX(-50%)}.nut-swiper-pagination i{width:var(--nut-swiper-pagination-item-width, 8px);height:var(--nut-swiper-pagination-item-height, 3px);margin-right:var(--nut-swiper-pagination-item-margin-right, 7px);border-radius:var(--nut-swiper-pagination-item-border-radius, 2px)}.nut-swiper-pagination i:last-child{margin-right:0}.nut-swiper-pagination-vertical{top:50%;left:12px;bottom:auto;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;transform:translateY(-50%)}.nut-swiper-pagination-vertical i{margin-bottom:5px}.nut-swiper-item{height:100%}.nut-video{width:100%;height:100%;position:relative;display:flex}.nut-video-player{width:100%;background:#000}.nut-video-player:focus{outline:none}.nut-video .nut-video-mask{width:100%;position:absolute;left:0;top:0;right:0;bottom:60px}.nut-video .nut-video-mask.custom-touch{bottom:0}.nut-video video{width:100%;height:100%;object-fit:fill}.nut-video-play-btn{width:80px;height:50px;margin-top:-25px;display:flex;align-items:center;justify-content:center;border:0;background-color:rgba(0,0,0,.45);color:#fff;transition:border-color .4s,outline .4s,background-color .4s;position:absolute;top:50%;left:50%;margin-left:-40px;padding:0;cursor:pointer;opacity:1;background-color:rgba(0,0,0,.5);font-size:30px;border-radius:20%}.nut-video-play-btn:before{content:"";background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) no-repeat center;width:30px;height:30px;display:inline-block;background-size:contain}.nut-video-controller{position:absolute;display:flex;left:0;bottom:0;background-color:rgba(0,0,0,.5);height:35px;width:100%;z-index:11111111;align-items:center;opacity:0;transition:all 1s}.nut-video-controller.nut-video-controller--show{opacity:1}.nut-video-controller.nut-video-controller--hide{opacity:0}.nut-video-controller .nut-video-controller__playbtn{width:18px;height:18px;background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x);background-repeat:no-repeat;background-position:center;margin:0 10px}.nut-video-controller .nut-video-controller__playbtn.puase{background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x);background-repeat:no-repeat;background-position:center}.nut-video-controller .nut-video-controller__total,.nut-video-controller .nut-video-controller__now{color:#fff;padding:0 5px;font-size:10px}.nut-video-controller .nut-video-controller__progress{position:relative;display:inline-block;height:100%;width:100%;margin:0 5px;transition:all .2s ease-in;flex:1}.nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value{position:absolute;top:50%;width:100%;height:2px;margin-top:-0.05rem;background:rgba(255,255,255,.5)}.nut-video-controller .nut-video-controller__progress .buffered{background:rgba(255,255,255,.8);height:2px}.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball{width:10px;height:10px;position:absolute;top:50%;left:0;border-radius:50%}.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball div{width:10px;height:10px;background:#fff;box-shadow:0px 0px 2px 0px rgba(0,0,0,.2);margin:0 -5px;border-radius:50%}.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball:hover{width:15px;height:15px}.nut-video-controller .nut-video-controller__full{width:40px;height:35px;background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) 1x);background-repeat:no-repeat;background-position:center}.nut-video-controller .nut-video-controller__full.full2{background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=) 1x);background-repeat:no-repeat;background-position:center}.nut-video-controller .nut-video-controller__volume{width:30px;height:30px;background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) 1x);background-repeat:no-repeat;background-position:center}.nut-video-controller .nut-video-controller__volume.muted{background-image:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K) 1x);background-repeat:no-repeat;background-position:center}.nut-video-error{position:absolute;width:100%;height:100%;z-index:111111;background:#000;color:#fff;text-align:center}.nut-video-error p{color:#fff}.nut-image-preview{height:100%;width:100%}.nut-image-preview-swiper{height:100%;width:100vw;background-color:rgba(0,0,0,0)}.nut-image-preview-img{width:100%;height:100%;object-fit:contain}.nut-image-preview-index{position:fixed;z-index:2002;top:50px;text-align:center;left:0;right:0;background:rgba(0,0,0,0);color:#fff}.nut-image-preview-index .arrow{position:absolute;left:15px;transform:rotateZ(180deg)}.nut-image-preview-close-icon{position:fixed;z-index:2002;top:50px;right:15px}.nut-image-preview-close-icon-right{right:10px}.nut-image-preview-close-icon-left{left:10px}.nut-image-preview .popup-bg{background:rgba(0,0,0,.9)}.nut-image-preview .popup-box{height:100%;overflow:visible;background-color:rgba(0,0,0,0)}.nut-image-preview-custom-pop{height:100%;background:rgba(0,0,0,0) !important;display:flex;align-items:center;width:100%}.nut-image-preview-swiper .nut-swiper-item{display:flex;align-items:center;justify-content:center;height:100%}.nut-image-preview-swiper .nut-swiper-item .nut-image-preview-box{width:100%}.nut-image-preview-swiper .nut-swiper-item .nut-video video{object-fit:contain}