vue-devui/image-preview/style.css

DevUI components based on Vite and Vue3

.devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:var(--devui-z-index-full-page-overlay, 1080);display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #71757f)}.devui-image-preview__main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview__close-btn{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview__close-btn:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__close-btn svg{width:38px;height:18px}.devui-image-preview__arrow-left{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview__arrow-left:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__arrow-left svg{width:38px;height:18px}.devui-image-preview__arrow-right{position:fixed;z-index:var(--devui-z-index-full-page-overlay, 1080);cursor:pointer;width:36px;height:36px;border-radius:50%;border:none;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview__arrow-right:hover{background:var(--devui-area, #f5f5f5)}.devui-image-preview__arrow-right svg{width:38px;height:18px}.devui-image-preview__toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12))}.devui-image-preview__toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a);border:none;background-color:transparent;cursor:pointer;outline:0;padding:0}.devui-image-preview__toolbar .devui-image-preview__index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview__toolbar>:not(:first-child){margin-left:20px}.devui-image-preview__bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-full-page-overlay, 1080) - 1);background:var(--devui-shadow, rgba(37, 43, 58, .24));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24))}