vue-amazing-ui/lib/upload/Upload.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.upload-wrap[data-v-b9505e06]{display:inline-block;width:100%}.upload-wrap .upload-item-panel[data-v-b9505e06]{position:relative;display:inline-block;width:100px;height:100px}.upload-wrap .upload-item-panel .upload-item[data-v-b9505e06]{display:flex;align-items:center;justify-content:center;text-align:center;width:100px;height:100px;border-radius:8px;border:1px dashed #d9d9d9;background-color:#00000005;cursor:pointer;transition:border-color .3s}.upload-wrap .upload-item-panel .upload-item[data-v-b9505e06]:hover{border-color:var(--upload-primary-color)}.upload-wrap .upload-item-panel .upload-item .plus-svg[data-v-b9505e06]{display:inline-block;font-size:14px;color:#000000e0;fill:currentColor}.upload-wrap .upload-item-panel .upload-item .upload-tip[data-v-b9505e06]{margin-top:8px;font-size:14px;color:#000000e0;line-height:1.57142857}.upload-wrap .upload-item-panel .upload-disabled[data-v-b9505e06]{cursor:not-allowed}.upload-wrap .upload-item-panel .upload-disabled[data-v-b9505e06]:hover{border-color:#d9d9d9}.upload-wrap .upload-item-panel .file-uploading[data-v-b9505e06]{width:100px;height:100px;padding:8px;border-radius:8px;border:1px dashed #d9d9d9;background-color:#00000005;display:flex;align-items:center;text-align:center}.upload-wrap .upload-item-panel .file-uploading .spin-uploading[data-v-b9505e06]{display:inline-block}.upload-wrap .upload-item-panel .file-uploading .spin-uploading[data-v-b9505e06] .spin-tip{max-width:82px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.upload-wrap .upload-item-panel .file-preview[data-v-b9505e06]{position:relative;width:100px;height:100px;border-radius:8px;padding:8px;border:1px solid #d9d9d9;display:flex;align-items:center;text-align:center}.upload-wrap .upload-item-panel .file-preview .file-svg[data-v-b9505e06]{display:inline-block;width:100%;height:60px;color:var(--upload-primary-color);fill:currentColor}.upload-wrap .upload-item-panel .file-preview .file-mask[data-v-b9505e06]{position:absolute;inset:0;margin:8px;display:flex;align-items:center;justify-content:center;background:#00000080;opacity:0;pointer-events:none;transition:opacity .3s}.upload-wrap .upload-item-panel .file-preview .file-mask .file-icon[data-v-b9505e06]{display:inline-block;height:16px;margin:0 4px;cursor:pointer}.upload-wrap .upload-item-panel .file-preview .file-mask .file-icon .icon-svg[data-v-b9505e06]{display:inline-block;font-size:16px;color:#ffffffa6;fill:currentColor;cursor:pointer;transition:color .3s}.upload-wrap .upload-item-panel .file-preview .file-mask .file-icon .icon-svg[data-v-b9505e06]:hover{color:#fff}.upload-wrap .upload-item-panel .file-preview:hover .file-mask[data-v-b9505e06]{opacity:1;pointer-events:auto}