You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.2 KiB
110 lines
2.2 KiB
.l_side .toc-wrapper{ |
|
z-index: 1; |
|
overflow: hidden; |
|
border-radius: @border_radius; |
|
position: sticky; |
|
top: @height_navbar + @gap; |
|
.enable-trans(); |
|
header{ |
|
position: sticky; |
|
width: 100%; |
|
top: 0; |
|
padding-bottom: @gap/4; |
|
} |
|
.content{ |
|
max-height: ~"calc(100vh - 5 * @{gap} - @{height_navbar})";; |
|
overflow: auto; |
|
a { |
|
border-left: 4px solid transparent; |
|
&:hover{ |
|
background: fade(@theme_main, 10%); |
|
} |
|
&:active{ |
|
border-left: 8px solid @theme_main; |
|
} |
|
&.active{ |
|
color: @theme_main; |
|
border-left: 4px solid @theme_main; |
|
} |
|
} |
|
} |
|
&.active{ |
|
position: fixed; |
|
box-shadow: @boxshadow_card_raised; |
|
top: @height_navbar; |
|
header{ |
|
.s-toc{ |
|
transform: rotate(30deg); |
|
} |
|
} |
|
width: @width_sidebar; |
|
@media(max-width: @on_desktop) { |
|
width: @width_sidebar_m; |
|
} |
|
@media(max-width: @on_pad) { |
|
width: ~"calc(100% - 2 * @{gap})"; |
|
} |
|
} |
|
.enable-trans(); |
|
@media(max-width: @on_pad){ |
|
position: fixed; |
|
max-height: 1000px; |
|
width: ~"calc(100% - 2 * @{gap})"; |
|
top: @height_navbar; |
|
box-shadow: @boxshadow_card_raised; |
|
visibility: hidden; |
|
transform: scale(0,0); |
|
transform-origin: right top; |
|
&.active{ |
|
visibility: visible; |
|
transform: scale(1,1); |
|
} |
|
} |
|
|
|
a { |
|
padding-left: 8px; |
|
color: fade(@color_text_main, 70%); |
|
font-size: @fontsize_small; |
|
display: inline-block; |
|
} |
|
ol{ |
|
.toc-item.toc-level-1 { |
|
.toc-child a{ |
|
padding-left: 0.8*@gap; |
|
font-weight: normal; |
|
} |
|
} |
|
.toc-item.toc-level-2 { |
|
.toc-child a{ |
|
padding-left: 1.6*@gap; |
|
font-weight: normal; |
|
} |
|
} |
|
.toc-item.toc-level-3 { |
|
.toc-child a{ |
|
padding-left: 2.4*@gap; |
|
font-weight: normal; |
|
} |
|
} |
|
.toc-item.toc-level-4 { |
|
.toc-child a{ |
|
padding-left: 3.2*@gap; |
|
font-weight: normal; |
|
} |
|
} |
|
li{ |
|
a{ |
|
padding: 0 @gap/2 0 (@gap - 5px); |
|
font-weight: bold; |
|
width: 100%; |
|
|
|
} |
|
width: auto; |
|
text-align: left; |
|
// &:extend(.txt-ellipsis); |
|
} |
|
} |
|
&:empty{ |
|
display:none; |
|
} |
|
}
|
|
|