mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-22 12:42:43 +00:00
135 lines
3.4 KiB
Plaintext
135 lines
3.4 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 1fr min-content / @{grid-template-column-desktop}';
|
|
// stylelint-disable-next-line @stylistic/declaration-colon-space-after
|
|
grid-template-areas:
|
|
'siteNotice siteNotice'
|
|
'columnStart pageContent'
|
|
'footer footer';
|
|
}
|
|
|
|
.vector-sitenotice-container {
|
|
grid-area: siteNotice;
|
|
}
|
|
|
|
.vector-column-start {
|
|
grid-area: columnStart;
|
|
overflow-anchor: none; // T330108
|
|
}
|
|
|
|
.mw-content-container {
|
|
grid-area: pageContent;
|
|
}
|
|
|
|
.mw-footer-container {
|
|
grid-area: footer;
|
|
}
|
|
|
|
.vector-feature-page-tools-pinned-enabled .vector-column-end,
|
|
.vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
|
|
width: @width-column-desktop;
|
|
}
|
|
|
|
// Align the pinnable header bottom border with the bottom-border of the
|
|
// toolbar (below the page title) by pushing down the sidebar content
|
|
.vector-column-start,
|
|
.vector-column-end {
|
|
margin-top: 2.8rem;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
@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-page-tools-pinned-enabled .vector-column-end,
|
|
.vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
|
|
width: @width-column-desktop-wide;
|
|
}
|
|
}
|
|
|
|
// Single column grid 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-page-container-inner,
|
|
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner {
|
|
grid-template-columns: @width-page-content;
|
|
// stylelint-disable-next-line @stylistic/declaration-colon-space-after
|
|
grid-template-areas:
|
|
'siteNotice'
|
|
'pageContent'
|
|
'columnStart'
|
|
'footer';
|
|
|
|
// Horizontally center content when single column
|
|
.mw-body {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@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,
|
|
.vector-feature-appearance-pinned-clientpref-1 .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';
|
|
}
|
|
}
|