mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-04 20:18:57 +00:00
f83cca3cc5
Merges all of the styles in the Zebra module into the default styles. - skins.vector.zebra.styles ResourceLoader module is removed. - FIXME's related to Zebra styles are removed. - Top-level "&" that were used for scoping to feature-flag are removed. - `$wgVectorZebraDesign` feature flag is removed. Bug: T347712 Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
138 lines
3.5 KiB
Plaintext
138 lines
3.5 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-client-prefs-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,
|
|
&.vector-feature-client-prefs-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,
|
|
&.vector-feature-client-prefs-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';
|
|
}
|
|
}
|