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

90 lines
1.9 KiB
Stylus

//
.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-l)
color: var(--text-p2)
display: block
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
position relative
&:before,&:after
position: absolute
left: 4px
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 .widget-wrapper.toc
position: sticky
position: -webkit-sticky
top: 32px
max-height: 'calc(90vh - 2 * %s)' % @top
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