mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2025-01-07 12:24:18 +00:00
b55d95c70c
Replacing the legacy Vector breakpoint tokens with the Codex standard ones. All names have been unified, only some legacy values remain for backwards compatibility. Also - replacing a wrongly applied min-width with the correct max-width token, - replacing a width with an equal value min-width one and - removing the now equal value mobile min-width one. Note that we can't do some reference magic here alike `@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as this would take the Codex value from skin variables and not the legacy value. Also note, that we could move all those Vector legacy definitions into Vector's 'mediawiki.skin.variables.less' file(s), but that would mean that extensions don't rely on the Codex default values, but on Vector's and we want latter to move to the standard, also in foresight of further standardization to build for all feature teams like a shared Grid. Bug: T331403 Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
130 lines
3.7 KiB
Plaintext
130 lines
3.7 KiB
Plaintext
//
|
|
// Grid layout
|
|
//
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.mw-page-container-inner {
|
|
display: grid;
|
|
column-gap: @grid-column-gap;
|
|
grid-template: ~'min-content min-content 1fr min-content / @{grid-template-column-desktop}';
|
|
// stylelint-disable-next-line stylistic/declaration-colon-space-after
|
|
grid-template-areas:
|
|
'siteNotice siteNotice'
|
|
'mainMenu pageContent'
|
|
'toc pageContent'
|
|
'footer footer';
|
|
}
|
|
|
|
.vector-sitenotice-container {
|
|
grid-area: siteNotice;
|
|
}
|
|
|
|
.mw-table-of-contents-container {
|
|
grid-area: toc;
|
|
overflow-anchor: none; // T330108
|
|
}
|
|
|
|
.vector-main-menu-container {
|
|
grid-area: mainMenu;
|
|
overflow-anchor: none; // T330108
|
|
}
|
|
|
|
.mw-content-container {
|
|
grid-area: pageContent;
|
|
}
|
|
|
|
.mw-footer-container {
|
|
grid-area: footer;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
|
|
.mw-page-container-inner {
|
|
grid-template-columns: @grid-template-column-desktop-wide;
|
|
}
|
|
|
|
.mw-header {
|
|
display: grid;
|
|
column-gap: @grid-column-gap;
|
|
grid-template: ~'auto / @{grid-template-column-desktop-wide}';
|
|
grid-template-areas: 'headerStart headerEnd';
|
|
|
|
.vector-header-start {
|
|
grid-area: headerStart;
|
|
}
|
|
|
|
.vector-header-end {
|
|
grid-area: headerEnd;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vector-feature-limited-width-clientpref-0 .mw-content-container,
|
|
&.vector-feature-limited-width-clientpref-0 .mw-table-of-contents-container,
|
|
&.vector-feature-limited-width-content-disabled .mw-content-container,
|
|
&.vector-feature-limited-width-content-disabled .mw-table-of-contents-container {
|
|
// Allow the max-width of content on history/special pages to be wider than
|
|
// the max-width of content on article pages.
|
|
// Note, we don't disable the max-width on .vector-page-toolbar-container intentionally
|
|
// to support easier navigation between tabs.
|
|
// See T293441 for further information on that.
|
|
// Both rules are !important as they are final. Max-width on a page should be restored by removing the `skin-vector-disable-max-width`,
|
|
// preferably by modification to the feature flag VectorMaxWidthOptions. Code should never attempt to override this rule.
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
max-width: none !important;
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
width: 100% !important;
|
|
}
|
|
|
|
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
|
|
&.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-content-container,
|
|
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-content-container {
|
|
grid-column: mainMenu / pageContent;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.mw-body {
|
|
display: grid;
|
|
grid-template: ~'min-content min-content min-content 1fr / minmax(0, @{max-width-content-container}) min-content';
|
|
/**
|
|
* NOTE: T327715 - 'titlebar-cx' grid area is a temporary workaround to accommodate
|
|
* the Content Translation extension and should not be used beyond that.
|
|
* FIXME: This can be removed when T322740 is resolved.
|
|
*/
|
|
// stylelint-disable-next-line stylistic/declaration-colon-space-after
|
|
grid-template-areas:
|
|
'titlebar-cx .'
|
|
'titlebar columnEnd'
|
|
'toolbar columnEnd'
|
|
'content columnEnd';
|
|
|
|
.vector-page-titlebar {
|
|
grid-area: titlebar;
|
|
}
|
|
|
|
.vector-page-toolbar {
|
|
grid-area: toolbar;
|
|
}
|
|
|
|
#bodyContent {
|
|
grid-area: content;
|
|
}
|
|
|
|
.vector-column-end {
|
|
grid-area: columnEnd;
|
|
overflow-anchor: none;
|
|
}
|
|
}
|
|
|
|
&.vector-feature-page-tools-pinned-enabled .mw-body {
|
|
column-gap: @grid-column-gap;
|
|
}
|
|
|
|
&.vector-feature-limited-width-clientpref-0 .mw-body,
|
|
&.vector-feature-limited-width-content-disabled .mw-body {
|
|
grid-template-columns: ~'minmax(0, 1fr) min-content';
|
|
}
|
|
}
|