@tinyuploader/react/dist/style.css

## Install

.tiny-uploader-drop{display:flex;align-items:center;justify-content:center;flex-direction:column;width:350px;height:150px;border:1px dashed var(--tiny-border-color);font-size:14px;border-radius:4px;cursor:pointer;background-color:var(--tiny-fill-color-extra-light)}.tiny-uploader-drop .tiny-uploader-drop_text em{color:var(--tiny-color-primary);font-style:normal}.tiny-uploader-drop .tiny-uploader-drop_hint{color:var(--tiny-text-color-secondary);font-size:var(--tiny-font-size-small);text-align:center}.tiny-uploader-drop:hover{border:1px dashed var(--tiny-color-primary)}.tiny-uploader-button{cursor:pointer;font-size:14px;border-radius:5px;border:1px solid var(--tiny-border-color-dark);padding:3px var(--tiny-font-size-base)}.tiny-uploader-button:hover{color:var(--tiny-color-primary);border:1px solid var(--tiny-color-primary)}.tiny-uploader-tip{color:var(--tiny-text-color-secondary);font-size:var(--tiny-font-size-extra-small);margin-top:6px;margin-left:2px}.tiny-uploader-file-list{margin-top:6px}.tiny-uploader-info-wrap{position:relative;display:flex;justify-content:space-between;align-items:center;height:22px;margin:6px 0;padding:0 6px;color:#606266;font-size:14px;border-radius:2px;z-index:0}.tiny-uploader-info-wrap:hover{background-color:var(--tiny-fill-color-lighter)}.tiny-uploader-info-wrap:hover .tiny-uploader-filename{color:var(--tiny-color-primary)}.tiny-uploader-info-wrap:hover .tiny-uploader-name-fail{color:var(--tiny-color-error)}.tiny-uploader-filename-container{flex:1;width:0;display:flex;align-items:center;margin-right:6px}.tiny-uploader-filename{width:100%;overflow:hidden;text-overflow:ellipsis;word-wrap:normal;white-space:nowrap;cursor:pointer}.tiny-uploader-name-fail{color:var(--tiny-color-error)}.tiny-uploader-size{font-size:var(--tiny-font-size-small)}.tiny-uploader-error-meessage{color:var(--tiny-color-error);font-size:var(--tiny-font-size-extra-small)}.tiny-uploader-file-icon{margin-right:4px}.tiny-uploader-status{display:flex;justify-content:flex-end;align-items:center;margin-right:6px;height:19px}.tiny-uploader-progress-wrap{position:absolute;top:22px;left:2px;width:100%;height:2px;border-radius:2px;z-index:-1;background-color:var(--tiny-fill-color-light);opacity:.8}.tiny-uploader-progress{height:2px;border-radius:2px;transition:width 1s}.tiny-uploader-percent{display:flex;align-items:center;height:100%;text-align:right}.tiny-uploader-size{width:70px;text-align:left;margin-left:8px;color:var(--tiny-text-color-secondary)}.tiny-uploader--reading{background-color:var(--tiny-color-reading)}.tiny-uploader--uploading{background-color:var(--tiny-color-primary)}.tiny-uploader--success{background-color:var(--tiny-color-success)}.tiny-uploader--fail{background-color:var(--tiny-color-error)}.tiny-uploader-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:8px;cursor:pointer}.tiny-uploader-action{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-left:8px;overflow:hidden}.tiny-uploader-icon-upload path{fill:var(--tiny-color-primary)}.tiny-uploader-icon--loading{animation:tiny-circle infinite .75s linear;margin-right:4px}@keyframes tiny-circle{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--tiny-color-primary: #409eff;--tiny-color-success: #67c23a;--tiny-color-warning: #e6a23c;--tiny-color-error: #ff4d4f;--tiny-bg-color: #f4f4f5}:root{--tiny-font-size-extra-large: 20px;--tiny-font-size-large: 18px;--tiny-font-size-medium: 16px;--tiny-font-size-base: 14px;--tiny-font-size-small: 13px;--tiny-font-size-extra-small: 12px}:root{--tiny-text-color-primary: #303133;--tiny-text-color-regular: #606266;--tiny-text-color-secondary: #909399;--tiny-text-color-placeholder: #a8abb2;--tiny-text-color-disabled: #c0c4cc}:root{--tiny-border-color: #dcdfe6;--tiny-border-color-light: #e4e7ed;--tiny-border-color-lighter: #ebeef5;--tiny-border-color-extra-light: #f2f6fc;--tiny-border-color-dark: #d4d7de;--tiny-border-color-darker: #cdd0d6}:root{--tiny-fill-color: #f0f2f5;--tiny-fill-color-light: #f5f7fa;--tiny-fill-color-lighter: #fafafa;--tiny-fill-color-extra-light: #fafcff;--tiny-fill-color-dark: #ebedf0;--tiny-fill-color-darker: #e6e8eb;--tiny-fill-color-blank: #ffffff}