@opentiny/vue-theme/image-viewer/index.css

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

.tiny-image-viewer{--tv-ImageViewer-text-color:var(--tv-color-text-inverse, #ffffff);--tv-ImageViewer-actions-inner-text-color:var(--tv-color-text-inverse, #ffffff);--tv-ImageViewer-close-font-size:var(--tv-font-size-xxl, 20px);--tv-ImageViewer-close-bg-color:var(--tv-color-bg-control-unactive, #c2c2c2);--tv-ImageViewer-actions-border-radius:var(--tv-border-radius-round, 999px);--tv-ImageViewer-actions-height:var(--tv-size-height-lg, 40px);--tv-ImageViewer-next-font-size:24px;--tv-ImageViewer-next-width:var(--tv-size-height-lg, 40px);--tv-ImageViewer-next-height:var(--tv-size-height-lg, 40px);--tv-ImageViewer-actions-icon-margin-right:var(--tv-space-xl, 16px);--tv-ImageViewer-actions-count-font-size:var(--tv-font-size-default, 14px);--tv-ImageViewer-prev-left:32px;--tv-ImageViewer-next-right:32px}.tiny-image-viewer__wrapper{background:0 0;position:fixed;top:0;right:0;bottom:0;left:0}.tiny-image-viewer__btn{position:absolute;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;opacity:1;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-image-viewer__btn svg{width:20px;height:20px;fill:var(--tv-ImageViewer-text-color)}.tiny-image-viewer__close{top:32px;right:32px;width:40px;height:40px;font-size:var(--tv-ImageViewer-close-font-size);background-color:var(--tv-ImageViewer-close-bg-color)}.tiny-image-viewer__close:hover{cursor:pointer;background-color:#606266}.tiny-image-viewer__canvas{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-image-viewer__actions{left:50%;bottom:32px;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:248px;height:var(--tv-ImageViewer-actions-height);padding:10px 24px;background-color:var(--tv-ImageViewer-close-bg-color);border-radius:var(--tv-ImageViewer-actions-border-radius)}.tiny-image-viewer__actions-inner{width:100%;height:100%;cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.tiny-image-viewer__actions-inner svg{fill:var(--tv-ImageViewer-actions-inner-text-color);margin-right:var(--tv-ImageViewer-actions-icon-margin-right)}.tiny-image-viewer__actions-inner svg:hover{cursor:pointer}.tiny-image-viewer__actions-divider{display:inline-block}.tiny-image-viewer__actions-count{display:inline-block;width:20px;height:20px;line-height:20px;font-size:var(--tv-ImageViewer-actions-count-font-size);color:#fff;position:relative}.tiny-image-viewer__next,.tiny-image-viewer__prev{top:50%;width:var(--tv-ImageViewer-next-width);height:var(--tv-ImageViewer-next-height);font-size:var(--tv-ImageViewer-next-font-size);background-color:var(--tv-ImageViewer-close-bg-color)}.tiny-image-viewer__next:hover,.tiny-image-viewer__prev:hover{cursor:pointer;background-color:#606266}.tiny-image-viewer__prev{-webkit-transform:translateY(-50%);transform:translateY(-50%);left:var(--tv-ImageViewer-prev-left)}.tiny-image-viewer__next{-webkit-transform:translateY(-50%);transform:translateY(-50%);right:var(--tv-ImageViewer-next-right);text-indent:2px}.tiny-image-viewer__mask{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.08)}