vexip-ui/css/image.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-image-vars{--vxp-image-fit:cover;--vxp-image-radius:0;--vxp-image-b-color:var(--vxp-border-color-base);--vxp-image-bg-color:transparent;--vxp-image-bg-color-error:var(--vxp-fill-color-humble);--vxp-image-close-bg-color:var(--vxp-bg-color-reverse);--vxp-image-close-color:var(--vxp-bg-color-base);--vxp-image-action-size:40px;--vxp-image-action-offset:30px}.vxp-image{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-image-bg-color);border-radius:var(--vxp-image-radius)}.vxp-image,.vxp-image *,.vxp-image ::after,.vxp-image ::before{box-sizing:border-box}.vxp-image--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-image--inherit{color:inherit}.vxp-image--border{border:var(--vxp-border-shape) var(--vxp-image-b-color)}.vxp-image--error,.vxp-image--loading{background-color:var(--vxp-image-bg-color-error)}.vxp-image__skeleton{width:100%;height:100%}.vxp-image__img{width:100%;height:100%;-o-object-fit:var(--vxp-image-fit);object-fit:var(--vxp-image-fit)}.vxp-image--preview .vxp-image__img{cursor:pointer}.vxp-image--error .vxp-image__img,.vxp-image--loading .vxp-image__img{width:0;height:0;pointer-events:none;visibility:hidden}.vxp-image-viewer{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base)}.vxp-image-viewer,.vxp-image-viewer *,.vxp-image-viewer ::after,.vxp-image-viewer ::before{box-sizing:border-box}.vxp-image-viewer--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-image-viewer__wrapper{position:absolute;inset:0}.vxp-image-viewer__close{position:absolute;display:flex;padding:0;cursor:pointer;background-color:transparent;border:0;outline:0;inset-inline-end:var(--vxp-image-action-offset);top:var(--vxp-image-action-offset)}.vxp-image-viewer__close-handler{display:flex;align-items:center;justify-content:center;width:var(--vxp-image-action-size);height:var(--vxp-image-action-size);color:var(--vxp-image-close-color);background-color:var(--vxp-bg-color-reverse);border-radius:50%;opacity:60%;transition:var(--vxp-transition-opacity)}.vxp-image-viewer__close:focus .vxp-image-viewer__close-handler,.vxp-image-viewer__close:hover .vxp-image-viewer__close-handler{opacity:90%}.vxp-image-viewer__close--disabled{cursor:not-allowed}.vxp-image-viewer__close--disabled .vxp-image-viewer__close-handler,.vxp-image-viewer__close--disabled:focus .vxp-image-viewer__close-handler,.vxp-image-viewer__close--disabled:hover .vxp-image-viewer__close-handler{opacity:30%}.vxp-image-viewer__prev{position:absolute;display:flex;padding:0;cursor:pointer;background-color:transparent;border:0;outline:0;inset-inline-start:var(--vxp-image-action-offset);top:50%;transform:translateY(-50%)}.vxp-image-viewer__prev-handler{display:flex;align-items:center;justify-content:center;width:var(--vxp-image-action-size);height:var(--vxp-image-action-size);color:var(--vxp-image-close-color);background-color:var(--vxp-bg-color-reverse);border-radius:50%;opacity:60%;transition:var(--vxp-transition-opacity)}.vxp-image-viewer__prev:focus .vxp-image-viewer__prev-handler,.vxp-image-viewer__prev:hover .vxp-image-viewer__prev-handler{opacity:90%}.vxp-image-viewer__prev--disabled{cursor:not-allowed}.vxp-image-viewer__prev--disabled .vxp-image-viewer__prev-handler,.vxp-image-viewer__prev--disabled:focus .vxp-image-viewer__prev-handler,.vxp-image-viewer__prev--disabled:hover .vxp-image-viewer__prev-handler{opacity:30%}.vxp-image-viewer__next{position:absolute;display:flex;padding:0;cursor:pointer;background-color:transparent;border:0;outline:0;inset-inline-end:var(--vxp-image-action-offset);top:50%;transform:translateY(-50%)}.vxp-image-viewer__next-handler{display:flex;align-items:center;justify-content:center;width:var(--vxp-image-action-size);height:var(--vxp-image-action-size);color:var(--vxp-image-close-color);background-color:var(--vxp-bg-color-reverse);border-radius:50%;opacity:60%;transition:var(--vxp-transition-opacity)}.vxp-image-viewer__next:focus .vxp-image-viewer__next-handler,.vxp-image-viewer__next:hover .vxp-image-viewer__next-handler{opacity:90%}.vxp-image-viewer__next--disabled{cursor:not-allowed}.vxp-image-viewer__next--disabled .vxp-image-viewer__next-handler,.vxp-image-viewer__next--disabled:focus .vxp-image-viewer__next-handler,.vxp-image-viewer__next--disabled:hover .vxp-image-viewer__next-handler{opacity:30%}.vxp-image-viewer .vxp-viewer__toolbar{bottom:var(--vxp-image-action-offset);opacity:60%;transition:var(--vxp-transition-opacity)}.vxp-image-viewer .vxp-viewer__toolbar:focus-within,.vxp-image-viewer .vxp-viewer__toolbar:hover{opacity:90%}.vxp-image-viewer .vxp-viewer__action{width:var(--vxp-image-action-size);height:var(--vxp-image-action-size)}.vxp-image-viewer .vxp-viewer__action .vxp-icon{font-size:1.4em}.vxp-image-group{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base)}.vxp-image-group,.vxp-image-group *,.vxp-image-group ::after,.vxp-image-group ::before{box-sizing:border-box}.vxp-image-group--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}