@opentiny/vue-theme/guide/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-guide{--tv-Guide-arrow-height:16px;--tv-Guide-arrow-width:16px;--tv-Guide-header-border-radius:var(--tv-border-radius-lg, 8px);--tv-Guide-header-line-height:var(--tv-line-height-number, 1.5);--tv-Guide-header-bg-color:var(--tv-color-bg-2, #ffffff);--tv-Guide-title-text-color:var(--tv-color-text, #191919);--tv-Guide-title-line-height:var(--tv-line-height-number, 1.5);--tv-Guide-title-font-weight:var(--tv-font-weight-bold, 600);--tv-Guide-title-text-font-size:var(--tv-font-size-lg, 16px);--tv-Guide-cancel-icon-width:var(--tv-icon-size, 16px);--tv-Guide-cancel-icon-height:var(--tv-icon-size, 16px);--tv-Guide-cancel-icon-color:var(--tv-color-icon, #808080);--tv-Guide-cancel-hover-icon-color:var(--tv-color-icon-hover, #191919);--tv-Guide-text-text-color:var(--tv-color-text-secondary, #595959);--tv-Guide-text-line-height:var(--tv-line-height-number, 1.5);--tv-Guide-text-font-size:var(--tv-font-size-default, 14px);--tv-Guide-text-scrollbar-border-color:var(--tv-color-bg-scrollbar-thumb, #dbdbdb);--tv-Guide-footer-border-bottom-right-radius:var(--tv-border-radius-lg, 8px);--tv-Guide-footer-border-bottom-left-radius:var(--tv-border-radius-lg, 8px);--tv-Guide-progress-text-color:var(--tv-color-text, #191919);--tv-Guide-button-text-color:var(--tv-color-text, #191919);--tv-Guide-button-border-color:var(--tv-color-border-secondary, #595959);--tv-Guide-button-border-radius:var(--tv-border-radius-brand, 999px);--tv-Guide-button-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Guide-button-hover-border-color:var(--tv-color-border, #c2c2c2);--tv-Guide-button-disable-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Guide-button-disable-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Guide-button-font-size:var(--tv-font-size-sm, 12px);--tv-Guide-button-width:68px;--tv-Guide-button-height:var(--tv-size-height-xs, 24px);--tv-Guide-shepherd-element-border-radius:var(--tv-border-radius-lg, 8px);--tv-Guide-progresss-text-color:var(--tv-color-text-weaken, #808080)}.tiny-guide .shepherd-arrow{height:calc(var(--tv-Guide-arrow-height) * 1.4);position:absolute;width:calc(var(--tv-Guide-arrow-width) * 1.4);z-index:-10;overflow:hidden}.tiny-guide .shepherd-arrow:before{width:var(--tv-Guide-arrow-width);position:absolute;height:var(--tv-Guide-arrow-height);background-color:var(--tv-Guide-header-bg-color);-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);left:50%;top:50%;z-index:-10;content:''}.tiny-guide .shepherd-content{width:100%;padding:0;outline:0}.tiny-guide .shepherd-content .shepherd-header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top-left-radius:var(--tv-Guide-header-border-radius);border-top-right-radius:var(--tv-Guide-header-border-radius);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;line-height:var(--tv-Guide-header-line-height);padding:24px 24px 0;background-color:var(--tv-Guide-header-bg-color)}.tiny-guide .shepherd-content .shepherd-header .shepherd-title{font-size:var(--tv-Guide-title-text-font-size);color:var(--tv-Guide-title-text-color);line-height:var(--tv-Guide-title-line-height);font-weight:var(--tv-Guide-title-font-weight);display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.tiny-guide .shepherd-content .shepherd-header .shepherd-cancel-icon{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:transparent;border:none;cursor:pointer;margin:0;padding:0;-webkit-transition:color .5s ease;transition:color .5s ease}.tiny-guide .shepherd-content .shepherd-header .shepherd-cancel-icon span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:-12px;margin-right:-4px}.tiny-guide .shepherd-content .shepherd-header .shepherd-cancel-icon span svg{width:var(--tv-Guide-cancel-icon-width);height:var(--tv-Guide-cancel-icon-height);fill:var(--tv-Guide-cancel-icon-color)}.tiny-guide .shepherd-content .shepherd-header .shepherd-cancel-icon span:hover svg{fill:var(--tv-Guide-cancel-hover-icon-color)}.tiny-guide .shepherd-content .shepherd-text{line-height:var(--tv-Guide-text-line-height);color:var(--tv-Guide-text-text-color);font-size:var(--tv-Guide-text-font-size);padding:8px 24px 24px}.tiny-guide .shepherd-content .shepherd-text .scrollBox{width:100%;overflow:auto;text-align:justify;padding-right:8px}.tiny-guide .shepherd-content .shepherd-text .scrollBox::-webkit-scrollbar{width:4px;height:40px}.tiny-guide .shepherd-content .shepherd-text .scrollBox::-webkit-scrollbar-thumb{width:8px;height:8px;border-radius:2px;background-clip:padding-box;border:4px solid var(--tv-Guide-text-scrollbar-border-color)}.tiny-guide .shepherd-content .shepherd-text p{margin-top:0}.tiny-guide .shepherd-content .shepherd-text p:last-child{margin-bottom:0}.tiny-guide .shepherd-content .shepherd-footer{border-bottom-right-radius:var(--tv-Guide-footer-border-bottom-right-radius);border-bottom-left-radius:var(--tv-Guide-footer-border-bottom-left-radius);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:0 24px 24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.tiny-guide .shepherd-content .shepherd-footer.shepherd-button:last-child{margin-right:0}.tiny-guide .shepherd-content .shepherd-footer .progress-style{position:absolute;left:24px;font-size:14px;color:var(--tv-Guide-progresss-text-color);font-weight:400}.tiny-guide .shepherd-content .shepherd-footer .shepherd-button{color:var(--tv-Guide-button-text-color);background-color:var(--tv-Guide-button-bg-color);cursor:pointer;border-radius:var(--tv-Guide-button-border-radius);border:1px solid var(--tv-Guide-button-border-color);width:var(--tv-Guide-button-width);height:var(--tv-Guide-button-height);margin-left:8px;text-align:center;-webkit-transition:all .5s ease;transition:all .5s ease;font-size:var(--tv-Guide-button-font-size)}.tiny-guide .shepherd-content .shepherd-footer .shepherd-button:hover{border-color:var(--tv-Guide-button-hover-border-color)}.tiny-guide .shepherd-content .shepherd-footer .shepherd-button:disabled{background-color:var(--tv-Guide-button-disable-bg-color);color:var(--tv-Guide-button-disable-text-color);cursor:not-allowed}.tiny-guide.only-content .shepherd-header{padding-top:0}.tiny-guide.only-content .shepherd-header .shepherd-cancel-icon{position:absolute;top:24px}.tiny-guide.only-content .shepherd-text{padding-right:52px;margin-top:12px}.tiny-guide .tiny-guide__z-top{z-index:9999;position:relative;background-color:var(--tv-Guide-header-bg-color)}.tiny-guide.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:var(--tv-Guide-header-bg-color)}.tiny-guide.shepherd-element{height:auto;-webkit-box-shadow:0 16px 48px 0 rgba(0,0,0,.16);box-shadow:0 16px 48px 0 rgba(0,0,0,.16);background-color:var(--tv-Guide-header-bg-color);opacity:0;visibility:hidden;z-index:9999;width:var(--tiny-guide-shepherd-element-size);outline:0;border-radius:var(--tv-Guide-shepherd-element-border-radius);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.tiny-guide.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.tiny-guide.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.tiny-guide.shepherd-element,.tiny-guide.shepherd-element *,.tiny-guide.shepherd-element :after,.tiny-guide.shepherd-element :before{-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-guide.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:calc(-.7 * var(--tv-Guide-arrow-width))}.tiny-guide.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:calc(-.7 * var(--tv-Guide-arrow-width))}.tiny-guide.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:calc(-.7 * var(--tv-Guide-arrow-width))}.tiny-guide.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:calc(-.7 * var(--tv-Guide-arrow-width))}.tiny-guide.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.tiny-guide.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.tiny-guide.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}.shepherd-modal-overlay-container{pointer-events:none;width:100%;overflow:hidden;height:100%;left:0;right:0;bottom:0;opacity:0;position:fixed;z-index:9997;top:0;-webkit-transition:all .3s ease-out,height 0s .3s,opacity .3s 0s;transition:all .3s ease-out,height 0s .3s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible{opacity:.5;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:all .3s ease-out,height 0s 0s,opacity .3s 0s;transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}.tiny-guide__z-top{z-index:9999;position:relative;background-color:var(--tv-Guide-header-bg-color)}