@saberlayer/vue-file-uploader
Version:
A file uploader component for Vue 2.x and Vue 3.x
2 lines • 2.27 kB
CSS
.vue-file-uploader{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.uploader-trigger{align-items:center;background:#fafafa;border:2px dashed #d9d9d9;border-radius:8px;cursor:pointer;display:flex;justify-content:center;min-height:120px;position:relative;transition:all .3s;width:100%}.uploader-trigger:hover{background:#f0f7ff;border-color:#1890ff}.uploader-placeholder{align-items:center;color:#666;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:120px;padding:16px}.uploader-icon{color:#40a9ff;font-size:28px;margin-bottom:8px}.uploader-text{color:#666;font-size:14px}.uploader-list{margin-top:16px}.uploader-file{align-items:center;background:#fff;border:1px solid #f0f0f0;border-radius:4px;display:flex;margin-bottom:8px;padding:12px;position:relative;transition:all .3s}.uploader-file:hover{background:#f9f9f9}.file-info{align-items:center;display:flex;flex:1;gap:8px;min-width:0}.file-name{color:#333;flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:#999;font-size:12px;white-space:nowrap}.file-status{background:#f0f0f0;border-radius:2px;height:4px;margin:0 16px;overflow:hidden;position:relative;width:120px}.progress-bar{background:#1890ff;height:100%;left:0;position:absolute;top:0;transition:width .3s ease}.success{color:#52c41a}.error,.success{align-items:center;display:flex;font-size:12px;height:20px;justify-content:center;width:20px}.error{color:#ff4d4f}.delete-btn{background:transparent;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;transition:all .3s}.delete-btn:hover{color:#ff4d4f}.uploader-trigger.dragging{background:#f0f7ff;border-color:#1890ff}.uploader-trigger.disabled{background:#f5f5f5;border-color:#d9d9d9;cursor:not-allowed;opacity:.7}.uploader-trigger.disabled *{pointer-events:none}.file-status-indicator{align-items:center;display:flex;margin-right:8px}.file-status-indicator .icon{font-size:16px}.file-status-indicator .uploading{animation:spin 1s linear infinite;color:#1890ff}.file-status-indicator .success{color:#52c41a}.file-status-indicator .error{color:#ff4d4f}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=vue-file-uploader.css.map */