From cedf6d94380693708005b7fe247af995f785c0ef Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Mon, 30 Oct 2023 11:22:46 -0400 Subject: [PATCH] Change Zebra module to match current Vector styles Changes the skins.vector.zebra.styles module to match the current Vector 2022 styles. **Visual changes** (All pertaining to zebra.vector.zebra.styles) - There are no grey backgrounds - Context boxes with white backgrounds and drop-shadows are removed - Page-tools sidebar width is the same as TOC sidebar width - Content container is narrowed from 960px to 948px to prevent shifting content when pinning TOC or main menu. Bug: T347638 Change-Id: If6e1ef21f076f6a9f0f8cafb2d745a7c13afb471 --- .../components/StickyHeader.less | 3 +- .../layouts/grid.less | 12 +++ .../layouts/screen.less | 87 +++++++------------ .../skins.vector.zebra.styles/mixins.less | 31 +------ .../skins.vector.zebra.styles/variables.less | 4 +- 5 files changed, 49 insertions(+), 88 deletions(-) diff --git a/resources/skins.vector.zebra.styles/components/StickyHeader.less b/resources/skins.vector.zebra.styles/components/StickyHeader.less index a1be13d7d..16d3a46a5 100644 --- a/resources/skins.vector.zebra.styles/components/StickyHeader.less +++ b/resources/skins.vector.zebra.styles/components/StickyHeader.less @@ -18,6 +18,7 @@ display: flex; align-items: center; justify-content: space-between; + border-bottom: @border-width-base @border-style-base @border-color-content-box; // // Layout @@ -146,7 +147,7 @@ } .vector-sticky-pinned-container { - top: ~'calc( @{height-header} + @{grid-row-gap})'; + top: @height-header; } // - T289817 `.mw-sticky-header-element` provides an API for template developers diff --git a/resources/skins.vector.zebra.styles/layouts/grid.less b/resources/skins.vector.zebra.styles/layouts/grid.less index 0d73cfad9..497668f44 100644 --- a/resources/skins.vector.zebra.styles/layouts/grid.less +++ b/resources/skins.vector.zebra.styles/layouts/grid.less @@ -34,6 +34,17 @@ &.vector-feature-page-tools-pinned-enabled .vector-column-end { width: @width-column-desktop; } + + // Align the sidebar menus with the bottom-border of the + // toolbar (below the page title) by pushing down the sidebar content + // by the hieght of the page title (font-size+padding) + 1px border. + // NOTE: This alignment happens to work (when the title is on a single line) + // but could be broken by line-height. + .vector-column-start, + .vector-column-end { + margin-top: ~'calc(@{font-size-heading-1} + @{margin-top-pre-content})'; + border-top: 1px solid transparent; + } } @media ( min-width: @min-width-breakpoint-desktop-wide ) { @@ -69,6 +80,7 @@ grid-template-areas: 'siteNotice' 'pageContent' + 'columnStart' 'footer'; // Horizontally center content when single column diff --git a/resources/skins.vector.zebra.styles/layouts/screen.less b/resources/skins.vector.zebra.styles/layouts/screen.less index 525f1fbfd..67c3d50c3 100644 --- a/resources/skins.vector.zebra.styles/layouts/screen.less +++ b/resources/skins.vector.zebra.styles/layouts/screen.less @@ -9,22 +9,6 @@ // see T259331. @padding-content: @padding-top-content 0 1.5em; -/** - * Padding for the page content column gets smaller at narrow screen widths. - * NOTE: This selector represents the HTML element because :root is unavailable due to how - * the file is wrapped in an html selector in the skins.vector.zebra.styles/skin.less file. - */ -html& { - --padding-vertical-content: @padding-vertical-content-box; - --padding-horizontal-content: @padding-horizontal-content-box; -} - -@media ( min-width: @min-width-breakpoint-desktop ) { - html& { - --padding-horizontal-content: @padding-horizontal-content-box-wide; - } -} - &html { scroll-padding-top: @scroll-padding-top; } @@ -39,6 +23,11 @@ body { direction: ltr; } +.mw-body { + // T315261 Remove horizontal padding, rely on .mw-page-container padding instead + padding: @padding-content; +} + .mw-body .firstHeading { word-wrap: break-word; margin-bottom: 0; @@ -69,8 +58,8 @@ body { display: block; position: absolute; bottom: 0; - left: var( --padding-horizontal-content ); - right: var( --padding-horizontal-content ); + left: 0; + right: 0; height: 1px; background-color: @border-color-base; } @@ -93,44 +82,9 @@ body { float: right; } -/** - * Style main content column to appear as a single box. - * We cannot use a wrapper to create the border around these elements because - * the Page Tools menu sits between the toolbar and content body and appears as a visually - * distinct box when it's pinned (i.e. a wrapper element would wrap Page Tools as well). - */ -.vector-page-titlebar, -.vector-page-toolbar, -.vector-body { - .mixin-vector-content-box(); - padding-left: var( --padding-horizontal-content ); - padding-right: var( --padding-horizontal-content ); -} - -.vector-page-titlebar { - padding-top: var( --padding-vertical-content ); - /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - border-bottom-style: none; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.vector-page-toolbar { - /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - border-top-style: none; - /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - border-bottom-style: none; - border-radius: 0; -} - .vector-body { position: relative; z-index: @z-index-base; - padding-bottom: var( --padding-vertical-content ); - border-top-right-radius: 0; - border-top-left-radius: 0; - /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - border-top-style: none; } #siteSub { @@ -141,8 +95,7 @@ body { // are rendered. #contentSub:not( :empty ), #contentSub2 { - font-size: 84%; - line-height: 1.2em; + font-size: unit( @font-size-small, rem ); color: @color-subtle; width: auto; // Visually separate #contentSub and #contentSub2 (T315639) @@ -165,14 +118,33 @@ body { // Use non-zero padding to disable margin collapse. // Be careful not to use overflow-y: scroll here (see T270146 and T271868) padding-top: 0.05px; + padding-left: @padding-horizontal-page-container; + padding-right: @padding-horizontal-page-container; + background-color: @background-color-page-container; +} + +@media ( min-width: @min-width-breakpoint-desktop ) { + .mw-page-container, + .vector-header-container .mw-header, + .vector-header-container .vector-sticky-header { + padding-left: @padding-horizontal-page-container-desktop; + padding-right: @padding-horizontal-page-container-desktop; + } +} + +@media ( min-width: @min-width-breakpoint-desktop-wide ) { + .mw-page-container, + .vector-header-container .mw-header, + .vector-header-container .vector-sticky-header { + padding-left: @padding-horizontal-page-container-desktop-wide; + padding-right: @padding-horizontal-page-container-desktop-wide; + } } .vector-header-container { width: 100%; display: flex; justify-content: center; - background-color: @background-color-page-container; - border-bottom: @border-width-base @border-style-base @border-color-content-box; } .vector-header-container .mw-header, @@ -180,6 +152,7 @@ body { width: 100%; // A min-height is set to account for projects where no icon is set. min-height: @height-header; + background-color: @background-color-page-container; .mixin-vector-page-container-sizing(); } diff --git a/resources/skins.vector.zebra.styles/mixins.less b/resources/skins.vector.zebra.styles/mixins.less index 797ce3686..71eb2c48c 100644 --- a/resources/skins.vector.zebra.styles/mixins.less +++ b/resources/skins.vector.zebra.styles/mixins.less @@ -21,17 +21,15 @@ &::after { content: ''; background: url( ../skins.vector.styles/images/arrow-down.svg ) 100% 50% no-repeat; - width: unit( 16 / @font-size-browser, rem ); - height: unit( 16 / @font-size-browser, rem ); + width: unit( 12 / @font-size-browser, rem ); + height: unit( 12 / @font-size-browser, rem ); // https://phabricator.wikimedia.org/T319070#8284272 - margin-left: -1px; + margin-left: 7px; } } .mixin-vector-content-box() { background-color: @background-color-base; - border: @border-width-base @border-style-base @border-color-content-box; - border-radius: @border-radius-content-box; } .mixin-vector-dropdown-menu() { @@ -65,29 +63,6 @@ } } -.mixin-page-container() { - 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; - margin: 0 auto; - padding-left: @padding-horizontal-page-container; - padding-right: @padding-horizontal-page-container; - background-color: @background-color-page-container; - box-sizing: border-box; - - @media ( min-width: @min-width-breakpoint-desktop ) { - padding-left: @padding-horizontal-page-container-desktop; - padding-right: @padding-horizontal-page-container-desktop; - } - - @media ( min-width: @min-width-breakpoint-desktop-wide ) { - padding-left: @padding-horizontal-page-container-desktop-wide; - padding-right: @padding-horizontal-page-container-desktop-wide; - } -} - .mixin-vector-scrollable-with-fade() { overflow-y: auto; diff --git a/resources/skins.vector.zebra.styles/variables.less b/resources/skins.vector.zebra.styles/variables.less index 7274c84f1..3bb9ad186 100644 --- a/resources/skins.vector.zebra.styles/variables.less +++ b/resources/skins.vector.zebra.styles/variables.less @@ -152,8 +152,8 @@ // // Layout // -@max-width-page-container: unit( 1596px / @font-size-browser, em ); // T305069 - 99.75em @ 16 -@max-width-content-container: unit( 1040px / @font-size-browser, rem ); // T335155 +@max-width-page-container: unit( 1596px / @font-size-browser, rem ); // T305069 - 99.75rem @ 16 +@max-width-content-container: unit( 948px / @font-size-browser, rem ); // T335155 @padding-horizontal-page-container: unit( 24px / @font-size-browser, rem ); @padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, rem ); @padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, rem );