337 lines
6.6 KiB
SCSS
337 lines
6.6 KiB
SCSS
$padding-basis: 0.75em;
|
|
|
|
.d-toc-available {
|
|
// the toc increases the timeline container's width
|
|
// so as long as the toc is available in a topic
|
|
// we want this width to remain for the timeline
|
|
// so if the toc is toggled off, the position doesn't shift
|
|
|
|
@media screen and (max-width: 1109px) {
|
|
.d-toc-wrapper {
|
|
width: 10em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1110px) {
|
|
.container.posts {
|
|
grid-template-columns: auto 14.6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-toc-main {
|
|
display: none;
|
|
border-left: 1px solid var(--primary-low);
|
|
box-sizing: border-box;
|
|
a {
|
|
display: block;
|
|
padding: 0.15em 0;
|
|
color: var(--primary-700);
|
|
&.scroll-to-bottom {
|
|
color: var(--tertiary);
|
|
padding-left: $padding-basis;
|
|
margin-top: 0.5em;
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
#d-toc {
|
|
max-height: calc(100dvh - 7em - var(--header-offset));
|
|
overflow: auto;
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li.d-toc-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: $padding-basis;
|
|
line-height: var(--line-height-large);
|
|
> 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 {
|
|
max-height: 500em;
|
|
overflow: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
> a:hover {
|
|
color: var(--primary);
|
|
}
|
|
&.direct-active > a {
|
|
position: relative;
|
|
color: var(--primary);
|
|
&:before {
|
|
content: "";
|
|
width: 1px;
|
|
margin-top: -1px;
|
|
background-color: var(--tertiary);
|
|
position: absolute;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
> ul > li > ul {
|
|
font-size: var(--font-down-1);
|
|
> li:first-child {
|
|
padding-top: 0.25em;
|
|
}
|
|
> li {
|
|
padding-bottom: 0.15em;
|
|
}
|
|
li.direct-active > a:before {
|
|
// it's odd that we need this
|
|
margin-left: -1px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// active line marker
|
|
$selector: "> ul > li.direct-active > a:before";
|
|
$map: (
|
|
"left": "html:not(.rtl)",
|
|
"right": "html.rtl",
|
|
);
|
|
|
|
/*
|
|
// 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);
|
|
}
|
|
> ul > li #{$selector} {
|
|
#{$prop}: (-$padding-basis) * 2;
|
|
}
|
|
}
|
|
}
|
|
// END active line marker
|
|
|
|
.d-toc-mini,
|
|
a.d-toc-close {
|
|
display: none;
|
|
}
|
|
|
|
.d-toc-timeline-toggle {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
@include ellipsis;
|
|
.d-icon-timeline {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
@media screen and (min-height: 1200px) {
|
|
// on tall screens we don't want this button
|
|
// to be incredibly distant
|
|
position: absolute;
|
|
.d-toc-timeline-visible & {
|
|
bottom: -4em;
|
|
}
|
|
bottom: -6.5em;
|
|
}
|
|
}
|
|
|
|
.topic-navigation.with-timeline:has(.timeline-docked) {
|
|
// hide toggle when timeline is docked
|
|
// (firefox doesn't support :has yet)
|
|
.d-toc-timeline-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-toc-timeline-toggleable {
|
|
.d-toc-timeline-toggle {
|
|
display: block;
|
|
z-index: z("timeline");
|
|
@media screen and (max-height: 480px) {
|
|
// avoid overlapping timeline
|
|
display: none;
|
|
}
|
|
}
|
|
.with-topic-progress {
|
|
.d-toc-main {
|
|
display: block;
|
|
}
|
|
.d-toc-timeline-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-toc-timeline-visible {
|
|
.d-toc-main,
|
|
.d-toc-mini {
|
|
display: block;
|
|
}
|
|
|
|
// core overrides when timeline is active
|
|
.timeline-container {
|
|
display: none;
|
|
}
|
|
.container.posts .topic-navigation.with-topic-progress {
|
|
align-self: start;
|
|
}
|
|
}
|
|
|
|
// overlayed timeline (on mobile and narrow screens)
|
|
.topic-navigation.with-topic-progress {
|
|
.d-toc-timeline-toggle {
|
|
display: none;
|
|
}
|
|
.d-toc-wrapper {
|
|
position: fixed;
|
|
margin-top: 0.25em;
|
|
height: calc(100dvh - 50px - var(--header-offset));
|
|
opacity: 0.5;
|
|
right: -100vw;
|
|
top: var(--header-offset);
|
|
width: 75vw;
|
|
max-width: 350px;
|
|
background-color: var(--secondary);
|
|
box-shadow: var(--shadow-dropdown);
|
|
z-index: z("modal", "overlay");
|
|
transition: all 0.2s ease-in-out;
|
|
.d-toc-main {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
height: 100%;
|
|
#d-toc {
|
|
max-height: calc(100% - 2.25em);
|
|
}
|
|
}
|
|
&.overlay {
|
|
right: 0;
|
|
width: 75vw;
|
|
opacity: 1;
|
|
.d-toc-main {
|
|
display: block;
|
|
#d-toc li.d-toc-item ul {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.scroll-to-bottom {
|
|
margin-top: 0.33em;
|
|
}
|
|
|
|
a.scroll-to-bottom,
|
|
a.d-toc-close {
|
|
display: inline-block;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.d-toc-icons {
|
|
position: absolute;
|
|
background: var(--secondary);
|
|
right: 1.5em;
|
|
top: 0.25em;
|
|
z-index: z("timeline");
|
|
}
|
|
}
|
|
}
|
|
|
|
#topic-progress-wrapper {
|
|
align-items: stretch;
|
|
.d-toc-mini {
|
|
display: none;
|
|
|
|
height: 100%;
|
|
.btn {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.staff & {
|
|
.topic-admin-menu-button-container {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-toc-timeline-toggleable {
|
|
#topic-progress-wrapper .d-toc-mini {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.d-toc-timeline-visible .topic-navigation.with-topic-progress .d-toc-wrapper {
|
|
right: unset;
|
|
left: -100vw;
|
|
&.overlay {
|
|
right: unset;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Composer preview notice
|
|
.edit-title .d-editor-preview [data-theme-toc] {
|
|
background: var(--tertiary);
|
|
color: var(--secondary);
|
|
position: sticky;
|
|
z-index: 1;
|
|
top: 0;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&:before {
|
|
content: "#{$composer_toc_text}";
|
|
}
|
|
}
|
|
|
|
// Docs plugin outlet
|
|
.below-docs-topic-outlet.d-toc-wrapper {
|
|
position: sticky;
|
|
top: calc(var(--header-offset, 60px) + 1em);
|
|
max-height: calc(100dvh - 2em - var(--header-offset, 60px));
|
|
}
|