@opentiny/vue-theme/upload-list/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-file-upload{--tv-UploadList-item-font-size:var(--tv-font-size-default, 14px);--tv-UploadList-item-text-color:var(--tv-color-text-secondary, #595959);--tv-UploadList-item-cancel-text-color:var(--tv-color-text-link, #1476ff);--tv-UploadList-item-cancel-text-color-hover:var(--tv-color-text-link-hover, #1476ff);--tv-UploadList-item-border-radius:var(--tv-border-radius-lg, 8px);--tv-UploadList-item-hover-background-color:var(--tv-color-bg-hover, #f5f5f5);--tv-UploadList-item-hover-text-color:var(--tv-color-text-secondary, #595959);--tv-UploadList-item-name-icon-color:var(--tv-color-icon-control, #191919);--tv-UploadList-item-name-icon-font-size:var(--tv-icon-size, 16px);--tv-UploadList-svg-close-icon-color:var(--tv-color-icon-control, #191919);--tv-UploadList-svg-close-hover-icon-color:var(--tv-color-icon-hover, #191919);--tv-UploadList-bg-color:var(--tv-color-bg, #f5f5f5);--tv-UploadList-bg-color-hover:var(--tv-color-bg-hover-secondary, #ffffff);--tv-UploadList-svg-icon-font-size:var(--tv-icon-size, 16px);--tv-UploadList-successful-icon-font-size:var(--tv-font-size-default, 14px);--tv-UploadList-picture-card-item-border-color:var(--tv-color-border, #c2c2c2);--tv-UploadList-picture-card-item-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-UploadList-picture-card-item-bg-color-hover:var(--tv-color-bg-mask, rgba(0, 0, 0, 0.2));--tv-UploadList-picture-card-item-icon-color:var(--tv-color-icon-inverse, #ffffff);--tv-UploadList-successful-status-bg-color:var(--tv-color-success-bg, #5cb300);--tv-UploadList-picture-card-width:100px;--tv-UploadList-picture-card-height:100px;--tv-UploadList-picture-card-progress-size:68px;--tv-UploadList-item-line-height:var(--tv-line-height-number, 1.5);--tv-UploadList-item-margin-top:var(--tv-space-md, 8px);--tv-UploadList-item-fail-text-color:var(--tv-color-error-text, #f23030);--tv-UploadList-item-fail-bg-color:var(--tv-color-error-bg-light, #fce3e1)}.tiny-file-upload.tiny-tooltip{margin-bottom:7px}.tiny-upload-list{margin:0;padding:0;list-style:none}.tiny-upload-list__wrapper{display:inline}.tiny-upload-list a:hover{color:var(--tv-UploadList-item-hover-text-color);text-decoration:none}.tiny-upload-list--text li:first-of-type>.tiny-upload-list__item{margin-top:calc(var(--tv-UploadList-item-margin-top) + 4px)}.tiny-upload-list--text li:not(:first-of-type)>.tiny-upload-list__item{margin-top:var(--tv-UploadList-item-margin-top)}.tiny-upload-list--text li:last-of-type{margin-bottom:8px}.tiny-upload-list--text li+li .tiny-upload-list__item.is-downloading,.tiny-upload-list--text li+li .tiny-upload-list__item.is-uploading{margin-bottom:14px}.tiny-upload-list__item.is-fail .tiny-upload-list__item-name{color:var(--tv-UploadList-item-fail-text-color)}.tiny-upload-list__item.is-fail .tiny-upload-list__item-name .tiny-svg{fill:var(--tv-UploadList-item-fail-text-color)}.tiny-upload-list__item{-webkit-transition:all .5s cubic-bezier(.55,0,.1,1);transition:all .5s cubic-bezier(.55,0,.1,1);font-size:var(--tv-UploadList-item-font-size);color:var(--tv-UploadList-item-text-color);line-height:var(--tv-UploadList-item-line-height);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--tv-UploadList-item-border-radius);width:100%;outline:0}.tiny-upload-list__item:hover{background-color:var(--tv-UploadList-item-hover-background-color)}.tiny-upload-list__item:hover .tiny-svg.icon-close,.tiny-upload-list__item:hover .tiny-svg.icon-refres{display:inline-block}.tiny-upload-list__item:hover .tiny-progress__text{display:none}.tiny-upload-list__item.is-success .tiny-upload-list__item-status-label{display:block}.tiny-upload-list__item.is-success .tiny-upload-list__item-name:focus,.tiny-upload-list__item.is-success .tiny-upload-list__item-name:hover{color:var(--tv-UploadList-item-hover-text-color);cursor:pointer;text-decoration:none}.tiny-upload-list__item.is-success:focus:not(:hover) .tiny-icon-close-tip{display:inline-block}.tiny-upload-list__item.is-success:active,.tiny-upload-list__item.is-success:not(.focusing):focus{outline-width:0}.tiny-upload-list__item.is-success:active .tiny-icon-close-tip,.tiny-upload-list__item.is-success:focus .tiny-upload-list__item-status-label,.tiny-upload-list__item.is-success:hover .tiny-upload-list__item-status-label,.tiny-upload-list__item.is-success:not(.focusing):focus .tiny-icon-close-tip{display:none}.tiny-upload-list__item.is-disabled .tiny-upload-list__item:hover .tiny-upload-list__item-status-label{display:block}.tiny-upload-list__item.isEdm .tiny-upload-list__item-name{display:inline-block}.tiny-upload-list__item.isEdm .tiny-upload-list__item-name.isFail{color:red}.tiny-upload-list__item.isEdm .tiny-upload-list__item-edminfo{margin-right:46px}.tiny-upload-list__item.isEdm .tiny-upload-list__item-status-label{right:16px}.tiny-upload-list__item.isEdm:not(.showUpdate) .icon-refres{display:none}.tiny-upload-list__item.isEdm:not(.showDel) .icon-close{display:none}.tiny-upload-list__item.isEdm.showUpdate .icon-refres{right:16px}.tiny-upload-list__item.isEdm.showDel .icon-close{right:16px}.tiny-upload-list__item.isEdm.showUpdate.showDel .icon-refres{right:28px}.tiny-upload-list__item.isEdm.showUpdate.showDel .icon-close{right:8px}.tiny-upload-list__item.isEdm:not(.showUpdate):not(.showDel) .tiny-upload-list__item-status-label{display:block}.tiny-upload-list__item .tiny-progress{position:absolute;top:26px;width:100%}.tiny-upload-list__item .tiny-progress__text{position:absolute;right:0;top:-13px}.tiny-upload-list__item .tiny-progress-bar{margin-right:0;padding-right:0}.tiny-upload-list__item.is-fail>.tiny-upload-list__item-actions>.tiny-upload-list__item-delete>.tiny-svg.tiny-svg-size.icon-delete{fill:var(--tv-UploadList-svg-close-icon-color)}.tiny-upload-list__item.is-fail>.tiny-upload-list__item-actions>.tiny-upload-list__item-delete>.tiny-svg.tiny-svg-size.icon-delete:hover{fill:var(--tv-UploadList-svg-close-hover-icon-color)}.tiny-upload-list__item .tiny-svg.icon-successful{font-size:var(--tv-UploadList-successful-icon-font-size);fill:var(--tv-UploadList-successful-status-bg-color)}.tiny-upload-list__item .tiny-svg.icon-close{right:8px}.tiny-upload-list__item .tiny-svg.icon-refres{right:32px}.tiny-upload-list__item .tiny-svg.icon-close,.tiny-upload-list__item .tiny-svg.icon-refres{display:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);fill:var(--tv-UploadList-svg-close-icon-color);font-size:var(--tv-UploadList-svg-icon-font-size);opacity:.75;cursor:pointer}.tiny-upload-list__item .tiny-svg.icon-close:hover,.tiny-upload-list__item .tiny-svg.icon-refres:hover{fill:var(--tv-UploadList-svg-close-hover-icon-color);opacity:1}.tiny-upload-list__item .tiny-icon-close-tip{display:none;position:absolute;top:5px;right:5px;font-size:var(--tv-UploadList-svg-icon-font-size);cursor:pointer;opacity:1;color:var(--tv-UploadList-item-hover-text-color)}.tiny-upload-list__item-edminfo,.tiny-upload-list__item-folder{display:inline-block;vertical-align:top}.tiny-upload-list__item-edminfo{margin-right:20px}.tiny-upload-list__item-edminfo span{display:inline-block;margin-right:10px}.tiny-upload-list__item-edminfo.isFail span{color:#f5222d}.tiny-upload-list__text-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;height:22px;line-height:22px;color:var(--tv-UploadList-item-fail-text-color)}.tiny-upload-list__icon-operationfaild{fill:var(--tv-UploadList-item-fail-text-color);margin-right:8px;margin-left:4px;font-size:16px}.tiny-upload-list__text-desc{line-height:30px}.tiny-upload-list__item-tooltip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.tiny-upload-list__item-name{color:var(--tv-UploadList-item-text-color);display:block;margin-right:40px;padding-left:4px;-webkit-transition:color .3s;transition:color .3s}.tiny-upload-list__item-name .tiny-svg{font-size:var(--tv-UploadList-item-name-icon-font-size);margin-right:4px;fill:var(--tv-UploadList-item-name-icon-color)}.tiny-upload-list__item-status-label{position:absolute;right:5px;top:0;line-height:inherit;display:none}.tiny-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:var(--tv-UploadList-svg-icon-font-size);color:var(--tv-UploadList-svg-close-icon-color);display:none}.tiny-upload-list__item-delete:hover{color:var(--tv-UploadList-item-hover-text-color)}.tiny-upload-list__download-bar{position:absolute;left:0;bottom:0;width:100%}.tiny-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.tiny-upload-list--picture-card .tiny-upload-list__li{display:inline-block}.tiny-upload-list--picture-card .tiny-upload-list__li .is-fail{color:var(--tv-UploadList-item-fail-text-color)}.tiny-upload-list--picture-card .tiny-upload-list__li-title:not(.is-fail){color:#595959}.tiny-upload-list--picture-card .tiny-upload-list__li-title{margin-top:-4px;text-align:center;line-height:1.5;width:var(--tv-UploadList-picture-card-width);height:18px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-upload-list--picture-card .tiny-upload-list__item{overflow:hidden;background-color:var(--tv-UploadList-picture-card-item-bg-color);border:1px dashed var(--tv-UploadList-picture-card-item-border-color);border-radius:var(--tv-UploadList-item-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--tv-UploadList-picture-card-width);height:var(--tv-UploadList-picture-card-height);margin:0 16px 8px 0;display:inline-block}.tiny-upload-list--picture-card .tiny-upload-list__item.is-success{border-width:0}.tiny-upload-list--picture-card .tiny-upload-list__item.is-fail{border-style:solid;border-color:var(--tv-UploadList-item-fail-text-color);background-color:var(--tv-UploadList-item-fail-bg-color)}.tiny-upload-list--picture-card .tiny-upload-list__item.is-fail .tiny-upload-list__item-actions:hover{background-color:var(--tv-UploadList-item-fail-bg-color)}.tiny-upload-list--picture-card .tiny-upload-list__item.is-fail .tiny-upload-list__item-actions:hover span .tiny-svg{fill:var(--tv-UploadList-svg-close-hover-icon-color)}.tiny-upload-list--picture-card .tiny-upload-list__item .tiny-icon-check{fill:var(--tv-UploadList-picture-card-item-icon-color)}.tiny-upload-list--picture-card .tiny-upload-list__item .tiny-svg.icon-close,.tiny-upload-list--picture-card .tiny-upload-list__item .tiny-svg.icon-refres,.tiny-upload-list--picture-card .tiny-upload-list__item:hover .tiny-upload-list__item-status-label{display:none}.tiny-upload-list--picture-card .tiny-upload-list__item:hover .tiny-progress__text{display:block}.tiny-upload-list--picture-card .tiny-upload-list__item-name{display:none}.tiny-upload-list--picture-card .tiny-upload-list__item-thumbnail{width:100%;height:100%}.tiny-upload-list--picture-card .tiny-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:var(--tv-UploadList-successful-status-bg-color);text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 1pc 1px rgba(0,0,0,.2);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.tiny-upload-list--picture-card .tiny-upload-list__item-status-label .tiny-svg{font-size:var(--tv-UploadList-svg-icon-font-size);margin-top:11px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.tiny-upload-list--picture-card .tiny-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;fill:var(--tv-UploadList-picture-card-item-icon-color);opacity:0;font-size:20px;background-color:transparent;-webkit-transition:opacity .3s;transition:opacity .3s}.tiny-upload-list--picture-card .tiny-upload-list__item-actions:after{display:inline-block;content:'';height:100%;vertical-align:middle}.tiny-upload-list--picture-card .tiny-upload-list__item-actions:hover{opacity:1;background-color:var(--tv-UploadList-picture-card-item-bg-color-hover)}.tiny-upload-list--picture-card .tiny-upload-list__item-actions:hover span{display:inline-block}.tiny-upload-list--picture-card .tiny-upload-list__item-actions span{display:none;cursor:pointer}.tiny-upload-list--picture-card .tiny-upload-list__item-actions span+span{margin-left:16px}.tiny-upload-list--picture-card .tiny-upload-list__item-actions .tiny-upload-list__item-preview .tiny-svg-fullscreen{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tiny-upload-list--picture-card .tiny-upload-list__item-actions .tiny-upload-list__item-delete,.tiny-upload-list--picture-card .tiny-upload-list__item-actions .tiny-upload-list__item-refres{position:static;font-size:inherit;color:inherit}.tiny-upload-list--picture-card .tiny-progress{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);bottom:auto;width:var(--tv-UploadList-picture-card-progress-size)}.tiny-upload-list--picture-card .tiny-progress .tiny-progress__text{top:50%}.tiny-upload-list--picture-card .tiny-upload-list__item-cancel{position:absolute;left:50%;bottom:16px;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:14px;color:var(--tv-UploadList-item-cancel-text-color);line-height:22px;letter-spacing:0;white-space:nowrap;cursor:pointer}.tiny-upload-list--picture-card .tiny-upload-list__item-cancel:hover{color:var(--tv-UploadList-item-cancel-text-color-hover);text-decoration:underline}.tiny-upload-list--picture .tiny-upload-list__item{overflow:hidden;z-index:0;background-color:var(--tv-UploadList-picture-card-item-bg-color);-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:8px;outline:0}.tiny-upload-list--picture .tiny-upload-list__item .tiny-icon-check{fill:var(--tv-UploadList-picture-card-item-icon-color)}.tiny-upload-list--picture .tiny-upload-list__item:hover .tiny-upload-list__item-status-label{background:0 0;-webkit-box-shadow:none;box-shadow:none;top:-2px;right:-12px}.tiny-upload-list--picture .tiny-upload-list__item:hover .tiny-progress__text{display:block}.tiny-upload-list--picture .tiny-upload-list__item.is-success .tiny-upload-list__item-name{line-height:56px;margin-top:0}.tiny-upload-list--picture .tiny-upload-list__item.is-success .tiny-upload-list__item-name .tiny-svg{display:none}.tiny-upload-list--picture .tiny-upload-list__item-thumbnail{width:56px;height:56px;border:1px solid var(--tv-UploadList-picture-card-item-border-color);border-radius:var(--tv-UploadList-item-border-radius);float:left;position:relative;z-index:1;vertical-align:middle;margin-right:12px}.tiny-upload-list--picture .tiny-upload-list__item-name{display:block;line-height:56px}.tiny-upload-list--picture .tiny-upload-list__item-name .tiny-svg{font-size:var(--tv-UploadList-item-name-icon-font-size)}.tiny-upload-list--picture .tiny-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:var(--tv-UploadList-successful-status-bg-color);text-align:center;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc}.tiny-upload-list--picture .tiny-upload-list__item-status-label .tiny-svg{font-size:var(--tv-UploadList-svg-icon-font-size);margin-top:12px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.tiny-upload-list--picture .tiny-progress{position:relative;top:-7px}.tiny-upload-list--saas{border:0 dashed #c9c9c9}.tiny-upload-list--saas.border-zero{border-width:0}.tiny-upload-list--saas.border-top{border-top-width:1px}.tiny-upload-list--saas.mode-bubble{height:208px;overflow-y:auto;overflow-x:hidden}.tiny-upload-list--saas .tiny-upload-list-panel{font-size:0}.tiny-upload-list--saas .tiny-upload-list-panel .tiny-upload-list-item{position:relative;display:inline-block;min-width:100%;padding:12px;margin-right:8px;border:1px solid #dfdfdf;border-radius:4px;background-color:var(--tv-UploadList-bg-color)}.tiny-upload-list--saas .tiny-upload-list-panel .tiny-upload-list-item:hover{background-color:var(--tv-UploadList-bg-color-hover)}.tiny-upload-list--saas .tiny-upload-list-panel .tiny-upload-list-item:hover .operate-panel{visibility:visible}.tiny-upload-list--saas .tiny-upload-list-panel .tiny-upload-list-item.selected{border-color:#0067d1}.tiny-upload-list--saas .tiny-upload-list-panel .tiny-upload-list-item.compact{min-width:448px}.tiny-upload-list--saas .tiny-upload-list-panel .tiny-upload-list-item:not(:last-child){margin-bottom:8px}.tiny-upload-list--saas .tiny-upload-list-thumb{position:relative;display:inline-block;width:32px;height:32px;margin-right:8px;vertical-align:top}.tiny-upload-list--saas .tiny-upload-list-thumb .uploading-mask{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;opacity:.5;border-radius:2px}.tiny-upload-list--saas .tiny-upload-list-thumb .uploading-progress{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:2px}.tiny-upload-list--saas .tiny-upload-list-thumb .uploading-progress-panel{background-color:#aeaeae;width:100%;height:2px;border-radius:2px}.tiny-upload-list--saas .tiny-upload-list-thumb .uploading-progress-bar{background-color:#fff;height:100%;-webkit-transition:all cubic-bezier(.4,0,.2,1) 150ms;transition:all cubic-bezier(.4,0,.2,1) 150ms}.tiny-upload-list--saas .tiny-upload-list-thumb .file-icon{width:100%;height:100%;border-radius:2px}.tiny-upload-list--saas .tiny-upload-list-thumb .upload-fail{position:relative;width:100%;height:100%;border-radius:2px;background-color:#fee7e8}.tiny-upload-list--saas .tiny-upload-list-thumb .upload-fail-icon{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);fill:#e02128;font-size:18px}.tiny-upload-list--saas .tiny-upload-list-content{position:relative;display:inline-block;width:calc(100% - 40px);font-size:12px}.tiny-upload-list--saas .tiny-upload-list-content .file-name{display:-webkit-box;display:-ms-flexbox;display:flex;height:16px}.tiny-upload-list--saas .tiny-upload-list-content .file-name-box{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:24px;font-size:12px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-upload-list--saas .tiny-upload-list-content .operate-panel{visibility:hidden;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;color:#2e86de;font-size:12px}.tiny-upload-list--saas .tiny-upload-list-content .operate-panel .operate-btn{cursor:pointer;margin-right:8px}.tiny-upload-list--saas .tiny-upload-list-content .operate-panel .operate-btn:last-of-type{margin-right:0}.tiny-upload-list--saas .tiny-upload-list-content .file-size{display:-webkit-box;display:-ms-flexbox;display:flex;height:16px;line-height:20px}.tiny-upload-list--saas .tiny-upload-list-content .file-size-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aeaeae}.tiny-upload-list--saas .tiny-upload-list-content .file-size-content .fail>span{color:#e7434a}.tiny-upload-list--saas .tiny-upload-list-content .file-size-right{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:#aeaeae}.tiny-upload-list--saas .no-attachments{margin-top:16px;color:#aeaeae;font-size:12px}