| | |
| | | button#toc { |
| | | @use "../../styles/variables.scss" as *; |
| | | |
| | | .toc { |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow-y: hidden; |
| | | min-height: 1.4rem; |
| | | flex: 0 0.5 auto; |
| | | &:has(button.toc-header.collapsed) { |
| | | flex: 0 1 1.4rem; |
| | | } |
| | | } |
| | | |
| | | button.toc-header { |
| | | background-color: transparent; |
| | | border: none; |
| | | text-align: left; |
| | |
| | | } |
| | | } |
| | | |
| | | #toc-content { |
| | | ul.toc-content.overflow { |
| | | list-style: none; |
| | | overflow: hidden; |
| | | max-height: none; |
| | | transition: max-height 0.5s ease; |
| | | position: relative; |
| | | margin: 0.5rem 0; |
| | | padding: 0; |
| | | max-height: calc(100% - 2rem); |
| | | overscroll-behavior: contain; |
| | | list-style: none; |
| | | |
| | | &.collapsed > .overflow::after { |
| | | opacity: 0; |
| | | } |
| | | |
| | | & ul { |
| | | list-style: none; |
| | | margin: 0.5rem 0; |
| | | padding: 0; |
| | | & > li > a { |
| | | color: var(--dark); |
| | | opacity: 0.35; |
| | | transition: 0.5s ease opacity, 0.3s ease color; |
| | | &.in-view { |
| | | opacity: 0.75; |
| | | } |
| | | & > li > a { |
| | | color: var(--dark); |
| | | opacity: 0.35; |
| | | transition: |
| | | 0.5s ease opacity, |
| | | 0.3s ease color; |
| | | &.in-view { |
| | | opacity: 0.75; |
| | | } |
| | | } |
| | | |