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

@import '../../variables.less';
@import 'mediawiki.mixins.less';

/**
 * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
 */

/* Namespaces and Views */
// FIXME: For cached HTML
.vectorTabs,
.vector-menu-tabs {
	// Tab separator: Outer start border (left in LTR) of tab row.
	background-position: left bottom;
	float: left;
	height: 2.5em;
	padding-left: @border-width-base;

	/* Navigation Labels */
	h3 {
		display: none;
	}

	ul {
		float: left;
		height: 100%;
		list-style: none none;
		margin: 0;
		padding: 0;
	}

	li {
		// Tab fade background: Fade inside from light grey to white.
		background-image: url( images/tab-normal-fade.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
		background-image: linear-gradient( to top, @border-color-content--tabs-inactive 0, #e8f2f8 1px, #fff 100% ); // Support: Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
		background-position: left bottom;
		background-repeat: repeat-x;
		float: left;
		display: block;
		height: 100%;
		margin: 0;
		padding: 0;
		line-height: @line-height-nav;
		white-space: nowrap;

		a {
			// Tab separator: Border between tabs and outer right border.
			background-position: right bottom;
			color: @color-link;
			.box-sizing( border-box );
			display: block;
			float: left;
			height: unit( 40 / @font-size-tabs / @font-size-browser, em );
			position: relative;
			padding-top: 1.25em;
			padding-left: 8px;
			padding-right: 8px;
			font-size: @font-size-tabs;
			cursor: pointer;
		}
	}

	.new {
		a,
		a:visited {
			color: @color-link-new;
		}
	}

	.selected {
		// Replace tab fade with flat color (matching top of would-be fade).
		background-image: url( images/tab-current-fade.png );
		// Overwrite above in browsers that support `rgba()`.
		background: rgba( 255, 255, 255, 1 ); // stylelint-disable-line declaration-block-no-shorthand-property-overrides

		a,
		a:visited {
			color: @color-link-selected;
			text-decoration: none;
		}
	}

	.icon {
		a {
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}
}