mediawiki-skins-Vector/resources/skins.vector.styles/common.less

/*
 * Any rules which should not be flipped automatically in right-to-left situations should be
 * prepended with @noflip in a comment block.
 *
 */
@import '../../variables.less';
@import 'mediawiki.mixins.less';

/* Framework */
html {
	font-size: @font-size-root;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: @font-family-sans;
}

body {
	background-color: @background-color-secondary;
	overflow-y: scroll;
}

/* Content */
.mw-body,
.parsoid-body {
	background-color: @background-color-base;
	color: @color-base;
	padding: @padding-content;
	direction: ltr;
}

.mw-body,
#mw-data-after-content {
	margin-left: 10em;
}

.mw-body {
	/* 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;

	// h1's can exist outside of mw-body-content so some heading styles
	// need to be defined in mw-body as well
	& h1,
	&-content h1,
	&-content h2 {
		margin-bottom: 0.25em;
		padding: 0;
		font-family: @font-family-serif;
		line-height: @line-height-heading;

		// Fallback heading font for scripts which render poorly in `@font-family-serif`.
		// See T73240
		&:lang( ja ), /* See T65817 */
		&:lang( he ), /* See T65843 and T65844 */
		&:lang( ko ) { /* See T65827 */
			font-family: @font-family-sans--fallback;
		}

		/* Burmese (Myanmar) language headlines would be cropped with set `line-height` */
		/* See T193270 */
		&:lang( my ) {
			line-height: normal;
		}
	}

	& h1,
	&-content h1 {
		font-size: @font-size-heading-1;
	}

	.firstHeading {
		/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
		overflow: visible;
	}

	.mw-indicators {
		float: right;
		font-size: @font-size-base;
		line-height: @line-height-base;
		/* Ensure that this is displayed on top of .mw-body-content and clickable */
		position: relative;
		z-index: 1;
	}

	.mw-indicator {
		display: inline-block;
	}
}

.mw-body-content {
	position: relative;
	font-size: @font-size-base;
	line-height: @line-height-base;
	z-index: 0;

	p {
		margin: 0.5em 0;
	}

	h1 {
		margin-top: 1em;
	}

	h2 {
		margin-top: 1em;
		font-size: @font-size-heading-2;
	}

	h3,
	h4,
	h5,
	h6 {
		margin-top: 0.3em;
		margin-bottom: 0;
		padding-bottom: 0;
		line-height: @line-height-base;
	}

	h3 {
		font-size: @font-size-heading-3;
	}

	h3,
	h4 {
		font-weight: bold;
	}

	h4,
	h5,
	h6 {
		font-size: @font-size-reset; // Reset.
	}

	.toc h2 {
		font-family: @font-family-sans;
		font-size: @font-size-reset; // Reset.
	}
}

/* Allow edit sections outside of mw-body-content (T160269) */
.mw-editsection,
.mw-editsection-like {
	font-family: @font-family-sans;
}

/* Hide empty portlets */
.emptyPortlet {
	display: none;
}

ul {
	// No need for PNG fallback. Fallback is browser default (a smaller, also black, circle).
	.list-style-image( 'images/bullet-icon.svg' );
}

pre,
.mw-code {
	line-height: @line-height-code;
}

/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {
	font-size: @font-size-site-notice;
}

.mw-jump-link:not( :focus ) {
	.mixin-screen-reader-text;
}

/* Head */
#mw-page-base {
	background-position: bottom left;
	height: 5em;
	.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
}

#mw-head-base {
	margin-top: -5em;
	margin-left: 10em;
	height: 5em;
}

/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
	position: absolute;
	top: -9999px;
}

#mw-head {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}

/* Navigation Containers */
#left-navigation {
	float: left;
	margin-left: 10em;
	margin-top: 2.5em;
	/* 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: -2.5em;
}

#right-navigation {
	float: right;
	margin-top: 2.5em;
}