VectorGOLEM/resources/skins.vector.styles/layout-default.less

115 lines
2.6 KiB
Plaintext

//
// Default layout for Modern Vector.
//
@margin-horizontal-sidebar-button-icon: 12px;
body {
// General background/foreground color definition as one exception to the rule.
background-color: @background-color-base;
color: @color-base;
// Vertical scrollbar always visible.
overflow-y: scroll;
}
.mw-body,
.parsoid-body {
direction: ltr;
padding: @padding-content;
}
.mw-body {
// Will be removed when we limit content width (T246420).
/* Border on top, left, and bottom side */
border: @border-width-base @border-style-base @border-color-content;
border-right-width: 0;
/* 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;
}
}
.mw-header {
// A min-height is set to account for projects where no icon is set.
min-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();
flex-wrap: wrap;
// https://caniuse.com/#search=align-items
align-items: center;
z-index: @z-index-header;
}
/* Searchbox */
#p-search {
float: left;
margin: 0.5em 0.5em 0 0.5em;
min-width: 5em;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 20em;
}
/* 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;
}
/* Navigation Containers */
.mw-article-toolbar-container {
// Clear the floats on #left-navigation and #right-navigation.
.mixin-clearfix();
}
#left-navigation {
float: left;
}
#right-navigation {
float: right;
}
#mw-sidebar-button {
float: left; // Browser: IE9 support - button as flex-child fallback.
margin-left: -@margin-horizontal-sidebar-button-icon;
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}
#mw-panel {
position: absolute;
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;
}