mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-13 16:38:44 +00:00
791b9bb0d5
Removes padding from the top and bottom of the .mw-body element so that the border of the sidebar menus align with border of the tab area. Also removes the bottom margin on the sidebar menus so that the bottom of the menus align with the bottom of the content. (This was an artifact from the gray background design). **Visual Changes** - The content will move up by 8px with this change. - The bottom of the TOC will also move down by 24px to align with the content. Bug: T351432 Change-Id: If0a8189b228ffb6fb63dfd8be40955653caa0b34
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 {
|
|
width: @width-column-desktop;
|
|
}
|
|
|
|
// Align the sidebar menus with the bottom-border of the
|
|
// toolbar (below the page title) by pushing down the sidebar content
|
|
// by the hieght of the page title.
|
|
// NOTE: This alignment happens to work when the title is on a single line
|
|
// but can be affected by H1 line-height.
|
|
.vector-column-start,
|
|
.vector-column-end {
|
|
margin-top: @font-size-heading-1;
|
|
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 {
|
|
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 {
|
|
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';
|
|
}
|
|
}
|