fix: overflow list bottom gradient on toc (closes #1888)

This commit is contained in:
Jacky Zhao 2025-03-30 17:30:01 -07:00
parent 9ff6c7a3f5
commit f70e562432
3 changed files with 22 additions and 25 deletions

View file

@ -53,8 +53,7 @@ export default ((opts?: Partial<Options>) => {
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </button>
<div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}> <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
<OverflowList>
{fileData.toc.map((tocEntry) => ( {fileData.toc.map((tocEntry) => (
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}> <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}> <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
@ -64,7 +63,6 @@ export default ((opts?: Partial<Options>) => {
))} ))}
</OverflowList> </OverflowList>
</div> </div>
</div>
) )
} }

View file

@ -45,14 +45,13 @@ button.toc-header {
} }
} }
.toc-content { ul.toc-content {
list-style: none; list-style: none;
position: relative; position: relative;
& ul {
list-style: none;
margin: 0.5rem 0; margin: 0.5rem 0;
padding: 0; padding: 0;
list-style: none;
& > li > a { & > li > a {
color: var(--dark); color: var(--dark);
opacity: 0.35; opacity: 0.35;
@ -63,7 +62,6 @@ button.toc-header {
opacity: 0.75; opacity: 0.75;
} }
} }
}
@for $i from 0 through 6 { @for $i from 0 through 6 {
& .depth-#{$i} { & .depth-#{$i} {

View file

@ -556,6 +556,7 @@ video {
div:has(> .overflow) { div:has(> .overflow) {
display: flex; display: flex;
max-height: 100%; max-height: 100%;
overflow-y: hidden;
} }
ul.overflow, ul.overflow,