182 lines
4.0 KiB
Stylus
182 lines
4.0 KiB
Stylus
.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 |