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

.widget-wrapper.toc
  background: var(--site-bg)
  z-index 1
// 目录基本样式
.widget-wrapper.toc .toc
  --fsp: $fsp2
  padding: 0
  margin: 0
  position relative
  list-style: none
  .toc-child
    padding-left: 1em
  li
    margin: 2px 0
    list-style: none
  a  
    padding: 4px var(--gap-max)
    color: var(--text-p2)
    display: block
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    position relative
    &:before,&:after
      position: absolute
      left: 'calc(%s * 0.5)' % var(--gap-max)
      width: 8px
      height: 8px
      top: 'calc(%s - 4px)' % 50%
      border-radius: 8px
      background: var(--block)
      background: $color-theme
    &:after
      opacity 0
      animation: wave 1s linear infinite
      @keyframes wave
        from
          transform: scale(1)
          opacity 1
        to
          transform: scale(2)
          opacity 0
    
// 固定位置
.l_right .widgets .widget-wrapper.toc
  position: sticky
  position: -webkit-sticky
  top: 0
  margin-top: 0
  padding: 16px 0
  .widget-body .toc
    max-height: 75vh
    @media screen and (max-width: $device-laptop)
      max-height: unset
    overflow: scroll



// 各级缩进样式
.widget-wrapper.toc .toc
  .toc-item
    font-weight: 500
    --fsp: $fsp1
  .toc-item  .toc-item
    font-weight: 400
    --fsp: $fsp2

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

.widget-wrapper.toc .toc a.toc-link:hover
  color: $color-theme

// 始终折叠
.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-footer
  margin-top: 8px
  color: var(--text-p2)
  position relative
  padding-top: 8px
  &:before 
    content: ''
    position absolute
    background: var(--block-border)
    top: 0
    height: 1px
    left: var(--gap-max)
    right: var(--gap-max)
  a
    display: flex
    align-items: center
    color: inherit
    font-size: $fs-14
    padding: 8px 16px
    margin: 0 calc(var(--gap-max) - 16px)
    border-radius: 4px
    svg,img
      height: 16px
      width: auto
      margin-right: 8px
  a:hover
    background: var(--block-hover)