diff --git a/resources/common/variables.less b/resources/common/variables.less index 89e7b993..e61bbf36 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -80,7 +80,7 @@ @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.5em; +@padding-horizontal-content: 0.75em; @padding-blockquote: 8px 32px; @border-bottom-tabs: @border-width-base @border-style-base #eaecf0; @@ -201,8 +201,9 @@ // @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 -@padding-horizontal-page-container: unit( 32px / @font-size-browser, em ); -@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em ); +@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 ); // Grid @grid-row-gap: 24px; diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index c64415d9..04b77830 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -19,11 +19,6 @@ // https://caniuse.com/#search=align-items align-items: center; - .vector-layout-legacy & { - margin: @margin-top-header 0 @margin-bottom-header 0; - padding: 0; - } - #mw-sidebar-button { margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same. } @@ -56,10 +51,13 @@ } } - /** - * Toggles the visibility of the search box at lower resolutions. - */ @media ( max-width: @max-width-tablet ) { + // T315261 Align header icon buttons with main content + margin: 0 -@icon-padding-md 0 -@icon-padding-md; + + /** + * Toggles the visibility of the search box at lower resolutions. + */ &.vector-header-search-toggled { #mw-sidebar-button, .mw-logo, diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index 51b3adaf..0361d2bf 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -25,12 +25,12 @@ @media ( min-width: @min-width-desktop ) { padding: 6px 25px; - max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 ); + max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop * 2 ); } @media ( min-width: @min-width-desktop-wide ) { padding: 6px 25px; - max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 ); + max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 ); } // Hide sticky header and it's children until visible class is applied to the body diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index 60387e03..fb6c5b7f 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -73,7 +73,8 @@ @{sidebar-toc-selector} { display: none; position: absolute; - margin: 0; + top: @height-collapsed-toc-button; // TOC button height + margin: @padding-top-content-px 0 0 0; // 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; } @@ -97,7 +98,7 @@ } .sidebar-toc { - top: @height-collapsed-toc-button; // TOC button height + margin: 0; left: 6px; } } @@ -107,8 +108,7 @@ .mixin-toc-collapsed-unmoved(); @{sidebar-toc-selector} { - top: ~'calc(@{height-collapsed-toc-button} + @{padding-top-content-px})'; // 44px - left: -4px; + left: -@icon-padding-md; } // Collapsed to floating icon on narrow screens when below page @@ -128,11 +128,6 @@ grid-area: content; } - @{sidebar-toc-selector} { - top: ~'calc(@{height-collapsed-toc-button} + @{padding-top-content-px})'; // 44px - left: -@icon-padding-md; - } - // Collapsed to floating icon // when sticky header not visible and below page title body:not( .vector-sticky-header-visible ).vector-below-page-title& { diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less index 201b80b3..8b950a6f 100644 --- a/resources/skins.vector.styles/layouts/grid.less +++ b/resources/skins.vector.styles/layouts/grid.less @@ -2,8 +2,6 @@ // Grid layout // -@width-gutter: 20px; - // Makes a column span entire page .mixin-column-full-width() { grid-column: sidebar / content; @@ -15,12 +13,6 @@ max-width: @max-width-content-container; } -// aligns left side of column with hamburger icon. -.mixin-column-align-width-hamburger-icon() { - // Align the content with the hamburger icon - padding-left: 8px; -} - .mw-content-container { max-width: @max-width-content-container; @@ -44,16 +36,13 @@ .mw-page-container-inner { display: grid; width: 100%; - grid-template: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)'; - grid-template-areas: 'header header header' - 'sitenotice sitenotice sitenotice' - 'sidebar gutter content' - 'toc gutter content' - 'footer footer footer'; - } - - .mw-body { - padding-left: 0; + column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing + grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)'; + grid-template-areas: 'header header' + 'sitenotice sitenotice' + 'sidebar content' + 'toc content' + 'footer footer'; } // FIXME: Remove selector after I39959f43f20880e83bef945a7535d58cfe0b6412 has been in prod for a week @@ -78,13 +67,6 @@ grid-area: content; } - // FIXME: Remove padding in favor of updating the header icons itself and making mw-body spacing consistent - // This padding complicates the collapsed TOC menu styles and contributes to inconsistent spacing - // with sidebar closed, when no table of contents, align with hamburger menu - @{selector-sidebar-no-toc-sidebar-closed} ~ .mw-content-container { - .mixin-column-align-width-hamburger-icon(); - } - .mw-footer-container { grid-area: footer; } @@ -94,7 +76,7 @@ .mw-page-container-inner { /* Use of minmax is important to restrict the maximum grid column width more information: T314756 */ - grid-template-columns: ~'284px @{width-gutter} minmax(0, 1fr)'; + grid-template-columns: ~'284px minmax(0, 1fr)'; } } diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index 41c97df5..645c3b8a 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -22,7 +22,7 @@ // smaller and will start horizontal scrolling instead. @min-width-supported: unit( 500px / @font-size-browser, em ) - - ( 2 * @padding-horizontal-page-container-wide ); + ( 2 * @padding-horizontal-page-container-desktop-wide ); // 31.25em - 3.75em = 27.5em @ 16 body { @@ -38,11 +38,14 @@ body { } .mw-body { - border-top: @border-width-base @border-style-base transparent; - /* Merge the border with tabs' one (in their background image) */ - margin-top: -@border-width-base; 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; @@ -145,7 +148,7 @@ body { margin-right: auto; // Use non-zero padding to disable margin collapse. // Be careful not to use overflow-y: scroll here (see T270146 and T271868) - padding: 0.05px ( @padding-horizontal-page-container / 2 ); + 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. @@ -153,13 +156,13 @@ body { min-width: @min-width-supported; @media ( min-width: @min-width-desktop ) { - padding-left: @padding-horizontal-page-container; - padding-right: @padding-horizontal-page-container; + padding-left: @padding-horizontal-page-container-desktop; + padding-right: @padding-horizontal-page-container-desktop; } @media ( min-width: @min-width-desktop-wide ) { - padding-left: @padding-horizontal-page-container-wide; - padding-right: @padding-horizontal-page-container-wide; + padding-left: @padding-horizontal-page-container-desktop-wide; + padding-right: @padding-horizontal-page-container-desktop-wide; } }