trilium/apps/client/src/widgets/sidebar/TableOfContents.css
2025-12-18 10:49:33 +02:00

83 lines
1.4 KiB
CSS

.toc ol {
position: relative;
overflow: hidden;
padding-inline-start: 0px;
transition: max-height 0.3s ease;
}
.toc li.collapsed + ol {
display:none;
}
.toc li + ol:before {
content: "";
position: absolute;
height: 100%;
border-inline-start: 1px solid var(--main-border-color);
z-index: 10;
}
.toc li {
display: flex;
position: relative;
list-style: none;
align-items: center;
padding-inline-start: 7px;
cursor: pointer;
text-align: justify;
word-wrap: break-word;
hyphens: auto;
}
.toc > ol {
--toc-depth-level: 1;
}
.toc > ol > ol {
--toc-depth-level: 2;
}
.toc > ol > ol > ol {
--toc-depth-level: 3;
}
.toc > ol > ol > ol > ol {
--toc-depth-level: 4;
}
.toc > ol > ol > ol > ol > ol {
--toc-depth-level: 5;
}
.toc > ol ol::before {
inset-inline-start: calc((var(--toc-depth-level) - 2) * 20px + 14px);
}
.toc li {
padding-inline-start: calc((var(--toc-depth-level) - 1) * 20px + 4px);
}
.toc li .collapse-button {
display: flex;
position: relative;
width: 21px;
height: 21px;
flex-shrink: 0;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.toc li.collapsed .collapse-button {
transform: rotate(-90deg);
}
.toc li .item-content {
margin-inline-start: 25px;
flex: 1;
}
.toc li .collapse-button + .item-content {
margin-inline-start: 4px;
}
.toc li:hover {
font-weight: bold;
}