e8a3368226
This is still not perfect, but it reduces the shift that happens when navigating between pages that have and don't have the table of contents. It also tries to reduce the theme flicker that happens by moving its loading to an earlier moment. Release Notes: - N/A
80 lines
1.4 KiB
CSS
80 lines
1.4 KiB
CSS
.pagetoc {
|
|
box-sizing: border-box;
|
|
position: sticky;
|
|
top: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
width: 220px;
|
|
padding: 28px 0 120px 0;
|
|
max-height: calc(100svh - 50px);
|
|
overflow-x: hidden;
|
|
}
|
|
.pagetoc > :last-child {
|
|
margin-bottom: 16px;
|
|
}
|
|
.pagetoc a {
|
|
width: fit-content;
|
|
font-size: 1.4rem;
|
|
color: var(--fg) !important;
|
|
display: inline-block;
|
|
padding: 2px 0;
|
|
text-align: left;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--toc-link-underline);
|
|
}
|
|
.pagetoc a:hover {
|
|
text-decoration-color: var(--toc-link-underline-hover);
|
|
}
|
|
.pagetoc a.active {
|
|
background-color: var(--sidebar-active-bg);
|
|
color: var(--sidebar-active) !important;
|
|
text-decoration-color: hsl(219, 93%, 42%, 0.1);
|
|
}
|
|
.pagetoc a.active:hover {
|
|
text-decoration-color: hsl(219, 93%, 42%, 0.8);
|
|
}
|
|
.pagetoc .active {
|
|
background: var(--sidebar-bg);
|
|
color: var(--sidebar-fg);
|
|
}
|
|
.pagetoc .pagetoc-H1 {
|
|
display: none;
|
|
}
|
|
.pagetoc .pagetoc-H3 {
|
|
margin-left: 2ch;
|
|
}
|
|
.pagetoc .pagetoc-H4 {
|
|
margin-left: 4ch;
|
|
}
|
|
.pagetoc .pagetoc-H5 {
|
|
display: none;
|
|
}
|
|
.pagetoc .pagetoc-H6 {
|
|
display: none;
|
|
}
|
|
.toc-title {
|
|
margin: 0;
|
|
margin-bottom: 6px;
|
|
font-size: 1.4rem;
|
|
color: var(--full-contrast);
|
|
}
|
|
|
|
.toc-container {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.toc-container.has-toc {
|
|
visibility: visible;
|
|
}
|
|
|
|
.toc-container.no-toc {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 1020px) {
|
|
.toc-container {
|
|
display: none;
|
|
}
|
|
}
|