mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-04 20:18:57 +00:00
3cea6d4132
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e
.vector-feature-zebra-design-enabled {
@import "./screen.less"
}
To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.
getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.
Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
139 lines
3.1 KiB
Plaintext
139 lines
3.1 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.
|
|
*/
|
|
|
|
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Content container
|
|
|
|
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
|
// see T259331.
|
|
@padding-content: @padding-top-content 0 1.5em;
|
|
|
|
&html {
|
|
scroll-padding-top: @scroll-padding-top;
|
|
}
|
|
|
|
body {
|
|
background-color: @background-color-secondary--modern;
|
|
color: @color-base;
|
|
// Vertical scrollbar always visible.
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.mw-body,
|
|
.parsoid-body {
|
|
direction: ltr;
|
|
}
|
|
|
|
.mw-body {
|
|
// T315261 Remove horizontal padding, rely on .mw-page-container padding instead
|
|
padding: @padding-content;
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Main column */
|
|
.mw-body,
|
|
#mw-data-after-content,
|
|
.mw-footer {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Content */
|
|
.mw-indicators {
|
|
z-index: @z-index-indicators;
|
|
}
|
|
|
|
.vector-page-titlebar {
|
|
.mixin-clearfix();
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.mw-body .mw-portlet-lang {
|
|
float: right;
|
|
}
|
|
|
|
.vector-body {
|
|
position: relative;
|
|
z-index: @z-index-base;
|
|
}
|
|
|
|
#siteSub {
|
|
// By default its hidden as it was hidden in Vector legacy but site styles can reveal.
|
|
display: none;
|
|
margin-top: 8px; // 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: 84%;
|
|
line-height: 1.2em;
|
|
color: @color-base--subtle;
|
|
width: auto;
|
|
// Visually separate #contentSub and #contentSub2 (T315639)
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
.parsoid-body {
|
|
padding: @padding-content;
|
|
}
|
|
|
|
// Container logic.
|
|
.mw-page-container {
|
|
// 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: 0;
|
|
// Fill the viewport even if the content height is small. This also helps
|
|
// mitigate a long sidebar overflowing the page container (T257518).
|
|
min-height: 100%;
|
|
// 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-bottom: 0.05px;
|
|
.mixin-page-container();
|
|
}
|
|
|
|
.vector-header-container {
|
|
.mw-header,
|
|
.vector-sticky-header {
|
|
width: 100%;
|
|
// A min-height is set to account for projects where no icon is set.
|
|
min-height: @height-header;
|
|
}
|
|
}
|
|
|
|
&.vector-feature-limited-width-disabled .mw-page-container {
|
|
max-width: none;
|
|
}
|
|
|
|
.skin--responsive .mw-page-container {
|
|
min-width: auto;
|
|
}
|