.vector-toc { .vector-pinnable-header { padding-left: @toc-list-item-padding-start; } .vector-toc-numb { display: none; } .vector-toc-toggle { // For no-js users, toggling is disabled and icon is hidden display: none; transition: @transition-duration-base; position: absolute; left: -@size-toc-subsection-toggle/2; // Visual centering. top: 1px; // Override .cdx-button styles min-width: @size-toc-subsection-toggle; // ~22px @ 12 min-height: @size-toc-subsection-toggle; padding: 0; font-size: @size-toc-subsection-toggle-icon; } .vector-toc-link { display: block; word-break: break-word; color: @color-link; } // Highlight and bold active sections, active top sections that are unexpanded // and active top sections that are the only active element. .vector-toc-list-item-active, .vector-toc-level-1-active:not( .vector-toc-list-item-expanded ), .vector-toc-list-item-active.vector-toc-level-1-active { > .vector-toc-link { // Highlight active section color: @color-base; font-weight: bold; .vector-toc-text { // Increase width to prevent line wrapping due to bold text // Avoid applying on link element to avoid focus indicator changing size width: ~'calc( 100% + @{padding-horizontal-dropdown-menu} )'; } } } // Highlight active top sections that contain an active section .vector-toc-level-1-active:not( .vector-toc-list-item-active ) > .vector-toc-link { color: @color-base; } .vector-toc-text { // Match .mixin-vector-dropdown-menu-item() vertical padding padding: @padding-vertical-dropdown-menu-item 0; } .vector-toc-contents, .vector-toc-list { margin: 0; list-style: none; } .vector-toc-list-item { position: relative; list-style-type: none; padding-left: @toc-list-item-padding-start; margin: 0; } } // Collapse ToC sections by default, excluding no-js &.client-js .vector-toc { .vector-toc-level-1 .vector-toc-list-item { display: none; } .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-list-item { display: block; } .vector-toc-toggle { display: block; } .vector-toc-level-1.vector-toc-list-item-expanded .vector-toc-toggle { transform: rotate( 0deg ); } } &.client-js body.ltr .vector-toc .vector-toc-toggle { transform: rotate( -90deg ); } &.client-js body.rtl .vector-toc .vector-toc-toggle { transform: rotate( 90deg ); } // Ensure there is only 1 table of contents landmark at anytime .vector-toc-landmark { display: none; } &.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar, &.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar, &.vector-feature-toc-pinned-clientpref-1 .vector-column-start { > .vector-toc-landmark { display: block; } } // On smaller viewports the TOC will always be moved to the page titlebar via JS // regardless of the TOC pinned classes @media ( max-width: @max-width-tablet ) { &.client-js .vector-page-titlebar .vector-toc-landmark { display: block; } &.client-js .mw-table-of-contents-container.vector-toc-landmark { display: none; } }