diff --git a/bundlesize.config.json b/bundlesize.config.json index 16b5d188c..fce1b071c 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -5,7 +5,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "11.7kB" + "maxSize": "11.8kB" }, { "resourceModule": "skins.vector.legacy.js", diff --git a/resources/common/variables.less b/resources/common/variables.less index 5e3e2e1de..4e861d939 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -149,6 +149,8 @@ @padding-left-toc: 15px + @padding-right-toc; @spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12 @size-toc-subsection-toggle-icon: 1.834em; +// Calculated with: 1.5em (TOC top padding) + @margin-top-pinned-toc = 0.5em (.mw-body padding) + 2.34 (height of #firstHeading) +@margin-top-pinned-toc: @padding-top-content + (@font-size-heading-1 * @line-height-heading) - 1.5em; // Sidebar @width-sidebar-px: 220px; diff --git a/resources/skins.vector.styles/components/MainMenu.less b/resources/skins.vector.styles/components/MainMenu.less index 4e8d40848..e8e22e7ca 100644 --- a/resources/skins.vector.styles/components/MainMenu.less +++ b/resources/skins.vector.styles/components/MainMenu.less @@ -22,10 +22,20 @@ } .vector-feature-page-tools-enabled .vector-main-menu { + // Match styles of .mw-list-item a in PinnableElement.less + .vector-main-menu-action-opt-out a, + .vector-main-menu-action-lang-alert .vector-main-menu-action-content { + .mixin-vector-dropdown-menu-item(); + } + .vector-main-menu-action-opt-out a { font-weight: bold; } + .vector-main-menu-action-lang-alert .vector-main-menu-action-content { + padding-top: 0; + } + .vector-language-sidebar-alert { // Override default .mw-message-box styles padding: 8px; @@ -39,10 +49,18 @@ background-color: @background-color-secondary--modern; // Align text with page container margin-left: -@padding-horizontal-dropdown-menu-item; + + // Match styles of .mw-list-item a in PinnableElement.less + .vector-main-menu-action-opt-out a, + .vector-main-menu-action-lang-alert .vector-main-menu-action-content { + padding-left: 0; + padding-right: 0; + } } // Main menu when unpinned in the dropdown #vector-main-menu-unpinned-container .vector-main-menu { + // TODO: Standardize dropdown min and max width width: 250px; .vector-language-sidebar-alert { diff --git a/resources/skins.vector.styles/components/PinnableElement.less b/resources/skins.vector.styles/components/PinnableElement.less index 4d9c86a62..ea15cda3e 100644 --- a/resources/skins.vector.styles/components/PinnableElement.less +++ b/resources/skins.vector.styles/components/PinnableElement.less @@ -12,13 +12,8 @@ .mw-list-item a { // Mirror styles from Dropdown.less .mixin-vector-dropdown-menu-item(); - white-space: nowrap; color: @color-link; } - - .vector-main-menu-action-content { - .mixin-vector-dropdown-menu-item(); - } } // TODO: merge this into the selector above after page tools is enabled everywhere @@ -27,8 +22,7 @@ // (Whereas in a dropdown, the border lines up with the edge of the dropdown container). .vector-pinnable-header, .vector-menu-heading, - .mw-list-item a, - .vector-main-menu-action-content { + .mw-list-item a { padding-left: 0; padding-right: 0; } diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index 53dfc2343..49ba321da 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -88,7 +88,9 @@ .sidebar-toc-text, .vector-toc-text { - padding: 4px 0; + .vector-feature-page-tools-disabled & { + padding: 4px 0; + } .vector-feature-page-tools-enabled & { // Match .mixin-vector-dropdown-menu-item() vertical padding @@ -102,7 +104,10 @@ .vector-toc-list { margin: 0; list-style: none; - line-height: 18px; + + .vector-feature-page-tools-disabled & { + line-height: 18px; + } } .sidebar-toc-list-item, diff --git a/resources/skins.vector.styles/components/TableOfContentsPinned.less b/resources/skins.vector.styles/components/TableOfContentsPinned.less index c01ad1e16..fb8e2a5b6 100644 --- a/resources/skins.vector.styles/components/TableOfContentsPinned.less +++ b/resources/skins.vector.styles/components/TableOfContentsPinned.less @@ -24,8 +24,8 @@ } .vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & { - // Needed to align TOC with bottom of title, 1.5em (24px) padding + 22px margin = ~46px (height of page titlebar) - margin-top: 22px; + // Align TOC with bottom of title when main menu is not pinned but the TOC is + margin-top: @margin-top-pinned-toc; } // FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index ba7833ffd..4c9769fab 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -39,6 +39,7 @@ .vector-menu-content { left: auto; right: 0; + // TODO: Standardize dropdown min and max width min-width: 200px; }