Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles
Visual changes: - Footer text and border is aligned with header icons - Main page content has no padding, slightly wider on certain pages/viewports Bug: T317573 Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
This commit is contained in:
parent
98068d9598
commit
7c172531c2
|
@ -67,6 +67,8 @@
|
||||||
// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
|
// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
|
||||||
@icon-padding-md: 12px;
|
@icon-padding-md: 12px;
|
||||||
@icon-padding-md-next: 5px;
|
@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-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 );
|
@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-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;
|
@border-start-blockquote: 4px @border-style-base #eaecf0;
|
||||||
@padding-top-content: 0.5em;
|
@padding-top-content: 0.5em;
|
||||||
@padding-horizontal-content: 0.75em;
|
|
||||||
@padding-blockquote: 8px 32px;
|
@padding-blockquote: 8px 32px;
|
||||||
// T311311 Match VE toolbar styles
|
// T311311 Match VE toolbar styles
|
||||||
@border-bottom-tabs: @border-width-base @border-style-base @colorGray12;
|
@border-bottom-tabs: @border-width-base @border-style-base @colorGray12;
|
||||||
|
@ -195,11 +196,11 @@
|
||||||
//
|
//
|
||||||
// Layout
|
// Layout
|
||||||
//
|
//
|
||||||
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 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 ); // 60em @ 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: unit( 24px / @font-size-browser, em );
|
||||||
@padding-horizontal-page-container-desktop: unit( 32px / @font-size-browser, em );
|
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em );
|
||||||
@padding-horizontal-page-container-desktop-wide: unit( 40px / @font-size-browser, em );
|
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em );
|
||||||
|
|
||||||
// Grid
|
// Grid
|
||||||
@grid-row-gap: 24px;
|
@grid-row-gap: 24px;
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
|
.mw-footer {
|
||||||
|
border-top: @border-base;
|
||||||
|
padding: 0.75em 0;
|
||||||
|
}
|
||||||
|
|
||||||
.mw-footer-container {
|
.mw-footer-container {
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
padding-bottom: 82px;
|
padding-bottom: 82px;
|
||||||
|
|
|
@ -14,6 +14,10 @@
|
||||||
// A min-height is set to account for projects where no icon is set.
|
// A min-height is set to account for projects where no icon is set.
|
||||||
min-height: @height-logo-icon;
|
min-height: @height-logo-icon;
|
||||||
padding: 8px 0;
|
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.
|
// Vertical centering of header elements (IE>=11), requires Flexbox.
|
||||||
.flex-display();
|
.flex-display();
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
@ -53,11 +57,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ( max-width: @max-width-tablet ) {
|
@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.
|
* Toggles the visibility of the search box at lower resolutions.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -13,23 +13,11 @@
|
||||||
// T305069 Layout adjustments of sidebar elements
|
// T305069 Layout adjustments of sidebar elements
|
||||||
// Align the left edge of main menu with the main menu button.
|
// Align the left edge of main menu with the main menu button.
|
||||||
width: @width-sidebar-px;
|
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.
|
// Align the left edge of main menu with the main menu button icon.
|
||||||
@media ( min-width: @min-width-desktop-wide ) {
|
@media ( min-width: @min-width-desktop-wide ) {
|
||||||
width: @width-sidebar-px-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;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
.vector-sticky-header {
|
.vector-sticky-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: @max-width-page-container;
|
||||||
height: @height-sticky-header;
|
height: @height-sticky-header;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -20,12 +21,20 @@
|
||||||
border-bottom: @border-width-base @border-style-base @colorGray14;
|
border-bottom: @border-width-base @border-style-base @colorGray14;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
box-sizing: border-box;
|
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 ) {
|
@media ( min-width: @min-width-desktop-wide ) {
|
||||||
padding: 6px @padding-horizontal-page-container-desktop-wide;
|
padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-em);
|
||||||
max-width: @max-width-page-container + ( @padding-horizontal-page-container-desktop-wide * 2 );
|
}
|
||||||
|
|
||||||
|
.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
|
// Hide sticky header until visible class is applied to the body
|
||||||
|
|
|
@ -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 {
|
.sidebar-toc {
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
|
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
|
||||||
|
|
|
@ -92,6 +92,7 @@
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: @height-collapsed-toc-button; // TOC button height
|
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
|
margin-top: @padding-top-content-px; // Account for padding-top from .mw-body
|
||||||
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
|
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
|
||||||
border: @border-width-base @border-style-base @border-color-base;
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
|
@ -125,10 +126,6 @@
|
||||||
//
|
//
|
||||||
.mixin-toc-collapsed-header();
|
.mixin-toc-collapsed-header();
|
||||||
|
|
||||||
.sidebar-toc {
|
|
||||||
.mixin-vector-flush-left-left();
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Collapsed to floating button on narrow screens when below page title
|
// Collapsed to floating button on narrow screens when below page title
|
||||||
//
|
//
|
||||||
|
|
|
@ -14,16 +14,13 @@
|
||||||
|
|
||||||
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
||||||
// see T259331.
|
// see T259331.
|
||||||
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
|
@padding-content: @padding-top-content 0 1.5em;
|
||||||
|
|
||||||
// Breakpoints
|
// Breakpoints
|
||||||
|
|
||||||
// Defines the minimum viewport width, at which point the layout will not get any
|
// Defines the minimum viewport width, at which point the layout will not get any
|
||||||
// smaller and will start horizontal scrolling instead.
|
// smaller and will start horizontal scrolling instead.
|
||||||
@min-width-supported:
|
@min-width-supported: unit( 500px / @font-size-browser, em );
|
||||||
unit( 500px / @font-size-browser, em ) -
|
|
||||||
( 2 * @padding-horizontal-page-container-desktop-wide );
|
|
||||||
// 31.25em - 3.75em = 27.5em @ 16
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: @background-color-secondary--modern;
|
background-color: @background-color-secondary--modern;
|
||||||
|
@ -38,14 +35,9 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-body {
|
.mw-body {
|
||||||
|
// T315261 Remove horizontal padding, rely on .mw-page-container padding instead
|
||||||
padding: @padding-content;
|
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 {
|
.firstHeading {
|
||||||
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
|
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
@ -111,11 +103,6 @@ body {
|
||||||
padding: @padding-content;
|
padding: @padding-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-footer {
|
|
||||||
border-top: @border-base;
|
|
||||||
padding: 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Container logic.
|
// Container logic.
|
||||||
.mw-page-container {
|
.mw-page-container {
|
||||||
// Setting position and z-index is important as it allows overlays appended to the body tag
|
// Setting position and z-index is important as it allows overlays appended to the body tag
|
||||||
|
@ -124,6 +111,10 @@ body {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
max-width: @max-width-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;
|
||||||
// Fill the viewport even if the content height is small. This also helps
|
// Fill the viewport even if the content height is small. This also helps
|
||||||
// mitigate a long sidebar overflowing the page container (T257518).
|
// mitigate a long sidebar overflowing the page container (T257518).
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
@ -133,10 +124,7 @@ body {
|
||||||
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
|
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
|
||||||
padding: 0.05px @padding-horizontal-page-container;
|
padding: 0.05px @padding-horizontal-page-container;
|
||||||
background-color: @background-color-page-container;
|
background-color: @background-color-page-container;
|
||||||
// Set a min-width to make explicit we do not support anything below this threshold.
|
box-sizing: border-box;
|
||||||
// For devices too small, they should be more useable with horizontal scrolling.
|
|
||||||
// e.g. Portrait on an iPad
|
|
||||||
min-width: @min-width-supported;
|
|
||||||
|
|
||||||
@media ( min-width: @min-width-desktop ) {
|
@media ( min-width: @min-width-desktop ) {
|
||||||
padding-left: @padding-horizontal-page-container-desktop;
|
padding-left: @padding-horizontal-page-container-desktop;
|
||||||
|
|
Loading…
Reference in New Issue