ivue-material-plus/dist/unplugin-vue-components/styles/ivue-upload.css

A high quality UI components Library with Vue.js

:root{--ivue-upload-content-size:100px;--ivue-upload-content-margin:0 8px 8px 0;--ivue-upload-content-radius:8px;--ivue-upload-loading-size:22px;--ivue-upload-remove-size:16px;--ivue-upload-content-color:#9ab0c6;--ivue-upload-mask-color:rgba(50, 50, 51, 0.5);--ivue-upload-preview-cover-color:rgba(0, 0, 0, 0.3)}.ivue-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.ivue-upload input[type=file]{display:none}.ivue-upload-select{display:inline-block}.ivue-upload-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:var(--ivue-upload-content-size);height:var(--ivue-upload-content-size);margin:var(--ivue-upload-content-margin);background:var(--ivue-white-color);border-radius:var(--ivue-upload-content-radius);border:2px solid var(--ivue-default-color);color:var(--ivue-upload-content-color);cursor:pointer;-webkit-transition:all .3s cubic-bezier(.4,0,.2,1),color 1ms;transition:all .3s cubic-bezier(.4,0,.2,1),color 1ms}.ivue-upload-content:hover{border-color:var(--ivue-primary-color);color:var(--ivue-primary-color)}.ivue-upload-content .ivue-upload-content__icon{margin:0;color:currentColor;-webkit-transition:all .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1)}.ivue-upload-content__text{margin-top:5px;color:currentColor;font-weight:700;-webkit-transition:all .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1)}.ivue-upload-readonly:hover{border-color:var(--ivue-default-color);color:var(--ivue-upload-content-color)}.ivue-upload-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.ivue-upload-list-image{width:var(--ivue-upload-content-size);height:var(--ivue-upload-content-size);display:block;border-radius:var(--ivue-upload-content-radius);overflow:hidden}.ivue-upload-list-image__img{width:100%;height:100%}.ivue-upload-list-preview{position:relative}.ivue-upload-list-preview--image{position:absolute;top:0;bottom:0;left:0;right:0;z-index:12;opacity:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;color:var(--ivue-white-color);-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition)}.ivue-upload-list-preview:hover::after{opacity:1}.ivue-upload-list-preview:hover .ivue-upload-list-preview--image{opacity:1}.ivue-upload-list-preview::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);background-color:var(--ivue-upload-mask-color);z-index:10;pointer-events:none}.ivue-upload-list-preview-icon{font-size:var(--ivue-upload-loading-size);color:var(--ivue-white-color)}.ivue-upload-list-mask{position:absolute;top:0;bottom:0;left:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:var(--ivue-white-color);background-color:var(--ivue-upload-mask-color);z-index:5}.ivue-upload-list-mask__message{margin-top:6px;padding:0 4px;font-size:var(--ivue-font-small-size);line-height:14px}.ivue-upload-list-mask__icon{margin:0}.ivue-upload-list-mask .ivue-loading-mask{position:relative;background:0 0}.ivue-upload-list-mask .ivue-loading-spinner{position:relative;margin-top:0;top:0;width:var(--ivue-upload-loading-size);height:var(--ivue-upload-loading-size);color:var(--ivue-white-color)}.ivue-upload-list-mask .ivue-loading-spinner .circular{width:var(--ivue-upload-loading-size);height:var(--ivue-upload-loading-size)}.ivue-upload-list .ivue-upload-list-remove{position:absolute;top:0;right:0;font-size:var(--ivue-font-small-size);color:var(--ivue-white-color);margin:0;width:var(--ivue-upload-remove-size);height:var(--ivue-upload-remove-size);min-width:auto;background:var(--ivue-black-color);border-bottom-left-radius:50%;z-index:10}.ivue-upload-list-status{position:relative;margin:0 8px 8px 0;cursor:pointer;border-radius:8px;overflow:hidden}.ivue-upload-disabled{border-color:var(--ivue-disabled-color);color:var(--ivue-disabled-color);cursor:not-allowed}.ivue-upload-disabled:hover{border-color:var(--ivue-disabled-color);color:var(--ivue-disabled-color)}.ivue-upload-drag{position:relative;text-align:center;border:2px dashed var(--ivue-border-color);border-radius:var(--ivue-border-radius);background-color:var(--ivue-white-color);overflow:hidden;cursor:pointer;-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.ivue-upload-drag:hover{border:2px dashed var(--ivue-primary-color)}.ivue-upload-dragOver{border:2px dashed var(--ivue-primary-color)}