vexip-ui/css/tour.css

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

.vxp-tour-vars{--vxp-tour-min-width:360px;--vxp-tour-max-width:520px;--vxp-tour-title-font-size:var(--vxp-font-size-primary);--vxp-tour-title-weight:500;--vxp-tour-title-color:var(--vxp-content-color-primary);--vxp-tour-header-v-padding:8px;--vxp-tour-header-h-padding:14px;--vxp-tour-body-v-padding:4px;--vxp-tour-body-h-padding:14px;--vxp-tour-footer-v-padding:10px;--vxp-tour-footer-h-padding:14px;--vxp-tour-close-color:var(--vxp-content-color-placeholder);--vxp-tour-close-color-hover:var(--vxp-content-color-base);--vxp-tour-dot-size:6px;--vxp-tour-dot-bg:var(--vxp-fill-color-secondary);--vxp-tour-dot-bg-active:var(--vxp-color-primary-base);--vxp-tour-dot-span:6px;--vxp-tour-bar-width:12px;--vxp-tour-bar-height:4px;--vxp-tour-bar-width-active:20px;--vxp-tour-bar-bg:var(--vxp-fill-color-secondary);--vxp-tour-bar-bg-active:var(--vxp-color-primary-base);--vxp-tour-bar-span:3px}.vxp-tour{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-tour,.vxp-tour *,.vxp-tour ::after,.vxp-tour ::before{box-sizing:border-box}.vxp-tour--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-tour--permeable{pointer-events:none}.vxp-tour__reference{position:absolute;pointer-events:none}.vxp-tour__bubble{position:absolute;pointer-events:auto}.vxp-tour__bubble--center{top:50%;left:50%;transform:translate(-50%,-50%)}.vxp-tour__bubble--center .vxp-bubble__arrow{display:none}.vxp-tour__bubble--typed{--vxp-tour-title-color:var(--vxp-color-white);--vxp-tour-close-color:rgba(255, 255, 255, 0.6);--vxp-tour-close-color-hover:rgba(255, 255, 255, 0.9);--vxp-tour-dot-bg:rgba(255, 255, 255, 0.2);--vxp-tour-dot-bg-active:rgba(255, 255, 255, 0.8);--vxp-tour-bar-bg:rgba(255, 255, 255, 0.2);--vxp-tour-bar-bg-active:rgba(255, 255, 255, 0.8)}.vxp-tour__bubble .vxp-bubble__content{word-break:normal}.vxp-tour__step{min-width:var(--vxp-tour-min-width);max-width:var(--vxp-tour-max-width);padding:4px 0}.vxp-tour__header{position:relative;display:flex;flex-shrink:0;align-items:center;padding:var(--vxp-tour-header-v-padding) var(--vxp-tour-header-h-padding)}.vxp-tour__title{flex:1 0 0;font-size:var(--vxp-tour-title-font-size);font-weight:var(--vxp-tour-title-weight);color:var(--vxp-tour-title-color)}.vxp-tour__close{display:flex;align-items:center;height:24px;padding:0;margin-inline-start:6px;color:var(--vxp-tour-close-color);cursor:pointer;background-color:transparent;border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-tour__close:focus,.vxp-tour__close:hover{color:var(--vxp-tour-close-color-hover)}.vxp-tour__content{position:relative;flex:auto;min-width:0;min-height:0;padding:var(--vxp-tour-body-v-padding) var(--vxp-tour-body-h-padding)}.vxp-tour__footer{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding:var(--vxp-tour-footer-v-padding) var(--vxp-tour-footer-h-padding)}.vxp-tour__sign{display:inline-flex;align-items:center}.vxp-tour__sign--count{line-height:var(--vxp-line-height-secondary)}.vxp-tour__sign-dot{width:var(--vxp-tour-dot-size);height:var(--vxp-tour-dot-size);margin-inline-end:var(--vxp-tour-dot-span);background-color:var(--vxp-tour-dot-bg);border-radius:50%}.vxp-tour__sign-dot--active{background-color:var(--vxp-tour-dot-bg-active)}.vxp-tour__sign-bar{width:var(--vxp-tour-bar-width);height:var(--vxp-tour-bar-height);margin-inline-end:var(--vxp-tour-bar-span);background-color:var(--vxp-tour-bar-bg);border-radius:var(--vxp-tour-bar-height)}.vxp-tour__sign-bar--active{width:var(--vxp-tour-bar-width-active);background-color:var(--vxp-tour-dot-bg-active)}.vxp-tour__count-sep{margin:0 2px}.vxp-tour__action{line-height:var(--vxp-line-height-secondary)}.vxp-tour__bubble--primary .vxp-tour__action{color:var(--vxp-color-primary-base);border-color:#fff}.vxp-tour__bubble--primary .vxp-tour__action:hover{background-color:rgb(237.15,237.15,237.15)}.vxp-tour__bubble--primary .vxp-tour__action::after{display:none}.vxp-tour__bubble--primary .vxp-tour__action.vxp-button--text{color:#fff;border-color:transparent}.vxp-tour__bubble--info .vxp-tour__action{color:var(--vxp-color-info-base);border-color:#fff}.vxp-tour__bubble--info .vxp-tour__action:hover{background-color:rgb(237.15,237.15,237.15)}.vxp-tour__bubble--info .vxp-tour__action::after{display:none}.vxp-tour__bubble--info .vxp-tour__action.vxp-button--text{color:#fff;border-color:transparent}.vxp-tour__bubble--success .vxp-tour__action{color:var(--vxp-color-success-base);border-color:#fff}.vxp-tour__bubble--success .vxp-tour__action:hover{background-color:rgb(237.15,237.15,237.15)}.vxp-tour__bubble--success .vxp-tour__action::after{display:none}.vxp-tour__bubble--success .vxp-tour__action.vxp-button--text{color:#fff;border-color:transparent}.vxp-tour__bubble--warning .vxp-tour__action{color:var(--vxp-color-warning-base);border-color:#fff}.vxp-tour__bubble--warning .vxp-tour__action:hover{background-color:rgb(237.15,237.15,237.15)}.vxp-tour__bubble--warning .vxp-tour__action::after{display:none}.vxp-tour__bubble--warning .vxp-tour__action.vxp-button--text{color:#fff;border-color:transparent}.vxp-tour__bubble--error .vxp-tour__action{color:var(--vxp-color-error-base);border-color:#fff}.vxp-tour__bubble--error .vxp-tour__action:hover{background-color:rgb(237.15,237.15,237.15)}.vxp-tour__bubble--error .vxp-tour__action::after{display:none}.vxp-tour__bubble--error .vxp-tour__action.vxp-button--text{color:#fff;border-color:transparent}.vxp-tour__bubble--typed .vxp-tour__action{background-color:#fff}.vxp-tour__bubble--typed .vxp-tour__action.vxp-button--text{background-color:transparent}.vxp-tour__bubble--typed .vxp-tour__action.vxp-button--text:hover{background-color:rgba(255,255,255,.2)}.vxp-tour__hollow--active{transition:all var(--vxp-transition-base)}