Cleanup: Merge layout-max-width.less into default layout rules
* Drop some unused variables * Drop global variables.less per max width FIXME Bug: T258116 Change-Id: Iecb0d6c4c80cee1d1684597a6dedf7323e2ec54d
This commit is contained in:
parent
28aa6b84b3
commit
f99946236a
|
@ -5,7 +5,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.vector.styles",
|
"resourceModule": "skins.vector.styles",
|
||||||
"maxSize": "9.3 kB"
|
"maxSize": "8.9 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.vector.styles.responsive",
|
"resourceModule": "skins.vector.styles.responsive",
|
||||||
|
|
|
@ -3,8 +3,7 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// General background/foreground color definition as one exception to the rule.
|
background-color: @background-color-secondary--modern;
|
||||||
background-color: @background-color-base;
|
|
||||||
color: @color-base;
|
color: @color-base;
|
||||||
// Vertical scrollbar always visible.
|
// Vertical scrollbar always visible.
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
@ -17,12 +16,10 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-body {
|
.mw-body {
|
||||||
// Will be removed when we limit content width (T246420).
|
border-top: @border-width-base @border-style-base @border-color-content;
|
||||||
/* Border on top, left, and bottom side */
|
|
||||||
border: @border-width-base @border-style-base @border-color-content;
|
|
||||||
border-right-width: 0;
|
|
||||||
/* Merge the border with tabs' one (in their background image) */
|
/* Merge the border with tabs' one (in their background image) */
|
||||||
margin-top: -@border-width-base;
|
margin-top: -@border-width-base;
|
||||||
|
padding: @padding-content;
|
||||||
|
|
||||||
.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 */
|
||||||
|
@ -34,7 +31,7 @@ body {
|
||||||
// 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;
|
||||||
margin: @margin-top-header 0 @margin-bottom-header;
|
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.
|
// Vertical centering of header elements (IE>=11), requires flex.
|
||||||
// Non-flex fallback for IE<=9: float rule on the child elements.
|
// Non-flex fallback for IE<=9: float rule on the child elements.
|
||||||
.flex-display();
|
.flex-display();
|
||||||
|
@ -67,7 +64,7 @@ body {
|
||||||
#mw-data-after-content,
|
#mw-data-after-content,
|
||||||
#left-navigation,
|
#left-navigation,
|
||||||
.mw-footer {
|
.mw-footer {
|
||||||
margin-left: @width-grid-column-one;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Content */
|
/* Content */
|
||||||
|
@ -91,6 +88,13 @@ body {
|
||||||
.mw-article-toolbar-container {
|
.mw-article-toolbar-container {
|
||||||
// Clear the floats on #left-navigation and #right-navigation.
|
// Clear the floats on #left-navigation and #right-navigation.
|
||||||
.mixin-clearfix();
|
.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 {
|
#left-navigation {
|
||||||
|
@ -105,7 +109,6 @@ body {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: @min-width-personal-tools;
|
flex-basis: @min-width-personal-tools;
|
||||||
margin-left: @margin-horizontal-search;
|
margin-left: @margin-horizontal-search;
|
||||||
|
|
||||||
// Support IE9: This is reset in @support query below if Flexbox is available.
|
// Support IE9: This is reset in @support query below if Flexbox is available.
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
@ -118,12 +121,136 @@ body {
|
||||||
|
|
||||||
#mw-panel {
|
#mw-panel {
|
||||||
position: absolute;
|
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;
|
width: @width-grid-column-one;
|
||||||
.box-sizing( border-box );
|
.box-sizing( border-box );
|
||||||
margin-top: @margin-top-sidebar;
|
margin-top: 0;
|
||||||
padding-left: @padding-left-sidebar;
|
// 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;
|
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
|
// At low resolutions the search must be pushed to the right of the screen
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -7,11 +7,14 @@
|
||||||
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
||||||
@margin-top-sidebar: 0.5em;
|
@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
|
// 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;
|
@padding-vertical-header: 0.125em;
|
||||||
@margin-top-header: 0.625em;
|
@margin-top-header: 0.625em;
|
||||||
@margin-bottom-header: 0.3125em;
|
@margin-bottom-header: 0.3125em;
|
||||||
|
@ -21,7 +24,6 @@
|
||||||
2 * @padding-vertical-header;
|
2 * @padding-vertical-header;
|
||||||
@width-grid-column-one: 11em;
|
@width-grid-column-one: 11em;
|
||||||
@padding-horizontal-page-container: 30px;
|
@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.
|
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
|
||||||
// Assumes various variables defined there.
|
// Assumes various variables defined there.
|
||||||
|
|
||||||
|
@ -47,12 +49,31 @@
|
||||||
@min-width-supported: @min-width-container-base + @min-width-search;
|
@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;
|
@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.
|
// Default layout.
|
||||||
@import 'layout-default.less';
|
@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';
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ body {
|
||||||
background-color: @background-color-base;
|
background-color: @background-color-base;
|
||||||
color: @color-base;
|
color: @color-base;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
padding: @padding-content;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#p-personal {
|
#p-personal {
|
||||||
|
|
|
@ -64,7 +64,6 @@
|
||||||
// Use `rgba()` notation for better Safari support, see T254489.
|
// 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-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-content: 1em;
|
|
||||||
@padding-top-content: 1.25em;
|
@padding-top-content: 1.25em;
|
||||||
@padding-horizontal-content: 0.5em;
|
@padding-horizontal-content: 0.5em;
|
||||||
@padding-blockquote: 8px 32px;
|
@padding-blockquote: 8px 32px;
|
||||||
|
|
Loading…
Reference in New Issue