145 lines
2.3 KiB
CSS
145 lines
2.3 KiB
CSS
@import "./types-toc.css";
|
|
@import "./intro-toc.css";
|
|
|
|
.toc-wrapper {
|
|
display: none;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.toc-wrapper-mobile {
|
|
display: block;
|
|
|
|
background-color: transparent;
|
|
}
|
|
|
|
.toc-content > p {
|
|
margin-top: 0.3rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.toc-toggle {
|
|
--width: 80svw;
|
|
display: block;
|
|
position: unset;
|
|
height: 24px;
|
|
font-size: 1.614rem;
|
|
max-height: 500px;
|
|
|
|
& > svg {
|
|
height: 100%;
|
|
width: 24px;
|
|
}
|
|
|
|
& div {
|
|
width: 100%;
|
|
height: max-content;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
& .toc-mobile {
|
|
position: absolute;
|
|
top: 2.5rem;
|
|
right: -1rem;
|
|
width: 0;
|
|
height: calc(100svh - 3.5rem);
|
|
font-size: 1rem;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
background-color: hsl(var(--overlay-bkg));
|
|
border-left: 1px solid hsl(var(--overlay-bkg-border));
|
|
cursor: default;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
transition: width 0.3s ease, padding 0.3s ease;
|
|
|
|
&.shown {
|
|
& .toc-content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
overflow-y: scroll;
|
|
width: var(--width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 40rem) {
|
|
.toc-toggle {
|
|
--width: 19rem;
|
|
}
|
|
|
|
.toc-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 65rem) {
|
|
.dim-content-toc .docslayout-root {
|
|
filter: unset !important;
|
|
pointer-events: initial !important;
|
|
}
|
|
|
|
.toc-wrapper {
|
|
width: 19rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toc-wrapper-mobile {
|
|
display: none;
|
|
}
|
|
|
|
.toc-wrapper {
|
|
--width: 19rem;
|
|
background-color: transparent;
|
|
display: block;
|
|
position: sticky;
|
|
top: 3.5rem;
|
|
max-width: 19rem;
|
|
max-height: calc(100svh - 3.5rem);
|
|
overflow-y: scroll;
|
|
z-index: 9;
|
|
margin-right: 1.272rem;
|
|
|
|
& .toc_a {
|
|
transition: color 0.33s;
|
|
color: hsl(var(--toc-link));
|
|
}
|
|
|
|
& ul {
|
|
margin: 0;
|
|
}
|
|
|
|
& li {
|
|
list-style: none;
|
|
|
|
&.active {
|
|
& > .toc_a {
|
|
color: hsl(var(--toc-link-active));
|
|
}
|
|
}
|
|
}
|
|
|
|
& .toc_heading {
|
|
margin: 0;
|
|
margin-block: 0.618rem;
|
|
|
|
& .toc_heading * {
|
|
margin-left: 0.348rem;
|
|
}
|
|
}
|
|
}
|
|
}
|