dotty_res.styles.theme.components.table-of-content.css Maven / Gradle / Ivy
#toc {
display: flex;
flex-direction: column;
width: 232px;
}
#toc-container {
width: 232px;
position: sticky;
top: calc(18 * var(--base-spacing));
padding: var(--base-spacing);
}
@media (max-height: 600px) and (orientation: landscape){
#toc-container {
position: fixed;
top: 90px;
}
}
.toc-list {
margin-block-start: calc(2 * var(--base-spacing));
margin-block-end: 0;
}
#toc ul {
list-style-type: none;
padding: 0;
}
#toc li {
margin-bottom: calc(2.5 * var(--base-spacing));
}
#toc .toc-list li > ul {
margin-top: calc(2.5 * var(--base-spacing));
padding-left: calc(3 * var(--base-spacing));
}
/*@media (max-width: 1366px) {
#toc {
left: calc(102 * var(--base-spacing));
}
}*/
@media (max-height: 820px) and (orientation: landscape){
.toc-nav {
max-height: calc(100vh - 200px);
overflow: auto;
}
}
@media (max-width: 768px) {
#toc {
display: none;
}
}
.toc-title {
color: var(--text-primary);
margin-bottom: calc(2 * var(--base-spacing));
}
#content .toc-nav a {
color: var(--action-primary-content-default);
text-decoration: none;
border-bottom: none;
}
#toc li a:hover {
color: var(--action-primary-content-hover);
}
#toc li.active > a {
color: var(--action-primary-content-hover);
}
#toc li:focus-visible {
box-shadow: 0px 0px 0px 2px var(--focus-default);
}