mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 11:17:35 +00:00
e4a4050b81
Moving styles from the existing styles to common/layout or components stylesheets they should be associated with. Components are identified using PascalCase. Lowercase names are used for things that are not components. This distinction should help us reason with the code better and make it clearer where CSS belongs, saving us lots of wasted effort discussing conventions. Patch isn't making actual CSS changes themselves - for testing purposes this should be a NOOP. In preparation for the gradient removal, 'background-gradient.less' is marked as legacy. Merged 'externalLinks.less' into content.less, they belong to content. Bug: T249073 Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
143 lines
3.3 KiB
Plaintext
143 lines
3.3 KiB
Plaintext
// 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 '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Modern layout variables
|
|
@height-tabs: 2.5em; // Keep in sync with .vectorTabs height
|
|
@margin-top-sidebar: 0.5em;
|
|
|
|
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
|
@padding-left-sidebar: 0.5em;
|
|
@padding-horizontal-header: @margin-end-portal +
|
|
@padding-left-sidebar +
|
|
( @margin-start-nav-main-body / @font-size-nav-main-heading );
|
|
@padding-vertical-header: 0.125em;
|
|
@margin-top-header: 0.625em;
|
|
@margin-bottom-header: 0.3125em;
|
|
@height-logo-icon: 3.125em; // Logo sizes per specification in T245190.
|
|
@height-header: @height-logo-icon +
|
|
@margin-top-header + @margin-bottom-header +
|
|
2 * @padding-vertical-header;
|
|
@width-grid-column-one: 11em;
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.mw-body,
|
|
.parsoid-body {
|
|
// General background/foreground color definition as one exception to the rule.
|
|
background-color: @background-color-base;
|
|
color: @color-base;
|
|
direction: ltr;
|
|
padding: @padding-content;
|
|
}
|
|
|
|
.mw-body {
|
|
/* Merge the border with tabs' one (in their background image) */
|
|
margin-top: -@border-width-base;
|
|
|
|
.firstHeading {
|
|
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
/* Space for header above content */
|
|
.mw-header-placeholder {
|
|
// Reserve space for the absolute positioned header and tabs.
|
|
height: @height-header + @height-tabs;
|
|
}
|
|
|
|
/* Header layout */
|
|
.mw-header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
// A height is set to account for projects where no icon is set.
|
|
height: @height-logo-icon;
|
|
margin: @margin-top-header 0 @margin-bottom-header;
|
|
padding: @padding-vertical-header @padding-horizontal-header;
|
|
// Vertical centering of header elements (IE>=11), requires flex.
|
|
// Non-flex fallback for IE<=9: float rule on the child elements.
|
|
.flex-display();
|
|
// https://caniuse.com/#search=align-items
|
|
align-items: center;
|
|
z-index: @z-index-header;
|
|
}
|
|
|
|
/* Main column */
|
|
.mw-body,
|
|
#mw-data-after-content,
|
|
#left-navigation,
|
|
.mw-footer {
|
|
margin-left: @width-grid-column-one;
|
|
}
|
|
|
|
/* Content */
|
|
.mw-indicators {
|
|
float: right;
|
|
z-index: @z-index-indicators;
|
|
}
|
|
|
|
.mw-body-content {
|
|
position: relative;
|
|
z-index: @z-index-base;
|
|
}
|
|
|
|
/* Hide, but keep accessible for screen-readers */
|
|
#mw-navigation h2 {
|
|
position: absolute;
|
|
top: -9999px;
|
|
}
|
|
|
|
/* Tabs */
|
|
#mw-head {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Navigation Containers */
|
|
#left-navigation {
|
|
float: left;
|
|
margin-top: @height-header;
|
|
/* When right nav would overlap left nav, it's placed below it
|
|
(normal CSS floats behavior). This rule ensures that no empty space
|
|
is shown between them due to right nav's margin-top. Page layout
|
|
is still broken, but at least the nav overlaps only the page title
|
|
instead of half the content. */
|
|
margin-bottom: -@height-header;
|
|
}
|
|
|
|
#right-navigation {
|
|
float: right;
|
|
margin-top: @height-header;
|
|
}
|
|
|
|
#mw-panel {
|
|
position: absolute;
|
|
top: @height-header;
|
|
left: 0;
|
|
width: @width-grid-column-one;
|
|
.box-sizing( border-box );
|
|
margin-top: @margin-top-sidebar;
|
|
padding-left: @padding-left-sidebar;
|
|
z-index: @z-index-sidebar;
|
|
}
|
|
|
|
.mw-footer {
|
|
margin-top: 0;
|
|
}
|