diff --git a/bundlesize.config.json b/bundlesize.config.json index ee680bc..4a7e721 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -5,7 +5,7 @@ }, { "resourceModule": "skins.vector.styles", - "maxSize": "9.3 kB" + "maxSize": "8.9 kB" }, { "resourceModule": "skins.vector.styles.responsive", diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less index 85c8a37..4a73f66 100644 --- a/resources/skins.vector.styles/layout-default.less +++ b/resources/skins.vector.styles/layout-default.less @@ -3,8 +3,7 @@ // body { - // General background/foreground color definition as one exception to the rule. - background-color: @background-color-base; + background-color: @background-color-secondary--modern; color: @color-base; // Vertical scrollbar always visible. overflow-y: scroll; @@ -17,12 +16,10 @@ body { } .mw-body { - // Will be removed when we limit content width (T246420). - /* Border on top, left, and bottom side */ - border: @border-width-base @border-style-base @border-color-content; - border-right-width: 0; + border-top: @border-width-base @border-style-base @border-color-content; /* Merge the border with tabs' one (in their background image) */ margin-top: -@border-width-base; + padding: @padding-content; .firstHeading { /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ @@ -34,7 +31,7 @@ body { // A min-height is set to account for projects where no icon is set. min-height: @height-logo-icon; margin: @margin-top-header 0 @margin-bottom-header; - padding: @padding-vertical-header @padding-horizontal-header; + padding: @padding-vertical-header 0; // Vertical centering of header elements (IE>=11), requires flex. // Non-flex fallback for IE<=9: float rule on the child elements. .flex-display(); @@ -67,7 +64,7 @@ body { #mw-data-after-content, #left-navigation, .mw-footer { - margin-left: @width-grid-column-one; + margin-left: 0; } /* Content */ @@ -91,6 +88,13 @@ body { .mw-article-toolbar-container { // Clear the floats on #left-navigation and #right-navigation. .mixin-clearfix(); + // We want to keep the max-width of the article-toolbar-container the + // same max-width as the article page's content container in order to + // prevent it from moving when going from an article page to a + // history/special page. + max-width: @max-width-content-container; + margin-left: auto; + margin-right: auto; } #left-navigation { @@ -105,7 +109,6 @@ body { flex-grow: 1; flex-basis: @min-width-personal-tools; margin-left: @margin-horizontal-search; - // Support IE9: This is reset in @support query below if Flexbox is available. float: right; } @@ -118,12 +121,136 @@ body { #mw-panel { position: absolute; - left: 0; + // Sidebar is displaced from the workspace container so that the + // sidebar is flush with the edge of the screen at small widths. + left: -@padding-horizontal-page-container; width: @width-grid-column-one; .box-sizing( border-box ); - margin-top: @margin-top-sidebar; - padding-left: @padding-left-sidebar; + margin-top: 0; + // To avoid the white part of the gradient colliding with the sidebar links + // we apply top and bottom padding. + padding: 8px 0 40px @padding-left-sidebar; z-index: @z-index-sidebar; + background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% ); +} + +.parsoid-body { + padding: @padding-content; +} + +#p-namespaces { + background-image: none; + padding-left: 0; +} + +.mw-footer { + border-top: @border-base; + padding: 32px 0 0 0; +} + +// Container logic. +.mw-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; + max-width: @max-width-page-container; + // 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%; + margin-left: auto; + margin-right: auto; + padding: 0 @padding-horizontal-page-container; + background-color: @background-color-page-container; + // Establish a new block formatting context to prevent header top margin + // collapsing and causing whitespace to appear between the header and + // viewport. + overflow-y: auto; +} + +// Used as a container for absolutely positioned elements. +.mw-page-container-inner { + position: relative; +} + +.mw-workspace-container { + max-width: @max-width-workspace-container; + margin-left: auto; + margin-right: auto; + // The sidebar is absolutely positioned relative to the + // mw-workspace-container. + position: relative; +} + +.mw-content-container { + max-width: @max-width-content-container; + margin-left: auto; + margin-right: auto; +} + +.mw-sidebar-container { + position: absolute; + top: 0; + left: 0; + right: 0; +} + +.mw-footer-container { + padding-top: 50px; + padding-bottom: 82px; +} + +// For container logic specific to special pages and history pages. +.action-history, +.ns-special { + // Allow the max-width of content on history/special pages to be wider than + // the max-width of content on article pages. + .mw-content-container { + max-width: none; + } + + // Adjusts the content when sidebar is open regardless of the viewport width. + .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container { + margin-left: @margin-start-content; + } +} + +// We want it to appear like the sidebar is going into/coming out of +// `.mw-page-container`, but we can't use `overflow: hidden` on +// `.mw-page-container` because that will cut off the sidebar. Therefore, we +// calculate the maximum distance from the start of `mw-page-container` to the +// start of the sidebar. +#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { + .transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) ); +} + +// Responsive overrides. +@media ( min-width: @min-width-page-container--padded ) { + .mw-page-container { + border-left: 1px solid @border-color-sidebar; + border-right: 1px solid @border-color-sidebar; + } +} + +@media ( max-width: @max-width-margin-start-content ) { + // Adjusts the content and mw-article-toolbar-container. + .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container, + .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container { + margin-left: @margin-start-content; + } + + // Specificity needed to disable the default animations at lower resolutions. + .vector-animations-ready .mw-sidebar { + // Remove sidebar transition at smaller widths. + .transition( none ); + } +} + +@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) { + #mw-panel { + background: @background-color-page-container; + border-right: 1px solid @border-color-sidebar; + } } // At low resolutions the search must be pushed to the right of the screen diff --git a/resources/skins.vector.styles/layout-max-width.less b/resources/skins.vector.styles/layout-max-width.less deleted file mode 100644 index 943ed4b..0000000 --- a/resources/skins.vector.styles/layout-max-width.less +++ /dev/null @@ -1,209 +0,0 @@ -@import '../../variables.less'; -@import 'mediawiki.mixins.less'; -@import 'mediawiki.skin.variables.less'; - -// Putting a `skin-vector-max-width` class on the body and wrapping the rules -// herein enables the ability to feature flag the max-width design. This is -// listed in the acceptance criteria of T246420. In other words, if this class -// is present, the max-width design will appear. Without this class, max-width -// design will not appear. In either case, the appearance should not be broken. -.skin-vector-max-width { - @background-color-secondary--modern: #f8f9fa; - @max-width-page-container: 1650px; - @min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); - @background-color-page-container: @background-color-base; - @max-width-workspace-container: 1440px; - @max-width-content-container: 960px; - // TODO: Remove @padding-content in variables.less when the max-width layout - // becomes the default layout since the value is different between legacy and - // latest. - // 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; - // We want ~60px of space between the end of the sidebar and the start of the - // content container for aesthetic reasons. The sidebar is already displaced - // -30px so we simply add 30px of space to the width of the sidebar. - @margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); - // Page container's total horizontal padding in em units. - @padding-horizontal-page-container-total: 2 * unit( @padding-horizontal-page-container / @font-size-browser, em ); - // Equivalent to 1432px. This determines the maximum width breakpoint at which - // the content will have a fixed start margin applied to it when the sidebar - // is open. The content can shift its position when the sidebar is open/closed - // at or below this breakpoint and will maintain its position above this - // breakpoint. - @max-width-margin-start-content: ( 2 * @margin-start-content ) + @padding-horizontal-page-container-total + ( unit( @max-width-content-container / @font-size-browser, em ) ); - @border-color-sidebar: @background-color-secondary--modern; - - // Style overrides for existing elements. Mostly overrides layout.less rules. - background-color: @background-color-secondary--modern; - - .mw-body { - border-left: 0; - border-bottom: 0; - padding: @padding-content; - } - - .parsoid-body { - padding: @padding-content; - } - - .mw-header { - padding-left: 0; - padding-right: 0; - } - - .mw-body, - #mw-data-after-content, - #left-navigation, - .mw-footer { - margin-left: 0; - } - - #p-namespaces { - background-image: none; - padding-left: 0; - } - - #mw-panel { - background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% ); - // Sidebar is displaced from the workspace container so that the - // sidebar is flush with the edge of the screen at small widths. - left: -@padding-horizontal-page-container; - margin-top: 0; - // To avoid the white part of the gradient colliding with the sidebar links - // we apply top and bottom padding. - padding-top: 8px; - padding-bottom: 40px; - // Adjust the left position of the sidebar to align it with the sidebar menu button, - // in the header, while ensuring the background gradient still extends to the edge of the screen. - // note: the 1px comes from the transparent border of the sidebar button - padding-left: @margin-horizontal-sidebar-button-icon + @border-width-base; - } - - .mw-footer { - border-top: @border-base; - padding: 32px 0 0 0; - } - - // Container logic. - .mw-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; - max-width: @max-width-page-container; - // 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%; - margin-left: auto; - margin-right: auto; - padding: 0 @padding-horizontal-page-container; - background-color: @background-color-page-container; - } - - &.skin-vector-search-header .mw-page-container { - // Establish a new block formatting context to prevent header top margin - // collapsing and causing whitespace to appear between the header and - // viewport. - overflow-y: auto; - } - - // Used as a container for absolutely positioned elements. - .mw-page-container-inner { - position: relative; - } - - .mw-workspace-container { - max-width: @max-width-workspace-container; - margin-left: auto; - margin-right: auto; - } - - &.skin-vector-search-header .mw-workspace-container { - // The sidebar is absolutely positioned relative to the - // mw-workspace-container. - position: relative; - } - - .mw-content-container { - max-width: @max-width-content-container; - margin-left: auto; - margin-right: auto; - } - - &.skin-vector-search-header .mw-article-toolbar-container { - // We want to keep the max-width of the article-toolbar-container the - // same max-width as the article page's content container in order to - // prevent it from moving when going from an article page to a - // history/special page. - max-width: @max-width-content-container; - margin-left: auto; - margin-right: auto; - } - - .mw-sidebar-container { - position: absolute; - top: 0; - left: 0; - right: 0; - } - - .mw-footer-container { - padding-top: 50px; - padding-bottom: 82px; - } - - // For container logic specific to special pages and history pages. - &.action-history, - &.ns-special { - // Allow the max-width of content on history/special pages to be wider than - // the max-width of content on article pages. - .mw-content-container { - max-width: none; - } - - // Adjusts the content when sidebar is open regardless of the viewport width. - .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container { - margin-left: @margin-start-content; - } - } - - // We want it to appear like the sidebar is going into/coming out of - // `.mw-page-container`, but we can't use `overflow: hidden` on - // `.mw-page-container` because that will cut off the sidebar. Therefore, we - // calculate the maximum distance from the start of `mw-page-container` to the - // start of the sidebar. - #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar { - .transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) ); - } - - // Responsive overrides. - @media ( min-width: @min-width-page-container--padded ) { - @border-color: @border-color-sidebar; - - .mw-page-container { - border-left: 1px solid @border-color; - border-right: 1px solid @border-color; - } - } - - @media ( max-width: @max-width-margin-start-content ) { - // Adjusts the content and mw-article-toolbar-container. - .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container, - .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container { - margin-left: @margin-start-content; - } - - .mw-sidebar { - // Remove sidebar transition at smaller widths. - .transition( none ); - } - } - - @media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) { - #mw-panel { - background: @background-color-page-container; - border-right: 1px solid @border-color-sidebar; - } - } -} diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less index 78216db..d96b67b 100644 --- a/resources/skins.vector.styles/layout.less +++ b/resources/skins.vector.styles/layout.less @@ -7,11 +7,14 @@ @height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height. @margin-top-sidebar: 0.5em; +@margin-horizontal-sidebar-button-icon: unit( 12 / @font-size-browser, em); +// Adjust the left position of the sidebar to align it with the sidebar menu button, +// in the header, while ensuring the background gradient still extends to the edge of the screen. +// note: the 1px comes from the transparent border of the sidebar button +@padding-left-sidebar: @margin-horizontal-sidebar-button-icon + unit( @border-width-base / @font-size-browser, em ); +@border-color-sidebar: @background-color-secondary--modern; + // Header sizes defined in the description of T246170 and comment T246170#5957100 -@padding-left-sidebar: 0.5em; -@padding-horizontal-header: @margin-end-portal + - @padding-left-sidebar + - ( @margin-start-nav-main-body / @font-size-nav-main-heading ); @padding-vertical-header: 0.125em; @margin-top-header: 0.625em; @margin-bottom-header: 0.3125em; @@ -21,7 +24,6 @@ 2 * @padding-vertical-header; @width-grid-column-one: 11em; @padding-horizontal-page-container: 30px; -@margin-horizontal-sidebar-button-icon: 12px; // This assumes the presence of variables inside layout.less. DO NOT import it separately. // Assumes various variables defined there. @@ -47,12 +49,31 @@ @min-width-supported: @min-width-container-base + @min-width-search; @width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools; -@height-personal-tools: 2em; +@background-color-secondary--modern: #f8f9fa; +@max-width-page-container: 1650px; +@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); +@background-color-page-container: @background-color-base; +@max-width-workspace-container: 1440px; +@max-width-content-container: 960px; +// 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; +// We want ~60px of space between the end of the sidebar and the start of the +// content container for aesthetic reasons. The sidebar is already displaced +// -30px so we simply add 30px of space to the width of the sidebar. +@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); +// Page container's total horizontal padding in em units. +@padding-horizontal-page-container-total: 2 * unit( @padding-horizontal-page-container / @font-size-browser, em ); +// Equivalent to 1432px. This determines the maximum width breakpoint at which +// the content will have a fixed start margin applied to it when the sidebar +// is open. The content can shift its position when the sidebar is open/closed +// at or below this breakpoint and will maintain its position above this +// breakpoint. +@max-width-margin-start-content: ( 2 * @margin-start-content ) + @padding-horizontal-page-container-total + ( unit( @max-width-content-container / @font-size-browser, em ) ); // Default layout. @import 'layout-default.less'; // -// Feature flag modifications to layout (additive) +// Feature flag modifications to layout in new files (these should be additive) // -@import 'layout-max-width.less'; diff --git a/resources/skins.vector.styles/legacy/layout.less b/resources/skins.vector.styles/legacy/layout.less index 94a11a6..c4c4ea1 100644 --- a/resources/skins.vector.styles/legacy/layout.less +++ b/resources/skins.vector.styles/legacy/layout.less @@ -15,7 +15,7 @@ body { background-color: @background-color-base; color: @color-base; direction: ltr; - padding: @padding-content; + padding: 1em; } #p-personal { diff --git a/variables.less b/variables.less index 034c7c4..45e5545 100644 --- a/variables.less +++ b/variables.less @@ -64,7 +64,6 @@ // Use `rgba()` notation for better Safari support, see T254489. @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-content: 1em; @padding-top-content: 1.25em; @padding-horizontal-content: 0.5em; @padding-blockquote: 8px 32px;