mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-12 07:55:21 +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
164 lines
4 KiB
Plaintext
164 lines
4 KiB
Plaintext
/**
|
|
* Vector modern layout styles for screen
|
|
*
|
|
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
|
* The rules here should only define the layout, not color or typography.
|
|
*/
|
|
|
|
&html {
|
|
scroll-padding-top: @scroll-padding-top;
|
|
}
|
|
|
|
body {
|
|
background-color: @background-color-secondary--modern;
|
|
color: @color-base;
|
|
}
|
|
|
|
.mw-body,
|
|
.parsoid-body {
|
|
direction: ltr;
|
|
}
|
|
|
|
.mw-body .firstHeading {
|
|
word-wrap: break-word;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mw-header {
|
|
// allow z-index to apply so search results overlay article
|
|
position: relative;
|
|
z-index: @z-index-header;
|
|
}
|
|
|
|
#mw-content-text {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* Content */
|
|
.mw-indicators {
|
|
z-index: @z-index-indicators;
|
|
}
|
|
|
|
.vector-page-titlebar {
|
|
.mixin-clearfix();
|
|
box-shadow: none;
|
|
// Faux bottom border that stretches to the edges
|
|
// of the *content*, not the full width of the box.
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background-color: @border-color-base;
|
|
}
|
|
|
|
&-blank::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.vector-body-before-content {
|
|
// Contain the floating .mw-indicators, but don't use clearfix because of browser inconsistencies
|
|
// when combining 'clear' and 'margin-top' (T325391)
|
|
overflow: hidden;
|
|
|
|
// Margin is only applied to indicators inside `.vector-body-before-content` since they can
|
|
// also appear next to the page title, where margin is not needed.
|
|
.mw-indicators {
|
|
margin-top: @margin-top-pre-content;
|
|
}
|
|
}
|
|
|
|
// Language button at bottom of content.
|
|
.mw-body .mw-portlet-lang {
|
|
float: right;
|
|
}
|
|
|
|
.vector-body {
|
|
position: relative;
|
|
z-index: @z-index-base;
|
|
}
|
|
|
|
#siteSub {
|
|
margin-top: @margin-top-pre-content; // T311564
|
|
}
|
|
|
|
// Styles only applied to non-empty #contentSub to avoid extra margins when both #contentSub and #contentSub2
|
|
// are rendered.
|
|
#contentSub:not( :empty ),
|
|
#contentSub2 {
|
|
font-size: unit( @font-size-small, rem );
|
|
color: @color-subtle;
|
|
width: auto;
|
|
// Visually separate #contentSub and #contentSub2 (T315639)
|
|
margin: @margin-top-pre-content 0 0;
|
|
}
|
|
|
|
// Container logic.
|
|
.mw-page-container {
|
|
.mixin-vector-page-container-sizing();
|
|
// Setting position and z-index is important as it allows overlays appended to the body tag
|
|
// to position themselves over the Vector interface. This forms another stacking context for
|
|
// elements placed inside this element
|
|
position: relative;
|
|
z-index: @z-index-base;
|
|
margin: 0 auto;
|
|
// Use non-zero padding to disable margin collapse.
|
|
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
|
|
padding-top: 0.05px;
|
|
padding-left: @padding-horizontal-page-container;
|
|
padding-right: @padding-horizontal-page-container;
|
|
background-color: @background-color-page-container;
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.mw-page-container,
|
|
.vector-header-container .mw-header,
|
|
.vector-header-container .vector-sticky-header {
|
|
padding-left: @padding-horizontal-page-container-desktop;
|
|
padding-right: @padding-horizontal-page-container-desktop;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
|
|
.mw-page-container,
|
|
.vector-header-container .mw-header,
|
|
.vector-header-container .vector-sticky-header {
|
|
padding-left: @padding-horizontal-page-container-desktop-wide;
|
|
padding-right: @padding-horizontal-page-container-desktop-wide;
|
|
}
|
|
}
|
|
|
|
.vector-header-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.vector-header-container .mw-header,
|
|
.vector-header-container .vector-sticky-header {
|
|
width: 100%;
|
|
// A min-height is set to account for projects where no icon is set.
|
|
min-height: @height-header;
|
|
background-color: @background-color-page-container;
|
|
.mixin-vector-page-container-sizing();
|
|
}
|
|
|
|
&.vector-feature-limited-width-clientpref-0 .mw-page-container,
|
|
&.vector-feature-limited-width-clientpref-0 .vector-sticky-header,
|
|
&.vector-feature-limited-width-clientpref-0 .mw-header {
|
|
max-width: none;
|
|
}
|
|
|
|
.skin--responsive .mw-page-container {
|
|
min-width: auto;
|
|
}
|
|
|
|
.vector-column-end {
|
|
// T327460: Prevent subpixel rendering issues associated with the text and Chrome.
|
|
contain: paint;
|
|
}
|