@arco-design/web-react/lib/Upload/style/index.css

Arco Design React UI Library.

.arco-upload{display:inline-block;max-width:100%}.arco-upload-type-picture-card{vertical-align:top}.arco-upload-drag{width:100%}.arco-upload-hide{display:none}.arco-upload-disabled .arco-upload-trigger-picture,.arco-upload-disabled .arco-upload-trigger-picture:hover{cursor:not-allowed;border-color:var(--color-neutral-4);background-color:var(--color-fill-1);color:var(--color-text-4)}.arco-upload-disabled .arco-upload-trigger-drag,.arco-upload-disabled .arco-upload-trigger-drag:hover{cursor:not-allowed;border-color:var(--color-text-4);background-color:var(--color-fill-1)}.arco-upload-disabled .arco-upload-trigger-drag .arco-icon-plus,.arco-upload-disabled .arco-upload-trigger-drag .arco-upload-trigger-drag-text,.arco-upload-disabled .arco-upload-trigger-drag:hover .arco-icon-plus,.arco-upload-disabled .arco-upload-trigger-drag:hover .arco-upload-trigger-drag-text{color:var(--color-text-4)}.arco-upload-disabled .arco-upload-trigger-tip{color:var(--color-text-4)}.arco-upload-trigger{cursor:pointer;display:inline-block;vertical-align:top;width:100%}.arco-upload-trigger-tip{color:var(--color-text-3);margin-top:4px;font-size:12px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.arco-upload-trigger-picture{min-width:80px;height:80px;color:var(--color-text-2);text-align:center;margin-bottom:0;background:var(--color-fill-2);border-radius:var(--border-radius-small);border:1px dashed var(--color-neutral-3);transition:all .1s cubic-bezier(0,0,1,1)}.arco-upload-trigger-picture:hover{border-color:var(--color-neutral-4);background-color:var(--color-fill-3);color:var(--color-text-2)}.arco-upload-trigger-picture:focus-visible{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-upload-trigger-picture-text{position:relative;top:50%;transform:translateY(-50%)}.arco-upload-trigger-drag{width:100%;border-radius:var(--border-radius-small);border:1px dashed var(--color-neutral-3);background-color:var(--color-fill-1);text-align:center;transition:all .2s ease;color:var(--color-text-1);padding:50px 0}.arco-upload-trigger-drag .arco-icon-plus{font-size:14px;margin-bottom:24px;color:var(--color-text-2)}.arco-upload-trigger-drag:hover{border-color:var(--color-neutral-4);background-color:var(--color-fill-3)}.arco-upload-trigger-drag:hover .arco-upload-trigger-drag-text{color:var(--color-text-1)}.arco-upload-trigger-drag:hover .arco-icon-plus{color:var(--color-text-2)}.arco-upload-trigger-drag:focus-visible{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-upload-trigger-drag-active{border-color:rgb(var(--primary-6));color:var(--color-text-1);background-color:var(--color-primary-light-1)}.arco-upload-trigger-drag-active .arco-upload-trigger-drag-text{color:var(--color-text-1)}.arco-upload-trigger-drag-active .arco-icon-plus{color:rgb(var(--primary-6))}.arco-upload-trigger-drag .arco-upload-trigger-tip{margin-top:0}.arco-upload-trigger-drag-text{color:var(--color-text-1);line-height:1.5;font-size:14px}.arco-upload-hide+.arco-upload-list .arco-upload-list-item:first-of-type{margin-top:0}.arco-upload-list{width:100%}.arco-upload-list-type-picture-list .arco-upload-list-item:first-of-type,.arco-upload-list-type-text .arco-upload-list-item:first-of-type{margin-top:24px}.arco-upload-list-file-icon{line-height:16px;font-size:16px;color:rgb(var(--primary-6));margin-right:12px}.arco-upload-list-preview-icon{cursor:pointer}.arco-upload-list-error-icon{cursor:pointer;color:rgb(var(--danger-6));font-size:14px;margin-left:4px}.arco-upload-list-success-icon{cursor:pointer;color:rgb(var(--success-6));font-size:14px;line-height:14px}.arco-upload-list-remove-icon{position:relative;cursor:pointer;font-size:14px}.arco-upload-list-cancel-icon,.arco-upload-list-start-icon{position:absolute;color:var(--color-white);transform:translateX(-50%) translateY(-50%);top:50%;left:50%;font-size:12px}.arco-upload-list-cancel-icon:focus-visible,.arco-upload-list-start-icon:focus-visible{color:rgb(var(--primary-6))}.arco-upload-list-reupload-icon{cursor:pointer;color:rgb(var(--primary-6));font-size:14px;transition:all .2s ease}.arco-upload-list-reupload-icon:active,.arco-upload-list-reupload-icon:hover{color:rgb(var(--primary-7))}.arco-upload-list-reupload-icon:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.arco-upload-list-status{position:relative;cursor:pointer;line-height:12px}.arco-upload-list-status:hover .arco-progress-circle-mask{stroke:rgba(var(--gray-10),.2)}.arco-upload-list-status:hover .arco-progress-circle-path{stroke:rgb(var(--primary-7))}.arco-upload-list-item-done .arco-upload-list-file-icon{color:rgb(var(--primary-6))}.arco-upload-list-item{box-sizing:border-box;padding-right:24px;margin-top:12px;position:relative}.arco-upload-list-item-operation{font-size:12px;position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--color-text-2)}.arco-upload-list-item-operation .arco-upload-list-remove-icon-hover:focus-visible::before{box-shadow:0 0 0 2px rgb(var(--primary-6))}.arco-upload-list-item-operation .arco-upload-list-remove-icon{font-size:inherit}.arco-upload-list-item-text{font-size:14px;display:flex;align-items:center;border-radius:var(--border-radius-small);width:100%;box-sizing:border-box;background-color:var(--color-fill-1);padding:8px 0;padding-left:12px;padding-right:10px;flex-wrap:nowrap}.arco-upload-list-item-text-content{flex:1;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-content:space-between;flex-wrap:nowrap;transition:background-color .1s cubic-bezier(0,0,1,1)}.arco-upload-list-item-text-thumbnail{height:40px;width:40px;margin-right:12px;flex-shrink:0}.arco-upload-list-item-text-thumbnail img{width:100%;height:100%}.arco-upload-list-item-text-name{white-space:nowrap;display:flex;overflow:hidden;flex-shrink:1;flex-grow:1;align-items:center;color:var(--color-text-1);font-size:14px;text-overflow:ellipsis;line-height:1.4286;margin-right:10px}.arco-upload-list-item-text-name-link{cursor:pointer;text-decoration:none;overflow:hidden;color:rgb(var(--link-6));text-overflow:ellipsis}.arco-upload-list-item-text-name-text{overflow:hidden;text-overflow:ellipsis}.arco-upload-list-item-done .arco-upload-list-status,.arco-upload-list-item-error .arco-upload-list-status{display:none}.arco-upload-list-type-text .arco-upload-list-item-error .arco-upload-list-item-text-name,.arco-upload-list-type-text .arco-upload-list-item-error .arco-upload-list-item-text-name-link{color:rgb(var(--danger-6))}.arco-upload-list.arco-upload-list-type-picture-card{display:inline;vertical-align:top}.arco-upload-list.arco-upload-list-type-picture-card .arco-upload-list-status{top:50%;transform:translateY(-50%);margin-left:0}.arco-upload-list-type-picture-card .arco-upload-list-item{display:inline-block;vertical-align:top;margin-top:0;padding-right:0;margin-right:8px;margin-bottom:8px;overflow:hidden;transition:all .2s cubic-bezier(.34,.69,.1,1)}.arco-upload-list-type-picture-card .arco-upload-list-item-error .arco-upload-list-item-picture-mask{opacity:1}.arco-upload-list-item-picture{width:80px;height:80px;position:relative;overflow:hidden;border-radius:var(--border-radius-small);box-sizing:border-box;text-align:center;vertical-align:top;background-color:var(--color-fill-2)}.arco-upload-list-item-picture img{width:100%;height:100%}.arco-upload-list-item-picture-mask{cursor:pointer;position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);color:var(--color-white);font-size:16px;line-height:80px;opacity:0;transition:opacity .1s cubic-bezier(0,0,1,1)}.arco-upload-list-item-picture-operation{font-size:14px}.arco-upload-list-item-picture-operation .arco-upload-list-reupload-icon{color:var(--color-white)}.arco-upload-list-item-picture-operation .arco-upload-list-preview-icon+.arco-upload-list-remove-icon,.arco-upload-list-item-picture-operation .arco-upload-list-reupload-icon+.arco-upload-list-remove-icon{margin-left:20px}.arco-upload-list-item-picture-operation .arco-upload-list-preview-icon:focus-visible,.arco-upload-list-item-picture-operation .arco-upload-list-remove-icon:focus-visible,.arco-upload-list-item-picture-operation .arco-upload-list-reupload-icon:focus-visible{border-radius:2px;box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-upload-list-item-picture-error-tip .arco-upload-list-item-picture-operation{opacity:0;width:0;height:0}.arco-upload-list-item-picture-error-tip .arco-upload-list-error-icon{font-size:26px;color:var(--color-white)}.arco-upload-list-item-picture-mask:focus-within,.arco-upload-list-item-picture-mask:focus-within .arco-upload-list-item-picture-operation,.arco-upload-list-item-picture-mask:hover,.arco-upload-list-item-picture-mask:hover .arco-upload-list-item-picture-operation{opacity:1;display:block}.arco-upload-list-item-picture-mask:focus-within .arco-upload-list-item-picture-error-tip,.arco-upload-list-item-picture-mask:hover .arco-upload-list-item-picture-error-tip{display:none}.arco-upload-list-type-picture-list .arco-upload-list-item-text{padding-top:8px;padding-bottom:8px}.arco-upload-list-type-picture-list .arco-upload-list-item-error .arco-upload-list-item-text{background-color:var(--color-danger-light-1)}.arco-upload-list-type-picture-list .arco-upload-list-item-error .arco-upload-list-item-text-name,.arco-upload-list-type-picture-list .arco-upload-list-item-error .arco-upload-list-item-text-name-link{color:rgb(var(--danger-6))}.arco-upload-slide-up-enter{opacity:0}.arco-upload-slide-up-enter-active{opacity:1;transition:opacity .2s cubic-bezier(.34,.69,.1,1)}.arco-upload-slide-up-exit{opacity:1}.arco-upload-slide-up-exit-active{opacity:0;overflow:hidden;margin:0;transition:opacity .1s cubic-bezier(0,0,1,1),height .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s}.arco-upload-list-item.arco-upload-slide-inline-enter{opacity:0}.arco-upload-list-item.arco-upload-slide-inline-enter-active{opacity:1;transition:opacity .2s cubic-bezier(0,0,1,1)}.arco-upload-list-item.arco-upload-slide-inline-exit{opacity:1}.arco-upload-list-item.arco-upload-slide-inline-exit-active{opacity:0;overflow:hidden;margin:0;transition:opacity .1s cubic-bezier(0,0,1,1),width .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s}.arco-upload-rtl{direction:rtl}.arco-upload-list-rtl{direction:rtl}.arco-upload-list-rtl .arco-upload-list-file-icon{margin-right:0;margin-left:12px}.arco-upload-list-rtl .arco-upload-list-error-icon{margin-left:0;margin-right:4px}.arco-upload-list-rtl .arco-upload-list-item{padding-right:0;padding-left:24px}.arco-upload-list-rtl .arco-upload-list-item-operation{right:initial;left:0}.arco-upload-list-rtl .arco-upload-list-item-text{padding-right:12px;padding-left:10px}.arco-upload-list-rtl .arco-upload-list-item-text-thumbnail{margin-right:0;margin-left:12px}.arco-upload-list-rtl .arco-upload-list-item-text-name{margin-right:0;margin-left:10px}.arco-upload-list-rtl .arco-upload-list-item-picture-operation .arco-upload-list-preview-icon+.arco-upload-list-remove-icon,.arco-upload-list-rtl .arco-upload-list-item-picture-operation .arco-upload-list-reupload-icon+.arco-upload-list-remove-icon{margin-left:0;margin-right:20px}.arco-upload-list-rtl.arco-upload-list-type-picture-card .arco-upload-list-status{margin-left:initial;margin-right:0}.arco-upload-list-rtl.arco-upload-list-type-picture-card .arco-upload-list-item{margin-right:0;padding-left:0;margin-left:8px}