element-ui/packages/theme-default/lib/upload.css

A Component Library for Vue.js.

@charset "UTF-8";.el-dragger__cover__title,.el-upload__file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-dragger__cover:after,.el-progress-bar__inner:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#475669;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e5e9f2;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1}.el-dragger,.el-dragger+.el-upload__tip{text-align:center}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}.el-upload{width:360px}.el-upload__input{display:none}.el-upload__inner{display:inline-block;position:relative}.el-upload__inner iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload__files{margin:0 0 10px;padding:0;list-style:none}.el-upload__file{-webkit-transition:all .5s cubic-bezier(.55,0,.1,1);transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#475669;line-height:32px;box-sizing:border-box;border-radius:4px;width:100%;position:relative}.el-upload__file a{color:#475669;-webkit-transition:color .3s;transition:color .3s;padding-left:4px}.el-upload__file a [class^=el-icon]{color:#99a9bf;margin-right:7px;height:100%;line-height:inherit}.el-upload__file .el-progress-bar{margin-right:0;padding-right:0}.el-upload__file .el-progress{position:absolute;bottom:-3px;width:100%}.el-upload__file .el-progress__text{position:absolute;top:-10px;right:0}.el-upload__file:hover{background-color:#eff2f7}.el-upload__file.is-finished a:hover{color:#20a0ff;cursor:pointer}.el-upload__file.is-finished:hover .el-upload__btn-delete{display:block;cursor:pointer}.el-upload__tip{font-size:12px;color:#8492a6;margin-top:7px}.el-upload__btn-delete{position:absolute;right:15px;top:0;font-size:12px;color:#20a0ff;display:none}.el-dragger{background-color:#f9fafc;border:1px solid #c0ccda;box-sizing:border-box;width:360px;height:180px;border-radius:4px;cursor:pointer;position:relative;overflow:hidden}.el-dragger .el-upload__inner{display:block;height:100%}.el-dragger .el-icon-upload{font-size:67px;color:#99a9bf;margin:40px 0 16px;line-height:50px}.el-dragger~.el-upload__files{margin-top:7px;padding-top:5px;border-top:1px solid rgba(192,204,218,.2)}.el-dragger:not(.is-showCover):hover{border-color:#20a0ff}.el-dragger.is-dragOver{background-color:rgba(32,159,255,.06);border:2px dashed #20a0ff}.el-dragger__cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-dragger__cover img{display:block;width:100%;height:auto}.el-dragger__cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-dragger__cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-dragger__cover__progress+.el-upload__inner{opacity:0}.el-dragger__cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-dragger__cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-dragger__cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s,-webkit-transform .3s cubic-bezier(.23,1,.32,1) .1s;margin-top:60px}.el-dragger__cover__interact .btn span{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.el-dragger__cover__interact .btn:not(:first-child){margin-left:35px}.el-dragger__cover__interact .btn:hover{-webkit-transform:translateY(-13px);transform:translateY(-13px)}.el-dragger__cover__interact .btn:hover span{opacity:1}.el-dragger__cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-dragger__cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#475669}.el-dragger__text{color:#99a9bf;font-size:14px;text-align:center}.el-dragger__text em{color:#20a0ff;font-style:normal}