90 lines
1.4 KiB
SCSS
90 lines
1.4 KiB
SCSS
|
details.toc {
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
background-color: var(--bg);
|
|||
|
|
transition: .5s all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc summary {
|
|||
|
|
position: relative;
|
|||
|
|
width: fit-content;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background-color: var(--bg);
|
|||
|
|
transition: .5s all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc div {
|
|||
|
|
background-color: var(--bg);
|
|||
|
|
transition: .5s all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc ul {
|
|||
|
|
list-style-type: none;
|
|||
|
|
padding-inline-start: 1em;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc ul > li {
|
|||
|
|
margin: 1em 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc-bar,
|
|||
|
|
details.toc-lines {
|
|||
|
|
& summary {
|
|||
|
|
padding-right: 0.5em;
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
& summary::-webkit-details-marker {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
& div {
|
|||
|
|
padding-top: 1em;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc-bar {
|
|||
|
|
top: 1rem;
|
|||
|
|
background-color: transparent;
|
|||
|
|
|
|||
|
|
& div {
|
|||
|
|
top: -1em;
|
|||
|
|
padding-top: 2em;
|
|||
|
|
background-color: var(--bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
& summary {
|
|||
|
|
--toc-bar-ht: 4px;
|
|||
|
|
--toc-bar-wd: 8%;
|
|||
|
|
width: var(--toc-bar-wd);
|
|||
|
|
height: var(--toc-bar-ht);
|
|||
|
|
margin-left: calc(50% - var(--toc-bar-wd) / 2);
|
|||
|
|
border-radius: calc(var(--toc-bar-ht) / 2);
|
|||
|
|
background-color: var(--ft);
|
|||
|
|
box-shadow: var(--bg) 0 0 8px 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc-default,
|
|||
|
|
details.toc-lines {
|
|||
|
|
& summary {
|
|||
|
|
padding-top: 1em;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details.toc-lines {
|
|||
|
|
& summary::before {
|
|||
|
|
content: "≡";
|
|||
|
|
font-size: 1.5em;
|
|||
|
|
position: relative;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
details[open] {
|
|||
|
|
&.toc-lines summary::before {
|
|||
|
|
content: "×";
|
|||
|
|
font-size: 1.7em;
|
|||
|
|
top: -4px;
|
|||
|
|
}
|
|||
|
|
}
|