diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index c4941a378..9fef81022 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -7,9 +7,9 @@ // Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu. @margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16 // Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title. -@top-margin-sidebar-toc_title_inline: 3.5em; -// Default spacing separating the sidebar TOC from the main menu or viewport -@top-margin-sidebar-toc: 1.5em; +@margin-top-sidebar-toc_title_inline: 3.5em; +// Default spacing separating the sidebar TOC from the main menu or viewport. +@margin-top-sidebar-toc: 1.5em; .mw-sidebar { box-sizing: border-box; @@ -62,7 +62,7 @@ body:not( .vector-toc-enabled ) .mw-sidebar { .sidebar-toc { // Use margin-top to align TOC rather than grid row gap // Applies when the TOC sticky and when the main menu is both open and closed. - margin-top: @top-margin-sidebar-toc; + margin-top: @margin-top-sidebar-toc; } } } @@ -71,17 +71,17 @@ body:not( .vector-toc-enabled ) .mw-sidebar { .sidebar-toc { .vector-toc-enabled .vector-layout-legacy & { // Main menu is closed - margin-top: @top-margin-sidebar-toc_title_inline; + margin-top: @margin-top-sidebar-toc_title_inline; } .vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} & { // Main menu is open - margin-top: @top-margin-sidebar-toc; + margin-top: @margin-top-sidebar-toc; } .vector-toc-enabled.vector-sticky-header-visible .vector-layout-legacy & { // Sticky header is visible - margin-top: @top-margin-sidebar-toc; + margin-top: @margin-top-sidebar-toc; } } diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index c72cd3976..4f44cd0d4 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -207,11 +207,11 @@ body { clear: both; // To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky // we account for the TOC's top margin - top: ~'calc( 1.5em - @{top-margin-sidebar-toc_title_inline} )'; // top: -2em + top: ~'calc( 1.5em - @{margin-top-sidebar-toc_title_inline} )'; // top: -2em } .vector-layout-legacy @{selector-workspace-container-sidebar-open} & { // When main menu is open the TOC's top margin is reduced - top: ~'calc( 1.5em - @{top-margin-sidebar-toc} )'; // top: 0 + top: ~'calc( 1.5em - @{margin-top-sidebar-toc} )'; // top: 0 } }