mediawiki-skins-Vector/resources/skins.vector.styles/layout-default.less

//
// 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;
	}
}

/* Space for header above content */
.skin-vector-search-header-legacy .mw-header-placeholder {
	// Reserve space for the absolute positioned header and tabs.
	height: @height-header + @height-tabs;
}

/* Header layout */
.skin-vector-search-header-legacy .mw-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.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;
}

/* Tabs */
.skin-vector-search-header-legacy #mw-head {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}

/* Navigation Containers */
.mw-article-toolbar-container {
	// Clear the floats on #left-navigation and #right-navigation.
	.mixin-clearfix();
}

.skin-vector-search-header-legacy #left-navigation {
	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;
}

#left-navigation {
	float: left;
}

.skin-vector-search-header-legacy #right-navigation {
	margin-top: @height-header;
}

#right-navigation {
	float: right;
}

.skin-vector-search-header-legacy #p-personal {
	position: absolute;
	top: @top-personal-tools;
	right: 0.75em;
	z-index: @z-index-personal;

	ul {
		// Keep from spilling out into the first column
		// For completeness this should also include the width of the logo.
		// As a result it is possible for the personal tools to overlap the logo.
		padding-left: @width-grid-column-one;
	}
}

#p-personal {
	li {
		// Some extensions e.g. Echo may change the height of list items
		// If that's the case we want to ensure all other elements are vertically aligned consistently.
		vertical-align: middle;
		display: inline-block;
	}
}

#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.
}

.skin-vector-search-header-legacy #mw-panel {
	// The sidebar is absolutely positioned inside the header which applies a top
	// margin so we need to subtract this top margin in order to get the correct
	// sidebar position.
	top: @height-header - @margin-top-header;
}

#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;
}

.skin-vector-search-header-legacy .mw-footer {
	margin-top: 0;
}