vexip-ui/css/viewer.css

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

.vxp-viewer-vars{--vxp-viewer-b-color:transparent;--vxp-viewer-border:var(--vxp-border-shape) var(--vxp-viewer-b-color);--vxp-viewer-radius:var(--vxp-radius-base);--vxp-viewer-v-padding:0;--vxp-viewer-h-padding:0;--vxp-viewer-toolbar-bg-color:var(--vxp-bg-color-reverse);--vxp-viewer-toolbar-radius:var(--vxp-radius-base);--vxp-viewer-toolbar-v-padding:8px;--vxp-viewer-toolbar-h-padding:8px;--vxp-viewer-action-size:24px;--vxp-viewer-action-color:var(--vxp-bg-color-base);--vxp-viewer-action-color-hover:var(--vxp-color-primary-base)}.vxp-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);position:relative;width:100%;height:100%;padding:var(--vxp-viewer-v-padding) var(--vxp-viewer-h-padding);border:var(--vxp-viewer-border);border-radius:var(--vxp-viewer-radius)}.vxp-viewer,.vxp-viewer *,.vxp-viewer ::after,.vxp-viewer ::before{box-sizing:border-box}.vxp-viewer--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-viewer__container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-viewer__content,.vxp-viewer__transition{display:flex;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--vxp-transition-transform)}.vxp-viewer--moving .vxp-viewer__content{transition-duration:0s}.vxp-viewer--static .vxp-viewer__content,.vxp-viewer--static .vxp-viewer__transition{transition-duration:0s}.vxp-viewer__toolbar{position:absolute;display:flex;align-items:center;justify-content:center;padding:6px 10px;background-color:var(--vxp-viewer-toolbar-bg-color);border-radius:var(--vxp-viewer-toolbar-radius);opacity:0;transition:var(--vxp-transition-opacity)}.vxp-viewer__toolbar--active{opacity:100%}.vxp-viewer__toolbar--vertical{flex-direction:column;padding:10px}.vxp-viewer__toolbar--top,.vxp-viewer__toolbar--top-end,.vxp-viewer__toolbar--top-start{top:var(--vxp-viewer-toolbar-v-padding)}.vxp-viewer__toolbar--bottom,.vxp-viewer__toolbar--bottom-end,.vxp-viewer__toolbar--bottom-start{bottom:var(--vxp-viewer-toolbar-v-padding)}.vxp-viewer__toolbar--bottom,.vxp-viewer__toolbar--top{left:50%;transform:translateX(-50%)}.vxp-viewer__toolbar--bottom-start,.vxp-viewer__toolbar--top-start{inset-inline-start:var(--vxp-viewer-toolbar-h-padding)}.vxp-viewer__toolbar--bottom-end,.vxp-viewer__toolbar--top-end{inset-inline-end:var(--vxp-viewer-toolbar-h-padding)}.vxp-viewer__toolbar--right,.vxp-viewer__toolbar--right-end,.vxp-viewer__toolbar--right-start{right:var(--vxp-viewer-toolbar-h-padding)}.vxp-viewer__toolbar--left,.vxp-viewer__toolbar--left-end,.vxp-viewer__toolbar--left-start{left:var(--vxp-viewer-toolbar-h-padding)}.vxp-viewer__toolbar--left,.vxp-viewer__toolbar--right{top:50%;transform:translateY(-50%)}.vxp-viewer__toolbar--left-start,.vxp-viewer__toolbar--right-start{top:var(--vxp-viewer-toolbar-v-padding)}.vxp-viewer__toolbar--left-end,.vxp-viewer__toolbar--right-end{bottom:var(--vxp-viewer-toolbar-v-padding)}.vxp-viewer__toolbar .vxp-divider{border-color:var(--vxp-viewer-action-color);opacity:70%}.vxp-viewer__toolbar .vxp-divider--horizontal{width:1em;margin:8px 0}.vxp-viewer__toolbar .vxp-divider:last-child{display:none}.vxp-viewer__action{display:flex;align-items:center;justify-content:center;width:var(--vxp-viewer-action-size);height:var(--vxp-viewer-action-size);padding:0;color:var(--vxp-viewer-action-color);cursor:pointer;background-color:transparent;border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-viewer__action:focus,.vxp-viewer__action:hover{color:var(--vxp-viewer-action-color-hover)}