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

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

.nut-progress{width:100%;position:relative;display:flex;align-items:center}.nut-progress .nut-progress-outer{flex:1;background-color:var(--nut-progress-outer-background-color, #f3f3f3);border-radius:var(--nut-progress-outer-border-radius, 12px);height:10px}.nut-progress .nut-progress-outer .nut-progress-inner{width:30%;height:100%;border-radius:var(--nut-progress-outer-border-radius, 12px);background:var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%));-webkit-transition:all .4s;transition:all .4s}.nut-progress .nut-progress-outer .nut-progress-text{display:flex;flex-direction:column;justify-content:center;color:#fff}.nut-progress .nut-progress-outer .nut-progress-slot{display:flex;justify-content:center;align-items:center}.nut-progress .nut-progress-outer .nut-active:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--nut-progress-outer-border-radius, 12px);animation:progressActive 2s ease-in-out infinite}@keyframes progressActive{0%{background:rgba(255,255,255,.1);width:0}20%{background:rgba(255,255,255,.5);width:0}to{background:rgba(255,255,255,0);width:100%}}.nut-progress .nut-progress-outer.nut-progress-small{height:var(--nut-progress-small-height, 5px)}.nut-progress .nut-progress-outer.nut-progress-small .nut-progress-text{font-size:var(--nut-progress-small-text-font-size, 7px);line-height:var(--nut-progress-small-text-line-height, 10px);padding:var(--nut-progress-small-text-padding, 2px 4px);top:50%}.nut-progress .nut-progress-outer.nut-progress-base{height:var(--nut-progress-base-height, 10px)}.nut-progress .nut-progress-outer.nut-progress-base .nut-progress-text{font-size:var(--nut-progress-base-text-font-size, 9px);line-height:var(--nut-progress-base-text-line-height, 13px);padding:var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px));top:50%}.nut-progress .nut-progress-outer.nut-progress-large{height:var(--nut-progress-large-height, 15px)}.nut-progress .nut-progress-outer.nut-progress-large .nut-progress-text{font-size:var(--nut-progress-large-text-font-size, 13px);line-height:var(--nut-progress-large-text-line-height, 18px);padding:var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px));top:50%}.nut-progress .nut-progress-outer-part{width:90%}.nut-progress .nut-progress-text{padding:0 5px;font-size:13px;line-height:1;min-width:35px;display:flex;align-items:center}.nut-progress .nut-progress-insidetext{padding:var(--nut-progress-insidetext-padding, 3px 5px 3px 6px);background:var(--nut-progress-insidetext-background, var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)));border-radius:var(--nut-progress-insidetext-border-radius, 5px);position:absolute;transition:all .4s;top:50%;min-width:0px}.nut-progress .nut-icon-success,.nut-progress .nut-icon-fail{width:10px;height:10px;display:inline-block}.nut-button{position:relative;display:inline-block;width:auto;flex-shrink:0;height:var(--nut-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nut-button-default-line-height, 36px);font-size:var(--nut-button-default-font-size, var(--nut-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;appearance:none;user-select:none;touch-action:manipulation;vertical-align:bottom;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0)}.nut-button .nut-button__text{margin-left:5px}.nut-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nut-black, #000);border:inherit;border-color:var(--nut-black, #000);border-radius:inherit;transform:translate(-50%, -50%);opacity:0;content:" "}.nut-button::after{border:none}.nut-button:active::before{opacity:.1}.nut-button__wrap{height:100%;width:100%;display:flex;align-items:center;justify-content:center}.nut-button--loading::before,.nut-button--disabled::before{display:none}.nut-button--default{color:var(--nut-button-default-color, rgb(102, 102, 102));background:var(--nut-button-default-bg-color, var(--nut-white, #fff));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, rgb(204, 204, 204))}.nut-button--primary{color:var(--nut-button-primary-color, var(--nut-white, #fff));background:var(--nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--info{color:var(--nut-button-info-color, var(--nut-white, #fff));background:var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--success{color:var(--nut-button-success-color, var(--nut-white, #fff));background:var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--danger{color:var(--nut-button-danger-color, var(--nut-white, #fff));background:var(--nut-button-danger-background-color, rgb(250, 44, 25));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--warning{color:var(--nut-button-warning-color, var(--nut-white, #fff));background:var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--plain{background:var(--nut-button-plain-background-color, var(--nut-white, #fff));background-origin:border-box}.nut-button--plain.nut-button--primary{color:var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19));border-color:var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19))}.nut-button--plain.nut-button--info{color:var(--nut-button-info-border-color, rgb(73, 106, 242));border-color:var(--nut-button-info-border-color, rgb(73, 106, 242))}.nut-button--plain.nut-button--success{color:var(--nut-button-success-border-color, rgb(38, 191, 38));border-color:var(--nut-button-success-border-color, rgb(38, 191, 38))}.nut-button--plain.nut-button--danger{color:var(--nut-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nut-button-danger-border-color, rgb(250, 44, 25))}.nut-button--plain.nut-button--warning{color:var(--nut-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nut-button-warning-border-color, rgb(255, 158, 13))}.nut-button--large{width:100%;height:var(--nut-button-large-height, 48px);line-height:var(--nut-button-large-line-height, 46px);font-size:var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)))}.nut-button--normal{padding:var(--nut-button-default-padding, 0 18px);font-size:var(--nut-button-default-font-size, var(--nut-font-size-2, 14px))}.nut-button--small{height:var(--nut-button-small-height, 28px);line-height:var(--nut-button-small-line-height, 26px);padding:var(--nut-button-small-padding, 0 12px);font-size:var(--nut-button-small-font-size, var(--nut-font-size-1, 12px))}.nut-button--small.nut-button--round{border-radius:var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 25px))}.nut-button--mini{height:var(--nut-button-mini-height, 24px);line-height:var(--nut-button-mini-line-height, 1.2);padding:var(--nut-button-mini-padding, 0 12px);font-size:var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px))}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nut-button-disabled-opacity, 0.68)}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nut-button-border-radius, 25px)}.nut-button--square{border-radius:0}.nut-button--default:not([disabled]):active{color:var(--nut-button-default-color, rgb(102, 102, 102));background:var(--nut-button-default-bg-color, var(--nut-white, #fff));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, rgb(204, 204, 204))}.nut-button--primary:not([disabled]):active{color:var(--nut-button-primary-color, var(--nut-white, #fff));background:var(--nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--info:not([disabled]):active{color:var(--nut-button-info-color, var(--nut-white, #fff));background:var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--success:not([disabled]):active{color:var(--nut-button-success-color, var(--nut-white, #fff));background:var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--danger:not([disabled]):active{color:var(--nut-button-danger-color, var(--nut-white, #fff));background:var(--nut-button-danger-background-color, rgb(250, 44, 25));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--warning:not([disabled]):active{color:var(--nut-button-warning-color, var(--nut-white, #fff));background:var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--plain:not([disabled]):active{background:var(--nut-button-plain-background-color, var(--nut-white, #fff));background-origin:border-box}.nut-button--plain.nut-button--primary:not([disabled]):active{color:var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19));border-color:var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19))}.nut-button--plain.nut-button--info:not([disabled]):active{color:var(--nut-button-info-border-color, rgb(73, 106, 242));border-color:var(--nut-button-info-border-color, rgb(73, 106, 242))}.nut-button--plain.nut-button--success:not([disabled]):active{color:var(--nut-button-success-border-color, rgb(38, 191, 38));border-color:var(--nut-button-success-border-color, rgb(38, 191, 38))}.nut-button--plain.nut-button--danger:not([disabled]):active{color:var(--nut-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nut-button-danger-border-color, rgb(250, 44, 25))}.nut-button--plain.nut-button--warning:not([disabled]):active{color:var(--nut-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nut-button-warning-border-color, rgb(255, 158, 13))}.nut-theme-dark .nut-uploader__preview-list{background:var(--nut-dark-background2, #1b1b1b);color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .close{color:var(--nut-dark-color, var(--nut-white, #fff)) !important}.nut-uploader{position:relative;display:flex;flex-wrap:wrap}.nut-uploader__slot{position:relative}.nut-uploader__upload{position:relative;background:var(--nut-uploader-background, #f7f8fa);width:var(--nut-uploader-picture-width, 100px);height:var(--nut-uploader-picture-height, 100px);display:flex;align-items:center;justify-content:center}.nut-uploader__input{position:absolute !important;top:0;left:0;width:100% !important;height:100% !important;overflow:hidden;cursor:pointer !important;opacity:0}.nut-uploader__input:disabled,.nut-uploader__input.disabled{cursor:not-allowed !important}.nut-uploader__preview{display:flex;align-items:center;justify-content:center;margin-right:10px;margin-bottom:10px;box-shadow:0 2px 10px 0 rgba(0,0,0,.1)}.nut-uploader__preview__progress{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center}.nut-uploader__preview__progress__msg{color:var(--nut-white, #fff);font-size:12px;margin-top:6px}.nut-uploader__preview.list{width:100%;margin-right:0px;margin-bottom:0px;margin-top:10px}.nut-uploader__preview-list{width:100%;height:32px;display:flex;flex-direction:column;position:relative}.nut-uploader__preview-list .nut-uploader__preview-img__file__name{padding:2px 4px;display:flex;align-items:center;height:100%}.nut-uploader__preview-list .nut-uploader__preview-img__file__name .file__name_tips{margin-left:4px;padding:0 20px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-uploader__preview-list .nut-uploader__preview-img__file__del{position:absolute;right:6px;top:6px}.nut-uploader__preview-list .nut-uploader__preview-img__file__link{position:absolute;left:6px;top:8px}.nut-uploader__preview-list .nut-progress{position:absolute;left:0;right:0;bottom:0}.nut-uploader__preview-list .nut-progress .nut-progress-outer{height:2px !important}.nut-uploader__preview-img{position:relative;width:var(--nut-uploader-picture-width, 100px);height:var(--nut-uploader-picture-height, 100px);display:flex;align-items:center;justify-content:center;border-radius:6px}.nut-uploader__preview-img .close{position:absolute;right:0;top:0;color:rgba(0,0,0,.6);transform:translate(50%, -50%)}.nut-uploader__preview-img .tips{position:absolute;bottom:0;left:0;right:0;text-align:center;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--nut-white, #fff);height:0px;transition:height .3s;background:rgba(0,0,0,.54);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-uploader__preview-img__c{max-width:100%;max-height:100%;border-radius:6px}.nut-uploader__preview-img__file{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .3s}.nut-uploader__preview-img__file__name{display:flex;width:100%;font-size:12px;color:var(--nut-text-color, #808080);padding:10px;height:100%;overflow:hidden;box-sizing:border-box;align-items:center}.nut-uploader__preview-img__file__name.error{color:red !important}.nut-uploader__preview-img__file__name.success{color:#1890ff !important}