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

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

.tiny-anchor{position:relative;width:var(--tv-Anchor-width);background-color:var(--tv-Anchor-bg-color);color:var(--tv-Anchor-text-color);font-size:var(--tv-Anchor-font-size)}.tiny-anchor__wrapper{--tv-Anchor-width:160px;--tv-Anchor-bg-color:var(--tv-color-bg-secondary, #fff);--tv-Anchor-text-color:var(--tv-color-text-secondary, #595959);--tv-Anchor-font-size:var(--tv-font-size-default, 14px);--tv-Anchor-link-text-color-active:var(--tv-color-text, #191919);--tv-Anchor-link-margin-left:var(--tv-space-sm, 4px);--tv-Anchor-link-text-color-hover:var(--tv-color-text-secondary, #595959);--tv-Anchor-link-bg-color-active:var(--tv-color-bg-active, #f5f5f5);--tv-Anchor-link-skid-bg-color-active:var(--tv-color-bg-active-primary, #191919);--tv-Anchor-orbit-width:var(--tv-size-base, 4px);--tv-Anchor-link-mask-bg-color:transparent;--tv-Anchor-orbit-bg-color:var(--tv-color-border-divider-short, #dbdbdb);--tv-Anchor-orbit-skid-width:var(--tv-size-base, 4px);--tv-Anchor-dot-border-color:var(--tv-color-border, #c2c2c2);--tv-Anchor-line-bg-color:var(--tv-color-border-divider-short, #dbdbdb);--tv-Anchor-dot-bg-color-active:var(--tv-color-bg-primary, #191919);--tv-Anchor-dot-border-color-active:var(--tv-color-border-hover, #191919);--tv-Anchor-line-opacity:1}.tiny-anchor__affix{position:fixed;z-index:1}.tiny-anchor-link{line-height:22px;cursor:pointer}.tiny-anchor-link-title:hover{color:var(--tv-Anchor-link-text-color-hover)}.tiny-anchor-link-title{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;color:var(--tv-Anchor-text-color)}.tiny-anchor-link-title.tiny-anchor-link-title--active{color:var(--tv-Anchor-link-text-color-active)}.tiny-anchor__line .tiny-anchor-link+.tiny-anchor-link{margin-top:.5em}.tiny-anchor__line .tiny-anchor>.tiny-anchor-link{margin-left:var(--tv-Anchor-link-margin-left)}.tiny-anchor__line .tiny-anchor>.tiny-anchor-link>.tiny-anchor-link>.tiny-anchor-link-title{padding-left:32px}.tiny-anchor__line .tiny-anchor-link-title{padding:7px 8px 7px 16px;font-size:12px;line-height:1.5}.tiny-anchor__line .tiny-anchor-link-title--active{background-color:var(--tv-Anchor-link-bg-color-active)}.tiny-anchor__line .tiny-anchor-link-mask{position:absolute;max-width:0;left:calc(var(--tv-Anchor-orbit-width)/ 2);width:100%;border-top-right-radius:10px;border-bottom-right-radius:10px;background-color:var(--tv-Anchor-link-mask-bg-color)}.tiny-anchor__line .tiny-anchor-orbit{position:absolute;left:0;top:0;bottom:0;width:var(--tv-Anchor-orbit-width);background-color:var(--tv-Anchor-orbit-bg-color)}.tiny-anchor__line .tiny-anchor-orbit-skid{position:absolute;left:0;width:var(--tv-Anchor-orbit-skid-width);background-color:var(--tv-Anchor-orbit-bg-color)}.tiny-anchor__line .tiny-anchor-orbit-skid--active{background-color:var(--tv-Anchor-link-skid-bg-color-active)}.tiny-anchor__dot{width:160px;padding-top:3px}.tiny-anchor__dot .tiny-anchor{padding:0 16px}.tiny-anchor__dot .tiny-anchor-link .tiny-anchor-link .tiny-anchor-link-title{padding-left:40px}.tiny-anchor__dot .tiny-anchor-link-title{position:relative;padding-left:24px;padding-bottom:19px;margin-top:-3px;line-height:22px;-webkit-line-clamp:2}.tiny-anchor__dot .tiny-anchor-link-title::after,.tiny-anchor__dot .tiny-anchor-link-title::before{content:'';position:absolute}.tiny-anchor__dot .tiny-anchor-link-title::before{left:0;top:7px;display:block;width:8px;height:8px;border:1px solid var(--tv-Anchor-dot-border-color);border-radius:50%}.tiny-anchor__dot .tiny-anchor-link-title::after{left:3.5px;top:19px;bottom:0;display:block;width:1px;background-color:var(--tv-Anchor-line-bg-color);opacity:var(--tv-Anchor-line-opacity)}.tiny-anchor__dot .tiny-anchor-link-title--active:before{background-color:var(--tv-Anchor-dot-bg-color-active);border-color:var(--tv-Anchor-dot-border-color-active)}.tiny-anchor__dot .tiny-anchor-link-title--active,.tiny-anchor__dot .tiny-anchor-link-title:hover{color:var(--tv-Anchor-link-text-color-active)}.tiny-anchor__dot .tiny-anchor-link-title--active:before,.tiny-anchor__dot .tiny-anchor-link-title:hover:before{border-color:var(--tv-Anchor-dot-border-color-active);opacity:1}.tiny-anchor__dot .tiny-anchor>.tiny-anchor-link:last-child:not(:has(>.tiny-anchor-link))>.tiny-anchor-link-title:after,.tiny-anchor__dot .tiny-anchor>.tiny-anchor-link:last-child>.tiny-anchor-link:last-child>.tiny-anchor-link-title:after{display:none}