mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 16:15:28 +00:00
d556f74c4c
Since the TOC container is overlaid on top of the content container when the TOC is not pinned, we always want the width of those two containers to match or else misalignment could occur. This commit keeps the `.mw-table-of-contents-container` selector in sync with the `.mw-content-container` selector in terms of width. Bug: T322162 Change-Id: I2fe26dc616cc46e1b3c9ce4f2ac63a23da415fa9
101 lines
2.7 KiB
Plaintext
101 lines
2.7 KiB
Plaintext
//
|
|
// Grid layout
|
|
//
|
|
|
|
// Makes a column span entire page
|
|
.mixin-column-full-width() {
|
|
grid-column: sidebar / content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
// Needed for minimal content e.g. one word articles.
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
max-width: @max-width-content-container;
|
|
|
|
.vector-feature-limited-width-disabled & {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.mw-content-container,
|
|
.mw-table-of-contents-container {
|
|
max-width: @max-width-content-container;
|
|
|
|
// For container logic specific to special pages and history pages.
|
|
// FIXME: Remove `.skin-vector-disable-max-width` when caching no longer an issue.
|
|
.vector-feature-limited-width-disabled &,
|
|
.vector-feature-limited-width-content-disabled &,
|
|
.skin-vector-disable-max-width & {
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop ) {
|
|
.mw-page-container-inner {
|
|
display: grid;
|
|
width: 100%;
|
|
column-gap: 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
|
|
grid-template: ~'min-content min-content min-content 1fr min-content / 232px minmax(0, 1fr)';
|
|
grid-template-areas: 'header header'
|
|
'sitenotice sitenotice'
|
|
'sidebar content'
|
|
'toc content'
|
|
'footer footer';
|
|
}
|
|
|
|
.vector-sitenotice-container {
|
|
grid-area: sitenotice;
|
|
}
|
|
|
|
.mw-table-of-contents-container {
|
|
grid-area: toc;
|
|
}
|
|
|
|
.mw-header {
|
|
grid-area: header;
|
|
}
|
|
|
|
.vector-main-menu-container {
|
|
grid-area: sidebar;
|
|
}
|
|
|
|
.mw-content-container {
|
|
grid-area: content;
|
|
}
|
|
|
|
.mw-footer-container {
|
|
grid-area: footer;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-desktop-wide ) {
|
|
.mw-page-container-inner {
|
|
/* Use of minmax is important to restrict the maximum grid column width
|
|
more information: T314756 */
|
|
grid-template-columns: ~'284px minmax(0, 1fr)';
|
|
}
|
|
}
|
|
|
|
@{selector-sidebar-no-toc-sidebar-closed} {
|
|
& ~ .mw-content-container {
|
|
.mixin-column-full-width();
|
|
}
|
|
}
|
|
|
|
.vector-toc-collapsed @{selector-main-menu-closed} {
|
|
& ~ .mw-content-container,
|
|
& ~ .mw-table-of-contents-container {
|
|
.mixin-column-full-width();
|
|
}
|
|
}
|