hexo-theme-stellar/source/css/_components/widgets/toc.styl

.widget-wrapper.toc
  background: var(--site-bg)
  z-index 3
  .widget-body
    position relative
    &:before
      content: ''
      position absolute
      top: 6px
      bottom: 6px
      left: 0
      width: 4px
      background: var(--block)
      border-radius: 4px

// 目录基本样式
.widget-wrapper.toc .toc
  --fsp: $fsp2
  padding: 0
  margin: 0
  position relative
  list-style: none
  li
    margin: 0
    list-style: none
  a
    --padding: calc(var(--gap-padding) / 2)
    --padding-offset: calc(0 - var(--padding))
    padding: 6px var(--padding)
    margin: 0 var(--padding)
    color: var(--text-p3)
    display: block
    position relative
    border-radius: $border-bar
    trans1 all
    &.active:before
      content: ''
      position absolute
      top: 6px
      bottom: 6px
      left: -8px
      width: 4px
      background: $color-theme
      border-radius: 4px
    &:hover
      background: var(--block-hover)
      color: var(--text)
    
// 固定位置
.l_right .widgets .widget-wrapper.toc
  margin-top: 0
  position: sticky
  position: -webkit-sticky
  top: 0
  padding: 16px 0
  &:first-child
    top: 8px
    padding-top: 8px
  .widget-body .toc
    max-height: 70vh
    @media screen and (max-width: $device-laptop)
      max-height: unset
    overflow: auto
    scrollbar(0, 0)



// 各级缩进样式
.widget-wrapper.toc .toc
  .toc-item
    font-weight: 500
    --fsp: $fsp1
  .toc-item .toc-item
    font-weight: 400
    --fsp: $fsp2
  ol
    padding-left: 0
  .toc-child .toc-link
    padding-left: 1.5rem
  .toc-child .toc-child .toc-link
    padding-left: 2.5rem
  .toc-child .toc-child .toc-child .toc-link
    padding-left: 3.5rem
  .toc-child .toc-child .toc-child .toc-child .toc-link
    padding-left: 4.5rem
  .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link
    padding-left: 5rem

// 高亮样式
.widget-wrapper.toc .toc a.toc-link.active
  color: var(--text)
  &:before,&:after
    content: ''

// 始终折叠
.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
.l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover
  background: var(--block-border)
.l_right .widgets .widget-wrapper.toc.collapse
  .widget-header .cap-action
    background: var(--block-border)
  .widget-body
    grid-template-rows: 0fr

// 编辑本文按钮
.widget-wrapper.toc .widget-body+.widget-footer:before 
  content: ''
  position absolute
  background: var(--block-border)
  top: 0
  height: 1px
  left: var(--gap-padding)
  right: var(--gap-padding)
.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-padding)
    border-radius: $border-bar
    trans1 all
    svg,img
      height: 16px
      width: auto
      margin-right: 8px
  a:hover
    background: var(--block-hover)
    color: var(--text)

.widget-wrapper.toc+.widget-wrapper
  padding-top: 32px

@media screen and (max-width: $device-laptop)
  .l_right
    blur-effect()
    .widgets
      .widget-wrapper.toc
        position: static
        background: none
  .widget-wrapper.toc .toc
    a
      color: var(--text-p2)
  .widget-wrapper.toc .widget-footer
    a
      background: var(--alpha100)
    a+a
      margin-top: 4px