.toc { margin: 16px 0; padding-left: 0; font-size: 12px; list-style: none; border-left: 1px solid @site-border-color-split; .ant-row-rtl & { border-right: 1px solid @site-border-color-split; border-left: none; } } ul.toc > li { margin-left: 0; padding-left: 0; line-height: 1.5; list-style: none; &:not(:last-child) { margin-bottom: 4px; } .ant-row-rtl & { margin-right: 0; padding-right: 0; } } .toc li > ul { display: none; font-size: 12px; text-indent: 8px; } .toc a { display: block; width: 110px; margin-left: -1px; padding-left: 16px; overflow: hidden; color: @site-text-color; white-space: nowrap; text-overflow: ellipsis; border-left: 1px solid transparent; transition: all 0.3s ease; .ant-row-rtl & { margin-right: -1px; margin-left: 0; padding-right: 16px; padding-left: 0; border-right: 1px solid transparent; border-left: none; } } .toc a:hover { color: @primary-color; } .toc a.current { color: @primary-color; border-color: @primary-color; } .toc-affix { position: absolute; top: 8px; right: 20px; .ant-affix { z-index: 9; max-height: ~'calc(100vh - 16px)'; overflow-x: hidden; overflow-y: auto; background: #fff; } .ant-row-rtl & { right: auto; left: 20px; } } .toc-affix-bottom { position: absolute; right: 20px; bottom: 88px; .ant-affix { background: @body-background; } .ant-row-rtl & { right: auto; left: 20px; } }