diff --git a/resources/common/variables.less b/resources/common/variables.less index 03181c7c..ee34f71c 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -67,6 +67,8 @@ // Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button` @icon-padding-md: 12px; @icon-padding-md-next: 5px; +@icon-padding-md-em: unit( @icon-padding-md / @font-size-browser, em ); +@icon-padding-md-next-em: unit( @icon-padding-md-next / @font-size-browser, em ); @background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em ); @background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em ); @@ -81,7 +83,6 @@ @border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 ); @border-start-blockquote: 4px @border-style-base #eaecf0; @padding-top-content: 0.5em; -@padding-horizontal-content: 0.75em; @padding-blockquote: 8px 32px; // T311311 Match VE toolbar styles @border-bottom-tabs: @border-width-base @border-style-base @colorGray12; @@ -195,11 +196,11 @@ // // Layout // -@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16 -@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16 +@max-width-page-container: unit( 1596px / @font-size-browser, em ); // T305069 - 99.75em @ 16 +@max-width-content-container: unit( 960px / @font-size-browser, em ); // T305069 - 60em @ 16 @padding-horizontal-page-container: unit( 24px / @font-size-browser, em ); -@padding-horizontal-page-container-desktop: unit( 32px / @font-size-browser, em ); -@padding-horizontal-page-container-desktop-wide: unit( 40px / @font-size-browser, em ); +@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em ); +@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em ); // Grid @grid-row-gap: 24px; diff --git a/resources/skins.vector.styles/components/Footer.less b/resources/skins.vector.styles/components/Footer.less index 254e28f5..83b1566e 100644 --- a/resources/skins.vector.styles/components/Footer.less +++ b/resources/skins.vector.styles/components/Footer.less @@ -1,3 +1,8 @@ +.mw-footer { + border-top: @border-base; + padding: 0.75em 0; +} + .mw-footer-container { padding-top: 50px; padding-bottom: 82px; diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index 573c5e9f..07f53433 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -14,6 +14,10 @@ // A min-height is set to account for projects where no icon is set. min-height: @height-logo-icon; padding: 8px 0; + // T315261 Align header icon buttons with main content + margin: 0; + .mixin-vector-flush-left-margin-left(); + .mixin-vector-flush-right-margin-right(); // Vertical centering of header elements (IE>=11), requires Flexbox. .flex-display(); flex-wrap: nowrap; @@ -53,11 +57,6 @@ } @media ( max-width: @max-width-tablet ) { - // T315261 Align header icon buttons with main content - margin: 0; - .mixin-vector-flush-left-margin-left(); - .mixin-vector-flush-right-margin-right(); - /** * Toggles the visibility of the search box at lower resolutions. */ diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index 970c2bd7..05d67c84 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -13,23 +13,11 @@ // T305069 Layout adjustments of sidebar elements // Align the left edge of main menu with the main menu button. width: @width-sidebar-px; - margin-left: 0; + .mixin-vector-flush-left-margin-left(); // Align the left edge of main menu with the main menu button icon. @media ( min-width: @min-width-desktop-wide ) { width: @width-sidebar-px-wide; - .mixin-vector-flush-right-margin-left(); - } -} - -.sidebar-toc, -.sidebar-toc:after { - // T312156 Update TOC spacing after removing background color - // Align the left edge of the TOC text with the main menu button icon. - .mixin-vector-flush-left-margin-left(); - - @media ( min-width: @min-width-desktop-wide ) { - // Align the TOC subsection toggle button icon with the main menu button icon. margin-left: 0; } } diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index 8817b2a7..53a2b157 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -6,6 +6,7 @@ .vector-sticky-header { width: 100%; + max-width: @max-width-page-container; height: @height-sticky-header; position: fixed; top: 0; @@ -20,12 +21,20 @@ border-bottom: @border-width-base @border-style-base @colorGray14; justify-content: space-between; box-sizing: border-box; - padding: 6px @padding-horizontal-page-container-desktop; - max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop * 2 ); + + // T317573 Account for icon padding, align with header icons + padding: 6px (@padding-horizontal-page-container-desktop - @icon-padding-md-em); @media ( min-width: @min-width-desktop-wide ) { - padding: 6px @padding-horizontal-page-container-desktop-wide; - max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 ); + padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-em); + } + + .vector-feature-visual-enhancement-next-enabled & { + padding: 6px (@padding-horizontal-page-container-desktop - @icon-padding-md-next-em); + + @media ( min-width: @min-width-desktop-wide ) { + padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-next-em); + } } // Hide sticky header until visible class is applied to the body diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index 6b0b9c8f..ec052f1c 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -35,6 +35,27 @@ } } +.sidebar-toc, +.sidebar-toc:after { + // T312156 Update TOC spacing after removing background color + // Align the left edge of the TOC text with the main menu button icon. + margin-left: -@sidebar-toc-left-padding; + + @media ( min-width: @min-width-desktop-wide ) { + // Align the TOC subsection toggle button icon with the main menu button icon. + margin-left: -@icon-padding-md; + } + + .vector-feature-visual-enhancement-next-enabled & { + margin-left: -@sidebar-toc-left-padding-next; + + @media ( min-width: @min-width-desktop-wide ) { + // Align the TOC subsection toggle button icon with the main menu button icon. + margin-left: -@icon-padding-md-next; + } + } +} + .sidebar-toc { max-height: 75vh; padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding; diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index d867a0fe..af34bebf 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -92,6 +92,7 @@ display: none; position: absolute; top: @height-collapsed-toc-button; // TOC button height + .mixin-vector-flush-left-left(); margin-top: @padding-top-content-px; // Account for padding-top from .mw-body // FIXME: Collapsed TOC styles are not consistent with other vector dropdowns border: @border-width-base @border-style-base @border-color-base; @@ -125,10 +126,6 @@ // .mixin-toc-collapsed-header(); - .sidebar-toc { - .mixin-vector-flush-left-left(); - } - // // Collapsed to floating button on narrow screens when below page title // diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 856728a3..99270f02 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -14,16 +14,13 @@ // Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them // see T259331. -@padding-content: @padding-top-content @padding-horizontal-content 1.5em; +@padding-content: @padding-top-content 0 1.5em; // Breakpoints // Defines the minimum viewport width, at which point the layout will not get any // smaller and will start horizontal scrolling instead. -@min-width-supported: - unit( 500px / @font-size-browser, em ) - - ( 2 * @padding-horizontal-page-container-desktop-wide ); -// 31.25em - 3.75em = 27.5em @ 16 +@min-width-supported: unit( 500px / @font-size-browser, em ); body { background-color: @background-color-secondary--modern; @@ -38,14 +35,9 @@ body { } .mw-body { + // T315261 Remove horizontal padding, rely on .mw-page-container padding instead padding: @padding-content; - @media ( max-width: @max-width-tablet ) { - // T315261 Remove horizontal padding, rely on .mw-page-container padding instead - padding-left: 0; - padding-right: 0; - } - .firstHeading { /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ overflow: visible; @@ -111,11 +103,6 @@ body { padding: @padding-content; } -.mw-footer { - border-top: @border-base; - padding: 0.75em; -} - // Container logic. .mw-page-container { // Setting position and z-index is important as it allows overlays appended to the body tag @@ -124,6 +111,10 @@ body { position: relative; z-index: 0; max-width: @max-width-page-container; + // Set a min-width to make explicit we do not support anything below this threshold. + // For devices too small, they should be more useable with horizontal scrolling. + // e.g. Portrait on an iPad + min-width: @min-width-supported; // Fill the viewport even if the content height is small. This also helps // mitigate a long sidebar overflowing the page container (T257518). min-height: 100%; @@ -133,10 +124,7 @@ body { // Be careful not to use overflow-y: scroll here (see T270146 and T271868) padding: 0.05px @padding-horizontal-page-container; background-color: @background-color-page-container; - // Set a min-width to make explicit we do not support anything below this threshold. - // For devices too small, they should be more useable with horizontal scrolling. - // e.g. Portrait on an iPad - min-width: @min-width-supported; + box-sizing: border-box; @media ( min-width: @min-width-desktop ) { padding-left: @padding-horizontal-page-container-desktop;