.vxe-image-preview { position: relative; width: 100%; height: 100%; overflow: hidden; } .vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item { max-width: 100%; max-height: 100%; } .vxe-image-preview:not(.is--move) .vxe-image-preview--img-item { transition: transform 0.3s ease-in-out; } .vxe-image-preview:hover .vxe-image-preview--close-wrapper, .vxe-image-preview:hover .vxe-image-preview--previous-btn, .vxe-image-preview:hover .vxe-image-preview--next-btn, .vxe-image-preview:hover .vxe-image-preview--operation-info, .vxe-image-preview:hover .vxe-image-preview--operation-wrapper { opacity: 1; } .vxe-image-preview:hover .vxe-image-preview--operation-info { transform: translate(0, 0); } .vxe-image-preview:hover .vxe-image-preview--previous-btn, .vxe-image-preview:hover .vxe-image-preview--next-btn { transform: translate(0, -50%); } .vxe-image-preview:hover .vxe-image-preview--previous-btn:hover, .vxe-image-preview:hover .vxe-image-preview--next-btn:hover { color: var(--vxe-ui-font-primary-color); transform: translate(0, -50%) scale(1.2); } .vxe-image-preview:hover .vxe-image-preview--previous-btn:active, .vxe-image-preview:hover .vxe-image-preview--next-btn:active { transform: translate(0, -50%) scale(0.9); } .vxe-image-preview:hover .vxe-image-preview--operation-wrapper { transform: translate(-50%, 0); } .vxe-image-preview:hover .vxe-image-preview--operation-wrapper:hover { transform: translateX(-50%) scale(1.1); } .vxe-image-preview--img-list { display: flex; width: 100%; height: 100%; flex-direction: row; align-items: center; justify-content: center; } .vxe-image-preview--img-item { display: none; cursor: grab; } .vxe-image-preview--img-item:active { cursor: grabbing; } .vxe-image-preview--img-item.is--active { display: block; } .vxe-image-preview--close-btn { top: 0; right: 0; z-index: 99; padding: 1em; font-size: 1.5em; transform: scale(1); border-radius: 50%; cursor: pointer; transition: all 0.2s ease-in-out; } .vxe-image-preview--close-bg { position: absolute; top: -7em; right: -12em; z-index: 99; width: 30em; height: 10em; background-color: rgba(0, 0, 0, 0.7); color: var(--vxe-ui-status-error-color); transform: rotate(45deg); cursor: pointer; z-index: 88; transition: all 0.2s ease-in-out; } .vxe-image-preview--close-wrapper { opacity: 0; transition: all 0.2s ease-in-out; } .vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn { top: 0.2em; right: 0.2em; transform: scale(1.2); color: var(--vxe-ui-status-error-color); } .vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg { top: -5em; } .vxe-image-preview--operation-info, .vxe-image-preview--close-btn, .vxe-image-preview--previous-btn, .vxe-image-preview--next-btn, .vxe-image-preview--operation-wrapper { position: absolute; z-index: 99; } .vxe-image-preview--previous-btn, .vxe-image-preview--next-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; opacity: 0; top: 50%; border-radius: 50%; font-size: 1.6em; width: 2.2em; height: 2.2em; line-height: 2.2em; background-color: rgba(0, 0, 0, 0.7); cursor: pointer; transition: all 0.1s ease-in-out; } .vxe-image-preview--previous-btn { left: 1vw; transform: translate(-2em, -50%); } .vxe-image-preview--next-btn { right: 1vw; transform: translate(2em, -50%); } .vxe-image-preview--operation-info { right: 0.2em; bottom: 0.2em; font-size: 1em; padding: 0.3em 0; width: 4.6em; opacity: 0; border-radius: var(--vxe-ui-base-border-radius); text-align: center; transform: translate(2em, 2em); background-color: rgba(0, 0, 0, 0.7); transition: all 0.2s ease-in-out; } .vxe-image-preview--operation-wrapper { opacity: 0; display: flex; flex-direction: row; bottom: 3vh; left: 50%; transform: translate(-50%, 3em); padding: 0 1.5em; border-radius: 3em; background-color: rgba(0, 0, 0, 0.7); transition: all 0.2s ease-in-out; } .vxe-image-preview--operation-active-count { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 1.2em; min-width: 2.5em; } .vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-current, .vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-total { display: inline-block; height: 1.4em; } .vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-current { font-size: 2em; line-height: 1.2em; font-weight: 700; padding-right: 0.1em; min-width: 1.4em; text-align: right; } .vxe-image-preview--operation-btn { font-size: 1.6em; padding: 0.5em; cursor: pointer; transition: all 0.1s ease-in-out; } .vxe-image-preview--operation-btn:hover { color: var(--vxe-ui-font-primary-color); transform: scale(1.2); } .vxe-image-preview--operation-btn:active { transform: scale(0.9); } .vxe-image-preview-popup-wrapper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box { border: 0; background-color: rgba(0, 0, 0, 0.1); box-shadow: none; } .vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content { padding: 0; }