.widget-wrapper.toc z-index 3 .widget-body position relative .toc:before content: '' position absolute top: 8px bottom: 8px left: 0 width: 4px background: var(--block) border-radius: 4px if !$site-background-image @media screen and (min-width: $device-laptop) background: var(--background) .site-region__surface .widget-wrapper.toc @media screen and (min-width: $device-laptop) background: none .site-region--rightbar .widgets > .widget-instance--toc:not(:last-child) > .widget-wrapper.toc background: var(--background) // 目录基本样式 .widget-wrapper.toc .toc --fs-content: $fs-content-2 min-width: 0 padding: 0 margin: 0 position relative list-style: none &:after content: '' position: absolute pointer-events: none top: 4px left: 0 width: 4px height: calc(var(--toc-active-height, 8px) - 8px) border-radius: 4px background: var(--theme) opacity: var(--toc-active-opacity, 0) transform: translateY(var(--toc-active-y, 0px)) transition: transform 0.2s ease, height 0.2s ease @media (prefers-reduced-motion: reduce) transition: none li margin: 0 list-style: none a --padding: calc(var(--gap-base) / 2) --padding-offset: calc(0 - var(--padding)) padding: 4px var(--padding) margin: 0 var(--padding) color: var(--ui-item-muted) opacity: 0.5 display: block position relative border-radius: $border-bar trans1 all &:hover color: var(--ui-item-title) opacity: 1 .toc-text display: block txt-ellipsis() // 桌面 Rightbar 的吸顶由 widget-instance 承载，目录正文独立滚动。 :is([data-region='leftbar'], [data-region='rightbar']) .widgets .widget-wrapper.toc margin-top: 1rem position: static padding: 1rem 0 &:first-child padding-top: 1rem .widget-body .toc max-height: none overflow: visible // 各级缩进样式 .widget-wrapper.toc .toc .toc-item font-weight: $fw-600 --fs-content: $fs-content-1 .toc-item .toc-item font-weight: $fw-400 --fs-content: $fs-content-2 ol padding-left: 0 .toc-child .toc-link padding-left: calc(var(--padding) + var(--gap-base) * 1) .toc-child .toc-child .toc-link padding-left: calc(var(--padding) + var(--gap-base) * 2) .toc-child .toc-child .toc-child .toc-link padding-left: calc(var(--padding) + var(--gap-base) * 3) .toc-child .toc-child .toc-child .toc-child .toc-link padding-left: calc(var(--padding) + var(--gap-base) * 4) .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link padding-left: calc(var(--padding) + var(--gap-base) * 5) // 高亮样式 .widget-wrapper.toc .toc a.toc-link.active color: var(--text) opacity: 1 // 始终折叠 .widget-wrapper.toc[collapse='true'] .toc-item a.toc-link+ol display: none // 激活上级目录时显示子目录 .toc a.toc-link.active+ol display: block // 自动折叠 .widget-wrapper.toc[collapse='auto'] .toc-item a.toc-link+ol display: none // 激活上级目录时显示子目录 .toc a.toc-link.active+ol display: block // 鼠标放上去时显示子目录 &:hover a.toc-link+ol display: block // 子目录激活时显示 .widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active) display: block .widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active) display: block // 手动折叠 .widget-wrapper.toc .widget-body display: grid grid-template-rows: 1fr trans1 all overflow hidden :is([data-region='leftbar'], [data-region='rightbar']) .widgets .widget-wrapper.toc.collapse .widget-header .cap-action color: var(--accent) opacity: 1 .widget-body grid-template-rows: 0fr @media screen and (min-width: $device-laptop + 1px) .site-region--rightbar .widgets .widget-wrapper.toc box-sizing: border-box display: flex flex-direction: column max-height: var(--rightbar-panel-height) .widget-header, .widget-footer flex-shrink: 0 .widget-body display: block flex: 0 1 auto min-height: 0 max-height: 70vh overflow-x: hidden overflow-y: auto overscroll-behavior: contain scrollbar(0, 0) &.collapse .widget-body max-height: 0 // 联动折叠时，同一份目录链接呈现为居中的横线列表。 @media screen and (min-width: $device-laptop + 1px) html[data-leftbar-state='collapsed'] .site-shell[data-regions~='leftbar'][data-regions~='rightbar'] .site-region--rightbar:not(:hover):not(:focus-within) .widgets .widget-wrapper.toc margin: 0 padding: 0 max-height: unquote('min(80vh, var(--rightbar-panel-height))') background: transparent .widget-header, .widget-footer, .toc:before display: none .widget-body display: block max-height: unquote('min(80vh, var(--rightbar-panel-height))') overflow-x: hidden overflow-y: auto .toc width: 32px margin: 0 auto padding: 0 .toc:after top: 6px width: 32px height: 4px border-radius: 999px .toc ol display: block padding: 0 .toc a.toc-link box-sizing: border-box display: block width: 32px height: 16px margin: 0 padding: 0 font-size: 0 line-height: 0 color: transparent background: transparent border: 0 box-shadow: none transition: none > span opacity: 0 &:before content: '' position: absolute left: 0 top: 7px bottom: auto width: 24px height: 2px border-radius: 999px background: var(--text-p2) opacity: 0.2 transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, background-color 0.2s ease, opacity 0.2s ease &:after display: none // 操作按钮（回到顶部 / 参与讨论） .widget-wrapper.toc .widget-footer:before content: '' position absolute background: var(--block-border) top: 0 height: 1px left: var(--gap-base) right: var(--gap-base) .widget-wrapper.toc .widget-footer margin-top: 8px color: var(--text-p2) position relative padding-top: 8px a display: flex align-items: center color: inherit font-size: $fs-14 padding: 8px var(--gap-base) border-radius: $border-bar trans1 all .ui-icon --ui-icon-size: 16px margin-right: 8px a:hover color: var(--text) .widget-wrapper.toc+.widget-wrapper padding-top: 32px @media screen and (max-width: $device-laptop) :is([data-region='leftbar'], [data-region='rightbar']) .widgets .widget-wrapper.toc position: static background: none padding: 0 &:first-child padding-top: 0 .widget-wrapper.toc .toc a color: var(--text-p2) .widget-wrapper.toc .widget-footer a background: var(--block) a+a margin-top: 4px