2024-02-05 18:01:50 +08:00
|
|
|
.widget-wrapper.toc
|
|
|
|
|
background: var(--site-bg)
|
|
|
|
|
z-index 1
|
2024-02-05 10:03:55 +08:00
|
|
|
// 目录基本样式
|
|
|
|
|
.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
|
2024-02-05 18:01:50 +08:00
|
|
|
padding: 4px var(--gap-max)
|
2024-02-05 10:03:55 +08:00
|
|
|
color: var(--text-p2)
|
|
|
|
|
display: block
|
|
|
|
|
overflow: hidden
|
|
|
|
|
text-overflow: ellipsis
|
|
|
|
|
white-space: nowrap
|
|
|
|
|
position relative
|
|
|
|
|
&:before,&:after
|
|
|
|
|
position: absolute
|
2024-02-05 18:01:50 +08:00
|
|
|
left: 'calc(%s * 0.5)' % var(--gap-max)
|
2024-02-05 10:03:55 +08:00
|
|
|
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
|
|
|
|
|
|
|
|
|
|
// 固定位置
|
2024-02-05 18:01:50 +08:00
|
|
|
.l_right .widgets .widget-wrapper.toc
|
2024-02-05 10:03:55 +08:00
|
|
|
position: sticky
|
|
|
|
|
position: -webkit-sticky
|
2024-02-05 18:01:50 +08:00
|
|
|
top: 0
|
|
|
|
|
margin-top: 0
|
|
|
|
|
padding: 16px 0
|
|
|
|
|
.widget-body .toc
|
|
|
|
|
max-height: 75vh
|
|
|
|
|
@media screen and (max-width: $device-laptop)
|
|
|
|
|
max-height: unset
|
2024-02-05 19:49:33 +08:00
|
|
|
overflow: auto
|
2024-02-05 18:01:50 +08:00
|
|
|
|
|
|
|
|
|
2024-02-05 10:03:55 +08:00
|
|
|
|
|
|
|
|
// 各级缩进样式
|
|
|
|
|
.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)
|
2024-02-05 18:01:50 +08:00
|
|
|
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)
|
