@charset "UTF-8"; .vxe-upload { position: relative; color: var(--vxe-ui-font-color); font-family: var(--vxe-ui-font-family); } .vxe-upload.show--error .vxe-upload--file-item.is--error { color: var(--vxe-ui-status-error-color); } .vxe-upload.show--error .vxe-upload--file-item.is--error:hover .vxe-upload--file-item-name { color: var(--vxe-ui-status-error-color); } .vxe-upload.show--error .vxe-upload--file-item.is--error .vxe-upload--file-item-name { text-decoration: line-through; } .vxe-upload.is--active .vxe-upload--image-action-box, .vxe-upload--more-popup.is--active .vxe-upload--image-action-box { border-color: var(--vxe-ui-font-primary-color); } .vxe-upload.is--active .vxe-upload--file-action-btn > .vxe-button, .vxe-upload--more-popup.is--active .vxe-upload--file-action-btn > .vxe-button { border-color: var(--vxe-ui-font-primary-color); border-style: var(--vxe-ui-upload-file-button-border-style); } .vxe-upload.is--disabled .vxe-upload--file-action-btn, .vxe-upload.is--disabled .vxe-upload--image-action-box, .vxe-upload--more-popup.is--disabled .vxe-upload--file-action-btn, .vxe-upload--more-popup.is--disabled .vxe-upload--image-action-box { cursor: no-drop; } .vxe-upload--drag-placeholder { display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 700; font-weight: var(--vxe-ui-font-darken-color); font-size: 1.2em; border-radius: var(--vxe-ui-base-border-radius); background-color: var(--vxe-ui-upload-drag-over-background-color); border: 1px dotted var(--vxe-ui-font-lighten-color); z-index: 9; } .vxe-upload--file-list-wrapper.is--horizontal { display: flex; flex-direction: row; } .vxe-upload--file-list-wrapper.is--horizontal > .vxe-upload--file-list { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } .vxe-upload--file-list-wrapper.is--horizontal > .vxe-upload--file-action { flex-shrink: 0; } .vxe-upload--file-list { max-height: 294px; overflow: auto; outline: 0; } .vxe-upload--file-item { position: relative; display: flex; flex-direction: row; align-items: center; line-height: 1.5em; padding: var(--vxe-ui-layout-padding-half); } .vxe-upload--file-item:hover { background-color: var(--vxe-ui-base-hover-background-color); } .vxe-upload--file-item:hover .vxe-upload--file-item-name { color: var(--vxe-ui-font-primary-color); } .vxe-upload--file-item:last-child { margin-bottom: 0; } .vxe-upload--file-item.is--preview .vxe-upload--file-item-name { cursor: pointer; } .vxe-upload--file-item.is--loading { cursor: progress; color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--file-item.is--loading:hover .vxe-upload--file-item-name { color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--file-item.is--pending { color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--file-over-more { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vxe-upload--file-over-more .vxe-button { padding-top: 0; padding-bottom: 0; } .vxe-upload--file-action-btn { display: inline-block; } .vxe-upload--file-action-btn > .vxe-button { border-style: var(--vxe-ui-upload-file-button-border-style); } .vxe-upload--file-action-button:hover { border-color: var(--vxe-ui-font-primary-color); } .vxe-upload--file-action-tip { font-size: 0.9em; padding: var(--vxe-ui-layout-padding-half); color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--file-item-rebtn { padding-right: 0.4em; color: var(--vxe-ui-status-error-color); text-decoration: none; cursor: help; } .vxe-upload--file-item-icon { flex-shrink: 0; padding-right: 0.2em; } .vxe-upload--file-item-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.2em; } .vxe-upload--file-item-btn-wrapper { display: inline-flex; flex-direction: row; justify-content: center; } .vxe-upload--file-item-loading-icon { padding-right: 0.2em; } .vxe-upload--file-item-loading-icon, .vxe-upload--file-item-loading-text { color: var(--vxe-ui-loading-color); flex-shrink: 0; } .vxe-upload--file-item-corner, .vxe-upload--file-item-download-btn, .vxe-upload--file-item-remove-btn { flex-shrink: 0; } .vxe-upload--file-item-download-btn, .vxe-upload--file-item-remove-btn { padding-left: 0.5em; cursor: pointer; } .vxe-upload--file-item-download-btn { color: var(--vxe-ui-font-primary-color); } .vxe-upload--file-item-download-btn:hover { color: var(--vxe-ui-font-primary-lighten-color); } .vxe-upload--file-item-remove-btn { color: var(--vxe-ui-status-error-color); } .vxe-upload--file-item-remove-btn:hover { color: var(--vxe-ui-status-error-lighten-color); } .vxe-upload--image-list, .vxe-upload--image-more-list { display: flex; flex-direction: row; flex-wrap: wrap; } .vxe-upload--image-item, .vxe-upload--image-action, .vxe-upload--image-over-more { flex-shrink: 0; text-align: center; padding: var(--vxe-ui-layout-padding-half); } .vxe-upload--image-over-more { display: flex; align-items: center; justify-content: center; } .vxe-upload--image-action-icon { font-size: 1.2em; padding-bottom: 0.1em; } .vxe-upload--image-action-content { font-size: 0.9em; padding: 0 0.15em 0.5em 0.15em; } .vxe-upload--image-item-box, .vxe-upload--image-action-box { position: relative; border-radius: var(--vxe-ui-base-border-radius); } .vxe-upload--image-item-box { display: flex; flex-direction: row; align-items: center; justify-content: center; } .vxe-upload--image-action-box { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px var(--vxe-ui-upload-image-button-border-style) var(--vxe-ui-input-border-color); cursor: pointer; } .vxe-upload--image-action-box:hover { color: var(--vxe-ui-font-primary-color); border-color: var(--vxe-ui-font-primary-color); } .vxe-upload.is--disabled .vxe-upload--file-action-btn, .vxe-upload.is--disabled .vxe-upload--image-action-box { color: var(--vxe-ui-font-disabled-color); cursor: no-drop; } .vxe-upload.is--disabled .vxe-upload--image-action-box:hover { color: var(--vxe-ui-font-disabled-color); border-color: var(--vxe-ui-input-border-color); } .vxe-upload--image-item.is--loading .vxe-upload--image-item-box { cursor: progress; } .vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .vxe-upload--image-item:hover .vxe-upload--image-item-img-wrapper::after { background-color: rgba(0, 0, 0, 0.1); } .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending .vxe-upload--image-item-img-wrapper::after { background-color: rgba(0, 0, 0, 0.4); } .vxe-upload--image-item.is--error:hover .vxe-upload--image-item-img-wrapper::after, .vxe-upload--image-item.is--pending:hover .vxe-upload--image-item-img-wrapper::after { background-color: rgba(0, 0, 0, 0.5); } .vxe-upload--image-item.is--error .vxe-upload--image-item-img-wrapper { border-color: var(--vxe-ui-status-error-color); } .vxe-upload--image-item.is--preview .vxe-upload--image-item-box { cursor: pointer; } .vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper { border-radius: 50%; overflow: hidden; } .vxe-upload--image-item.is--circle .vxe-upload--image-item-img-wrapper::after { border-radius: 50%; } .vxe-upload--image-item.is--circle .vxe-upload--image-item-loading, .vxe-upload--image-item.is--circle .vxe-upload--image-item-rebtn { border-radius: 50%; } .vxe-upload--image-item-img-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--vxe-ui-base-border-radius); border: 1px solid var(--vxe-ui-input-border-color); } .vxe-upload--image-item-img { max-width: 100%; max-height: 100%; } .vxe-upload--image-item-loading { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; color: var(--vxe-ui-loading-color); background-color: rgba(0, 0, 0, 0.6); z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-upload--image-item-rebtn { position: absolute; display: flex; flex-direction: row; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .vxe-upload--image-action-hint { font-size: 0.8em; word-break: break-all; color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--image-item-btn-wrapper { display: inline-flex; flex-direction: row; justify-content: center; position: absolute; top: calc(var(--vxe-ui-layout-padding-half) * -1); right: calc(var(--vxe-ui-layout-padding-half) * -1); } .vxe-upload--file-item-, .vxe-upload--image-item-remove-btn { flex-shrink: 0; } .vxe-upload--image-item-remove-btn { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 1.8em; height: 1.8em; font-size: 0.8em; border-radius: 50%; color: #fff; background-color: var(--vxe-ui-status-error-color); z-index: 3; cursor: pointer; } .vxe-upload--image-item-remove-btn:hover { background-color: var(--vxe-ui-status-error-lighten-color); } .vxe-upload--file-message-over-error .vxe-upload--file-message-over-extra { margin-top: 0.5em; max-height: 160px; max-width: 380px; overflow: auto; border: 1px solid var(--vxe-ui-input-border-color); padding: var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default); outline: 0; } .vxe-upload--file-message-over-error .vxe-upload--file-message-over-extra-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*ζ‹–ζ‹½ζŽ’εΊ*/ .vxe-upload--drag-line { display: none; position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; } .vxe-upload--drag-line { width: 1px; height: 1px; border: 2px solid transparent; } .vxe-upload--drag-line[drag-pos=top] { border-top-color: var(--vxe-ui-font-primary-color); } .vxe-upload--drag-line[drag-pos=bottom] { border-bottom-color: var(--vxe-ui-font-primary-color); } .vxe-upload--drag-line[drag-pos=left] { border-left-color: var(--vxe-ui-font-primary-color); } .vxe-upload--drag-line[drag-pos=right] { border-right-color: var(--vxe-ui-font-primary-color); } .vxe-upload--drag-list-move { transition: transform 0.2s; } .vxe-upload--more-popup { position: relative; } .vxe-upload--more-popup .vxe-upload--file-list { max-height: none; } .vxe-upload--more-popup .vxe-upload--file-action-btn { width: 100%; } .vxe-upload--more-popup .vxe-upload--file-action-btn > .vxe-button { width: 100%; max-width: 100%; } .vxe-upload, .vxe-upload--more-popup { font-size: var(--vxe-ui-font-size-default); } .vxe-upload .vxe-upload--image-item-box, .vxe-upload .vxe-upload--image-action-box, .vxe-upload--more-popup .vxe-upload--image-item-box, .vxe-upload--more-popup .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-default); height: var(--vxe-ui-upload-image-wh-default); } .vxe-upload.size--medium, .vxe-upload--more-popup.size--medium { font-size: var(--vxe-ui-font-size-medium); } .vxe-upload.size--medium .vxe-upload--image-item-box, .vxe-upload.size--medium .vxe-upload--image-action-box, .vxe-upload--more-popup.size--medium .vxe-upload--image-item-box, .vxe-upload--more-popup.size--medium .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-medium); height: var(--vxe-ui-upload-image-wh-medium); } .vxe-upload.size--small, .vxe-upload--more-popup.size--small { font-size: var(--vxe-ui-font-size-small); } .vxe-upload.size--small .vxe-upload--image-item-box, .vxe-upload.size--small .vxe-upload--image-action-box, .vxe-upload--more-popup.size--small .vxe-upload--image-item-box, .vxe-upload--more-popup.size--small .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-small); height: var(--vxe-ui-upload-image-wh-small); } .vxe-upload.size--mini, .vxe-upload--more-popup.size--mini { font-size: var(--vxe-ui-font-size-mini); } .vxe-upload.size--mini .vxe-upload--image-item-box, .vxe-upload.size--mini .vxe-upload--image-action-box, .vxe-upload--more-popup.size--mini .vxe-upload--image-item-box, .vxe-upload--more-popup.size--mini .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-mini); height: var(--vxe-ui-upload-image-wh-mini); } .vxe-upload--image-more-list .vxe-upload--image-item-box { width: var(--vxe-ui-upload-image-wh-default); height: var(--vxe-ui-upload-image-wh-default); }