2022-01-18 09:18:21 -05:00
|
|
|
$padding-basis: 0.75em;
|
2019-03-08 21:06:56 -05:00
|
|
|
|
2023-12-11 12:53:17 -05:00
|
|
|
.d-toc-main {
|
|
|
|
display: none;
|
2023-12-11 18:39:19 -05:00
|
|
|
width: 225px;
|
|
|
|
@media screen and (max-width: 1045px) {
|
|
|
|
.desktop-view & {
|
|
|
|
width: 150px;
|
|
|
|
}
|
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
border-left: 1px solid var(--primary-low);
|
|
|
|
box-sizing: border-box;
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
padding: 0.15em 0;
|
2023-12-11 18:39:19 -05:00
|
|
|
color: var(--primary-medium);
|
2022-01-18 09:18:21 -05:00
|
|
|
&.scroll-to-bottom {
|
|
|
|
padding-left: $padding-basis;
|
|
|
|
}
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
#d-toc {
|
2023-12-11 18:39:19 -05:00
|
|
|
max-height: calc(100vh - 4.5em - var(--header-offset));
|
|
|
|
padding-bottom: 0.5em;
|
2022-01-18 09:18:21 -05:00
|
|
|
overflow: auto;
|
|
|
|
ul {
|
|
|
|
list-style-type: none;
|
2019-03-08 21:06:56 -05:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
li.d-toc-item {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
padding-left: $padding-basis;
|
2022-01-28 17:42:33 -05:00
|
|
|
line-height: var(--line-height-large);
|
2022-01-18 09:18:21 -05:00
|
|
|
> ul {
|
|
|
|
max-height: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
opacity: 0.5;
|
|
|
|
transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
|
|
|
|
}
|
|
|
|
&.active,
|
|
|
|
.d-toc-wrapper.overlay & {
|
|
|
|
ul {
|
2022-01-28 17:42:33 -05:00
|
|
|
max-height: 500em;
|
2022-01-18 09:18:21 -05:00
|
|
|
overflow: visible;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
2022-01-20 16:14:37 -05:00
|
|
|
> a:hover {
|
2023-12-11 18:39:19 -05:00
|
|
|
color: var(--primary-high);
|
2022-01-20 16:14:37 -05:00
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
&.direct-active > a {
|
2019-03-08 21:06:56 -05:00
|
|
|
position: relative;
|
2022-01-18 09:18:21 -05:00
|
|
|
color: var(--primary);
|
2019-03-08 21:06:56 -05:00
|
|
|
&:before {
|
|
|
|
content: "";
|
|
|
|
width: 1px;
|
2022-01-18 09:18:21 -05:00
|
|
|
margin-top: -1px;
|
|
|
|
background-color: var(--tertiary);
|
2019-03-08 21:06:56 -05:00
|
|
|
position: absolute;
|
2022-01-18 09:18:21 -05:00
|
|
|
height: 100%;
|
2019-03-08 21:54:08 -05:00
|
|
|
}
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
|
|
|
|
> ul > li > ul {
|
|
|
|
font-size: var(--font-down-1);
|
2022-01-28 17:42:33 -05:00
|
|
|
> li:first-child {
|
|
|
|
padding-top: 0.25em;
|
|
|
|
}
|
|
|
|
> li {
|
|
|
|
padding-bottom: 0.15em;
|
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
li.direct-active > a:before {
|
|
|
|
// it's odd that we need this
|
|
|
|
margin-left: -1px;
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
2022-01-20 16:14:37 -05:00
|
|
|
|
|
|
|
li.d-toc-h2 ~ li.d-toc-h3,
|
|
|
|
li.d-toc-h2 ~ li.d-toc-h4,
|
|
|
|
li.d-toc-h2 ~ li.d-toc-h5,
|
|
|
|
li.d-toc-h3 ~ li.d-toc-h4,
|
|
|
|
li.d-toc-h3 ~ li.d-toc-h5,
|
|
|
|
li.d-toc-h4 ~ li.d-toc-h5 {
|
|
|
|
> a {
|
|
|
|
padding-left: $padding-basis;
|
|
|
|
}
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
|
|
|
}
|
2021-05-10 09:03:22 -04:00
|
|
|
}
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
|
|
|
|
2022-01-18 09:18:21 -05:00
|
|
|
// active line marker
|
|
|
|
$selector: "> ul > li.direct-active > a:before";
|
|
|
|
$map: (
|
|
|
|
"left": "html:not(.rtl)",
|
|
|
|
"right": "html.rtl",
|
|
|
|
);
|
2021-05-10 11:36:56 -04:00
|
|
|
|
2022-01-18 09:18:21 -05:00
|
|
|
/*
|
|
|
|
// loop below generates styling for non-RTL and RTL
|
|
|
|
// Example:
|
|
|
|
html:not(.rtl) SELECTOR {
|
|
|
|
left: -.75em
|
|
|
|
}
|
|
|
|
html.rtl SELECTOR {
|
|
|
|
right: -.75em
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
@each $prop, $parent in $map {
|
|
|
|
#{$parent} #d-toc {
|
|
|
|
#{$selector} {
|
|
|
|
#{$prop}: (-$padding-basis);
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
2022-01-19 17:17:30 -05:00
|
|
|
> ul > li #{$selector} {
|
2022-01-18 09:18:21 -05:00
|
|
|
#{$prop}: (-$padding-basis) * 2;
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
// END active line marker
|
2019-03-08 21:06:56 -05:00
|
|
|
|
2022-01-18 09:18:21 -05:00
|
|
|
.d-toc-mini,
|
|
|
|
a.d-toc-close {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-03-08 22:01:21 -05:00
|
|
|
|
2022-01-18 09:18:21 -05:00
|
|
|
.d-toc-timeline-visible {
|
|
|
|
.d-toc-main,
|
|
|
|
.d-toc-mini {
|
|
|
|
display: block;
|
|
|
|
}
|
2023-12-11 18:39:19 -05:00
|
|
|
// overlayed timeline (on mobile and narrow screens)
|
|
|
|
.topic-navigation.with-topic-progress {
|
|
|
|
.d-toc-wrapper {
|
|
|
|
position: fixed;
|
|
|
|
margin-top: 0.25em;
|
|
|
|
height: calc(100vh - 50px - var(--header-offset));
|
|
|
|
opacity: 0.5;
|
|
|
|
right: -100vw;
|
|
|
|
top: var(--header-offset);
|
2022-01-18 09:18:21 -05:00
|
|
|
width: 75vw;
|
2023-12-11 18:39:19 -05:00
|
|
|
max-width: 350px;
|
|
|
|
background-color: var(--secondary);
|
|
|
|
box-shadow: var(--shadow-dropdown);
|
|
|
|
z-index: z("modal", "overlay");
|
|
|
|
transition: all 0.2s ease-in-out;
|
2022-01-18 09:18:21 -05:00
|
|
|
.d-toc-main {
|
2023-12-11 18:39:19 -05:00
|
|
|
width: 100%;
|
|
|
|
padding: 0.5em;
|
|
|
|
height: 100%;
|
|
|
|
#d-toc {
|
|
|
|
max-height: calc(100% - 3em);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.overlay {
|
|
|
|
right: 0;
|
|
|
|
width: 75vw;
|
|
|
|
opacity: 1;
|
|
|
|
.d-toc-main #d-toc li.d-toc-item ul {
|
2023-12-11 17:48:17 -05:00
|
|
|
transition: none;
|
2019-03-08 21:06:56 -05:00
|
|
|
}
|
|
|
|
}
|
2019-03-08 22:01:21 -05:00
|
|
|
|
2023-12-11 18:39:19 -05:00
|
|
|
a.scroll-to-bottom,
|
|
|
|
a.d-toc-close {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 0.5em;
|
|
|
|
}
|
2019-03-08 21:08:44 -05:00
|
|
|
|
2023-12-11 18:39:19 -05:00
|
|
|
.d-toc-icons {
|
|
|
|
text-align: right;
|
|
|
|
}
|
2023-12-11 17:48:17 -05:00
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
}
|
|
|
|
|
2023-12-11 18:39:19 -05:00
|
|
|
// core overrides when timeline is active
|
|
|
|
.timeline-container,
|
|
|
|
#topic-progress {
|
2023-12-11 12:53:17 -05:00
|
|
|
display: none;
|
|
|
|
}
|
2023-12-11 18:39:19 -05:00
|
|
|
.container.posts .topic-navigation.with-topic-progress {
|
|
|
|
align-self: start;
|
2023-12-11 17:48:17 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-31 10:17:58 -05:00
|
|
|
// core sets first child's top margin to 0
|
|
|
|
// ensure it's also 0 when TOC markup is first
|
|
|
|
.cooked > div[data-theme-toc]:first-child + * {
|
|
|
|
margin-top: 0px;
|
|
|
|
}
|
|
|
|
|
2022-01-18 09:18:21 -05:00
|
|
|
// RTL Support
|
|
|
|
.rtl {
|
|
|
|
.d-toc-main {
|
|
|
|
border-left: none;
|
|
|
|
border-right: 1px solid var(--primary-low);
|
|
|
|
|
|
|
|
#d-toc li.d-toc-item,
|
|
|
|
a.scroll-to-bottom {
|
|
|
|
padding-left: 0;
|
|
|
|
padding-right: $padding-basis;
|
|
|
|
}
|
2019-04-14 16:47:22 -04:00
|
|
|
}
|
2022-01-18 09:18:21 -05:00
|
|
|
|
|
|
|
.d-toc-timeline-visible .topic-navigation.with-topic-progress .d-toc-wrapper {
|
|
|
|
right: unset;
|
|
|
|
left: -100vw;
|
|
|
|
&.overlay {
|
|
|
|
right: unset;
|
|
|
|
left: 0;
|
2019-04-14 16:47:22 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-18 09:18:21 -05:00
|
|
|
// Composer preview notice
|
2019-03-08 23:48:38 -05:00
|
|
|
.edit-title .d-editor-preview [data-theme-toc] {
|
2022-01-05 11:40:18 -05:00
|
|
|
background: var(--tertiary);
|
|
|
|
color: var(--secondary);
|
2019-03-08 21:08:44 -05:00
|
|
|
position: sticky;
|
2023-03-11 05:23:42 -05:00
|
|
|
z-index: 1;
|
2019-03-08 21:08:44 -05:00
|
|
|
top: 0;
|
|
|
|
height: 30px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2019-04-14 16:47:22 -04:00
|
|
|
&:before {
|
|
|
|
content: "#{$composer_toc_text}";
|
|
|
|
}
|
2019-03-08 21:08:44 -05:00
|
|
|
}
|
2022-01-19 12:50:45 -05:00
|
|
|
|
|
|
|
// Docs plugin outlet
|
|
|
|
.below-docs-topic-outlet.d-toc-wrapper {
|
|
|
|
position: sticky;
|
|
|
|
top: calc(var(--header-offset, 60px) + 1em);
|
2023-12-11 18:39:19 -05:00
|
|
|
max-height: calc(100vh - 2em - var(--header-offset, 60px));
|
|
|
|
.mobile-view & {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.d-toc-main {
|
|
|
|
display: block;
|
|
|
|
}
|
2022-01-19 12:50:45 -05:00
|
|
|
}
|