vexip-ui/css/upload.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-upload-vars{--vxp-upload-color-success:var(--vxp-color-success-base);--vxp-upload-color-fail:var(--vxp-color-error-base);--vxp-upload-color-loading:var(--vxp-content-color-disabled);--vxp-upload-panel-bg-color:var(--vxp-fill-color-base);--vxp-upload-panel-b-width:var(--vxp-border-width);--vxp-upload-panel-b-style:dashed;--vxp-upload-panel-b-color:var(--vxp-border-color-base);--vxp-upload-panel-b-color-hover:var(--vxp-color-primary-base);--vxp-upload-panel-b-color-focus:var(--vxp-upload-panel-b-color-hover);--vxp-upload-panel-b-color-over:var(--vxp-color-primary-base);--vxp-upload-panel-b-color-disabled:var(--vxp-border-color-light-2);--vxp-upload-panel-radius:var(--vxp-radius-base);--vxp-upload-cloud-color:var(--vxp-content-color-secondary);--vxp-upload-cloud-color-over:var(--vxp-color-primary-base);--vxp-upload-cloud-color-disabled:var(--vxp-content-color-disabled);--vxp-upload-file-bg-color:transparent;--vxp-upload-file-bg-color-hover:var(--vxp-fill-color-hover);--vxp-upload-file-b-color:var(--vxp-border-color-base);--vxp-upload-file-b-color-success:var(--vxp-color-success-base);--vxp-upload-file-b-color-fail:var(--vxp-color-error-base);--vxp-upload-file-radius:var(--vxp-radius-base);--vxp-upload-mask-bg-color:var(--vxp-color-black);--vxp-upload-mask-opacity:45%;--vxp-upload-action-color:var(--vxp-content-color-third);--vxp-upload-action-color-hover:var(--vxp-content-color-primary);--vxp-upload-action-color-disabled:var(--vxp-content-color-disabled);--vxp-upload-thumb-color:var(--vxp-content-color-secondary);--vxp-upload-thumb-size:70px;--vxp-upload-thumb-action-color:rgba(255, 255, 255, 0.7);--vxp-upload-thumb-action-color-hover:rgb(255, 255, 255);--vxp-upload-thumb-action-color-disabled:rgba(255, 255, 255, 0.3);--vxp-upload-card-thumb-size:56px;--vxp-upload-card-action-color:var(--vxp-content-color-secondary);--vxp-upload-card-action-color-hover:var(--vxp-color-primary-base);--vxp-upload-card-action-color-disabled:var(--vxp-content-color-disabled);--vxp-upload-percentage-color:var(--vxp-content-color-secondary)}.vxp-upload{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;flex-direction:column;align-items:flex-start}.vxp-upload,.vxp-upload *,.vxp-upload ::after,.vxp-upload ::before{box-sizing:border-box}.vxp-upload--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-upload--to-add{flex-direction:column-reverse}.vxp-upload--block{width:100%}.vxp-upload--success{--vxp-upload-panel-b-color:var(--vxp-color-success-opacity-3);--vxp-upload-panel-b-color-hover:var(--vxp-color-success-base);--vxp-upload-panel-b-color-over:var(--vxp-color-success-base);--vxp-upload-cloud-color:var(--vxp-color-success-opacity-2);--vxp-upload-cloud-color-over:var(--vxp-color-success-base)}.vxp-upload--error{--vxp-upload-panel-b-color:var(--vxp-color-error-opacity-3);--vxp-upload-panel-b-color-hover:var(--vxp-color-error-base);--vxp-upload-panel-b-color-over:var(--vxp-color-error-base);--vxp-upload-cloud-color:var(--vxp-color-error-opacity-2);--vxp-upload-cloud-color-over:var(--vxp-color-error-base)}.vxp-upload--warning{--vxp-upload-panel-b-color:var(--vxp-color-warning-opacity-3);--vxp-upload-panel-b-color-hover:var(--vxp-color-warning-base);--vxp-upload-panel-b-color-over:var(--vxp-color-warning-base);--vxp-upload-cloud-color:var(--vxp-color-warning-opacity-2);--vxp-upload-cloud-color-over:var(--vxp-color-warning-base)}.vxp-upload__input{display:none}.vxp-upload__control{display:flex;flex-direction:column}.vxp-upload--drag,.vxp-upload--drag .vxp-upload__control{width:100%}.vxp-upload__image-control{position:relative;display:inline-flex;align-items:center;width:auto;padding:6px;margin-inline-end:6px;margin-bottom:6px;overflow:hidden;vertical-align:middle;cursor:pointer;border:var(--vxp-upload-panel-b-width) var(--vxp-upload-panel-b-style) var(--vxp-upload-panel-b-color);border-radius:var(--vxp-upload-file-radius);outline:0;transition:var(--vxp-transition-color),var(--vxp-transition-border)}.vxp-upload__image-control--drag-over,.vxp-upload__image-control:hover{border-color:var(--vxp-upload-panel-b-color-hover)}.vxp-upload__image-control:focus,.vxp-upload__image-control:focus-within{border-color:var(--vxp-upload-panel-b-color-focus)}.vxp-upload__image-control--disabled{color:var(--vxp-content-color-disabled);cursor:not-allowed}.vxp-upload__image-control--disabled,.vxp-upload__image-control--disabled:focus,.vxp-upload__image-control--disabled:hover{border-color:var(--vxp-upload-panel-b-color-disabled)}.vxp-upload__image-action{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--vxp-upload-thumb-size);height:var(--vxp-upload-thumb-size);color:var(--vxp-upload-thumb-color);cursor:inherit}.vxp-upload__image-action--disabled{color:var(--vxp-content-color-disabled)}.vxp-upload__drag-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:20px;overflow:hidden;cursor:pointer;background-color:var(--vxp-upload-panel-bg-color);border:var(--vxp-upload-panel-b-width) var(--vxp-upload-panel-b-style) var(--vxp-upload-panel-b-color);border-radius:var(--vxp-upload-panel-radius);outline:0;transition:var(--vxp-transition-color),var(--vxp-transition-border)}.vxp-upload__drag-panel:hover{border-color:var(--vxp-upload-panel-b-color-hover)}.vxp-upload__drag-panel:focus{border-color:var(--vxp-upload-panel-b-color-focus)}.vxp-upload__drag-panel--disabled{color:var(--vxp-content-color-disabled);cursor:not-allowed}.vxp-upload__drag-panel--disabled,.vxp-upload__drag-panel--disabled:focus,.vxp-upload__drag-panel--disabled:hover{border-color:var(--vxp-upload-panel-b-color-disabled)}.vxp-upload--drag-only .vxp-upload__drag-panel{cursor:auto}.vxp-upload__control--drag-over .vxp-upload__drag-panel{border-color:var(--vxp-upload-panel-b-color-over)}.vxp-upload__control--drag-over .vxp-upload__drag-panel--disabled{border-color:var(--vxp-upload-panel-b-color-disabled)}.vxp-upload__cloud{color:var(--vxp-upload-cloud-color);transition:var(--vxp-transition-color)}.vxp-upload__cloud--disabled{color:var(--vxp-upload-cloud-color-disabled)}.vxp-upload__control--drag-over .vxp-upload__cloud,.vxp-upload__image-control--drag-over .vxp-upload__cloud{color:var(--vxp-upload-cloud-color-over)}.vxp-upload__control--drag-over .vxp-upload__cloud--disabled,.vxp-upload__image-control--drag-over .vxp-upload__cloud--disabled{color:var(--vxp-upload-cloud-color-disabled)}.vxp-upload__loading-icon{pointer-events:none;transition:var(--vxp-transition-opacity)}.vxp-upload__tip{margin:4px 0}.vxp-upload__drag-panel .vxp-upload__tip{margin:8px 0 4px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-upload__files{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:flex;flex-wrap:wrap;width:100%;padding:0;margin:0}.vxp-upload__files,.vxp-upload__files *,.vxp-upload__files ::after,.vxp-upload__files ::before{box-sizing:border-box}.vxp-upload__files--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-upload--image .vxp-upload__files{margin-bottom:-8px}.vxp-upload--has-file:not(.vxp-upload--image) .vxp-upload__files{margin:0;margin-top:8px}.vxp-upload--to-add:not(.vxp-upload--image).vxp-upload--has-file .vxp-upload__files{margin:0;margin-bottom:8px}.vxp-upload__file{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;align-items:center;vertical-align:middle;list-style:none;border-radius:var(--vxp-upload-file-radius);transition:var(--vxp-transition-transform),var(--vxp-transition-opacity)}.vxp-upload__file,.vxp-upload__file *,.vxp-upload__file ::after,.vxp-upload__file ::before{box-sizing:border-box}.vxp-upload__file--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-upload__file--name{justify-content:space-between;width:100%;padding:3px 6px;margin-bottom:3px;background-color:var(--vxp-upload-file-bg-color);transition:var(--vxp-transition-background)}.vxp-upload__file--name:focus,.vxp-upload__file--name:focus-within,.vxp-upload__file--name:hover{background-color:var(--vxp-upload-file-bg-color-hover)}.vxp-upload__file--name:last-child{margin-bottom:0}.vxp-upload__file--card,.vxp-upload__file--thumbnail{padding:6px;margin-bottom:6px;border:var(--vxp-border-shape) var(--vxp-upload-file-b-color);transition:var(--vxp-transition-border)}.vxp-upload__file--thumbnail{margin-inline-end:6px}.vxp-upload__file--card.vxp-upload__file--success,.vxp-upload__file--thumbnail.vxp-upload__file--success{border-color:var(--vxp-upload-file-b-color-success)}.vxp-upload__file--card.vxp-upload__file--fail,.vxp-upload__file--thumbnail.vxp-upload__file--fail{border-color:var(--vxp-upload-file-b-color-fail)}.vxp-upload__file--card{width:100%}.vxp-upload__filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:var(--vxp-transition-color)}.vxp-upload__file--success .vxp-upload__filename{color:var(--vxp-upload-color-success)}.vxp-upload__file--fail .vxp-upload__filename{color:var(--vxp-upload-color-fail)}.vxp-upload__label{display:flex;align-items:center;margin-inline-end:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-upload__card{position:relative;display:flex;align-items:center}.vxp-upload__card *{flex-shrink:0}.vxp-upload__file--thumbnail .vxp-upload__card{justify-content:center}.vxp-upload__file--card .vxp-upload__card{width:100%}.vxp-upload__thumbnail{display:flex;align-items:center;justify-content:center;color:var(--vxp-upload-thumb-color)}.vxp-upload__file--thumbnail .vxp-upload__thumbnail{width:var(--vxp-upload-thumb-size);height:var(--vxp-upload-thumb-size)}.vxp-upload__file--card .vxp-upload__thumbnail{width:var(--vxp-upload-card-thumb-size);height:var(--vxp-upload-card-thumb-size);margin-inline-end:14px}.vxp-upload__info{display:flex;flex-direction:column;justify-content:center;width:calc(100% - var(--vxp-upload-card-thumb-size) - 14px);padding-inline-end:calc(var(--vxp-upload-card-thumb-size) + 14px)}.vxp-upload__file--card .vxp-upload__filename{width:100%}.vxp-upload__image{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:cover;object-fit:cover}.vxp-upload__actions{position:relative;display:flex;align-items:center;justify-content:center}.vxp-upload__file--thumbnail .vxp-upload__actions{position:absolute;inset-inline-start:0;top:0;width:100%;height:100%;opacity:0;transition:var(--vxp-transition-opacity)}.vxp-upload__file--thumbnail .vxp-upload__mask{position:absolute;inset-inline-start:0;top:0;width:100%;height:100%;background-color:var(--vxp-upload-mask-bg-color);opacity:var(--vxp-upload-mask-opacity)}.vxp-upload__card:focus .vxp-upload__actions,.vxp-upload__card:focus-within .vxp-upload__actions,.vxp-upload__card:hover .vxp-upload__actions{opacity:100%}.vxp-upload__file--card .vxp-upload__actions{position:absolute;inset-inline-end:0}.vxp-upload__action{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0;position:relative;margin:0 4px}.vxp-upload__action--disabled{color:var(--vxp-upload-action-color-disabled);cursor:not-allowed}.vxp-upload__file--thumbnail .vxp-upload__action{color:var(--vxp-upload-thumb-action-color)}.vxp-upload__file--thumbnail .vxp-upload__action:focus,.vxp-upload__file--thumbnail .vxp-upload__action:hover{color:var(--vxp-upload-thumb-action-color-hover)}.vxp-upload__file--thumbnail .vxp-upload__action--disabled,.vxp-upload__file--thumbnail .vxp-upload__action--disabled:focus,.vxp-upload__file--thumbnail .vxp-upload__action--disabled:hover{color:var(--vxp-upload-thumb-action-color-disabled)}.vxp-upload__file--card .vxp-upload__action{color:var(--vxp-upload-card-action-color)}.vxp-upload__file--card .vxp-upload__action:focus,.vxp-upload__file--card .vxp-upload__action:hover{color:var(--vxp-upload-card-action-color-hover)}.vxp-upload__file--card .vxp-upload__action--disabled,.vxp-upload__file--card .vxp-upload__action--disabled:focus,.vxp-upload__file--card .vxp-upload__action--disabled:hover{color:var(--vxp-upload-card-action-color-disabled)}.vxp-upload__icon{display:flex;align-items:center;justify-content:center;transition:var(--vxp-transition-color)}.vxp-upload__file-icon{width:16px;margin-inline-end:4px}.vxp-upload__close,.vxp-upload__fail,.vxp-upload__loading,.vxp-upload__success{width:14px}.vxp-upload__close{padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;outline:0;position:absolute;inset-inline-end:0}.vxp-upload__close:focus,.vxp-upload__close:hover{color:var(--vxp-upload-action-color-hover)}.vxp-upload__close,.vxp-upload__file:hover .vxp-upload__fail,.vxp-upload__file:hover .vxp-upload__loading,.vxp-upload__file:hover .vxp-upload__success{color:transparent}.vxp-upload__file:hover .vxp-upload__close{color:var(--vxp-upload-action-color)}.vxp-upload__file:hover .vxp-upload__close:focus,.vxp-upload__file:hover .vxp-upload__close:hover{color:var(--vxp-upload-action-color-hover)}.vxp-upload__success{color:var(--vxp-upload-color-success)}.vxp-upload__fail{color:var(--vxp-upload-color-fail)}.vxp-upload__loading{color:var(--vxp-upload-color-loading)}.vxp-upload__progress{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-upload__file--name .vxp-upload__progress{position:absolute;inset-inline:6px;bottom:0}.vxp-upload__file--thumbnail .vxp-upload__progress{flex-direction:column;width:100%;height:100%;padding:6px}.vxp-upload__file--card .vxp-upload__progress{padding-top:4px}.vxp-upload__percentage{color:var(--vxp-upload-percentage-color)}