vue-amazing-ui/lib/image/Image.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.fade-enter-active[data-v-b23dafdc],.fade-leave-active[data-v-b23dafdc]{transition:opacity .2s linear}.fade-enter-from[data-v-b23dafdc],.fade-leave-to[data-v-b23dafdc]{opacity:0}.zoom-enter[data-v-b23dafdc]{transform:none;opacity:0;animation-duration:.3s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused}.zoom-enter-active[data-v-b23dafdc]{animation-name:zoomIn-b23dafdc;animation-play-state:running}@keyframes zoomIn-b23dafdc{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}.zoom-leave[data-v-b23dafdc]{animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-timing-function:cubic-bezier(.78,.14,.15,.86)}.zoom-leave-active[data-v-b23dafdc]{animation-name:zoomOut-b23dafdc;animation-play-state:running;pointer-events:none}@keyframes zoomOut-b23dafdc{0%{transform:scale(1);opacity:1}to{transform:scale(.2);opacity:0}}.image-wrap[data-v-b23dafdc]{display:inline-block}.image-wrap .image-hover-mask:hover .image-mask[data-v-b23dafdc]{opacity:1;pointer-events:auto}.image-wrap .image-container[data-v-b23dafdc]{position:relative;display:inline-block;vertical-align:top;border-radius:8px;overflow:hidden}.image-wrap .image-container .image-item[data-v-b23dafdc]{display:inline-block;width:100%;height:100%;vertical-align:bottom}.image-wrap .image-container .image-mask[data-v-b23dafdc]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:#00000080;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}.image-wrap .image-container .image-mask .image-mask-info[data-v-b23dafdc]{display:inline-flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px}.image-wrap .image-container .image-mask .image-mask-info .eye-svg[data-v-b23dafdc]{margin-right:4px;font-size:14px;color:#fff;fill:currentColor}.image-wrap .image-container .image-mask .image-mask-info .mask-pre[data-v-b23dafdc]{display:inline-block;color:#fff}.image-wrap .image-bordered[data-v-b23dafdc]{border:1px solid #d9d9d9}.image-wrap .preview-mask[data-v-b23dafdc]{position:fixed;inset:0;z-index:1000;height:100%;background-color:#00000073}.image-wrap .preview-container[data-v-b23dafdc]{position:fixed;inset:0;overflow:auto;outline:none;z-index:1080;height:100%;text-align:center}.image-wrap .preview-container .preview-body[data-v-b23dafdc]{position:absolute;inset:0;overflow:hidden;pointer-events:none}.image-wrap .preview-container .preview-body .preview-operations[data-v-b23dafdc]{position:fixed;width:100%;z-index:9;display:flex;flex-direction:row-reverse;align-items:center;background:#0000001a;height:42px;pointer-events:auto}.image-wrap .preview-container .preview-body .preview-operations .preview-name[data-v-b23dafdc]{position:absolute;left:12px;font-size:14px;color:#fff;line-height:1.57;max-width:calc(50% - 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}.image-wrap .preview-container .preview-body .preview-operations .preview-name[data-v-b23dafdc]:hover{color:var(--image-primary-color)}.image-wrap .preview-container .preview-body .preview-operations .preview-progress[data-v-b23dafdc]{position:absolute;left:50%;transform:translate(-50%);font-size:14px;color:#fff;line-height:1.57}.image-wrap .preview-container .preview-body .preview-operations .preview-operation[data-v-b23dafdc]{display:flex;justify-content:center;align-items:center;width:42px;height:42px;padding:12px;border-radius:8px;cursor:pointer;transition:all .3s}.image-wrap .preview-container .preview-body .preview-operations .preview-operation[data-v-b23dafdc]:not(:last-child){margin-left:12px}.image-wrap .preview-container .preview-body .preview-operations .preview-operation[data-v-b23dafdc]:hover{background:#00000040}.image-wrap .preview-container .preview-body .preview-operations .preview-operation .icon-svg[data-v-b23dafdc]{font-size:18px;color:#fff;fill:currentColor}.image-wrap .preview-container .preview-body .preview-operations .operation-disabled[data-v-b23dafdc]{color:#ffffff40;pointer-events:none}.image-wrap .preview-container .preview-body .preview-operations .operation-disabled .icon-svg[data-v-b23dafdc]{color:#ffffff40}.image-wrap .preview-container .preview-body .preview-image-container[data-v-b23dafdc]{position:absolute;z-index:3;inset:0;transition:transform var(--drag-transition-duration) cubic-bezier(.215,.61,.355,1) 0s}.image-wrap .preview-container .preview-body .preview-image-container[data-v-b23dafdc] .spin-content{display:flex;justify-content:center;align-items:center}.image-wrap .preview-container .preview-body .preview-image-container .preview-image[data-v-b23dafdc]{display:inline-block;vertical-align:middle;max-width:100%;max-height:100vh;cursor:grab;transition:transform .3s cubic-bezier(.215,.61,.355,1) 0s;-webkit-user-select:none;user-select:none;pointer-events:auto}.image-wrap .preview-container .preview-body .switch-left[data-v-b23dafdc]{left:12px;position:fixed;top:50%;z-index:1081;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;color:#fff;background:#0000001a;border-radius:50%;transform:translateY(-50%);cursor:pointer;transition:all .3s;pointer-events:auto;-webkit-user-select:none;user-select:none}.image-wrap .preview-container .preview-body .switch-left[data-v-b23dafdc]:hover{background:#0003}.image-wrap .preview-container .preview-body .switch-left .switch-svg[data-v-b23dafdc]{font-size:18px;color:#fff;fill:currentColor}.image-wrap .preview-container .preview-body .switch-right[data-v-b23dafdc]{right:12px;position:fixed;top:50%;z-index:1081;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;color:#fff;background:#0000001a;border-radius:50%;transform:translateY(-50%);cursor:pointer;transition:all .3s;pointer-events:auto}.image-wrap .preview-container .preview-body .switch-right[data-v-b23dafdc]:hover{background:#0003}.image-wrap .preview-container .preview-body .switch-right .switch-svg[data-v-b23dafdc]{font-size:18px;color:#fff;fill:currentColor}.image-wrap .preview-container .preview-body .switch-disabled[data-v-b23dafdc]{color:#ffffff40;background:transparent;cursor:not-allowed}.image-wrap .preview-container .preview-body .switch-disabled[data-v-b23dafdc]:hover{background:transparent}.image-wrap .preview-container .preview-body .switch-disabled .switch-svg[data-v-b23dafdc]{color:#ffffff40}