MediaWiki:Vector.less/vectortabs.less

:root {
	// for more granular control for dark mode
	--vector-tab-background: #f0f0f0;
	--vector-tab-background--hover: var(--body-mid);
	--vector-tab-link-color: #937040;

	// uses --background-link-color (#52351e)
	--watch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='transparent' stroke='%2352351e' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E");
	--unwatch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%2352351e' stroke='%2352351e' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E");
}

.vector-menu-tabs-legacy {
	// Part of the css required to fix external link heights regardless of font size
	//.vector-menu-content {
	//	height: 100%; still needed?
	//}

	// pixel padding for border
	padding: 0;

	// redlink in tab
	.new {
		a,
		a:visited {
			color: var(--redlink-color);
		}
	}

	// selected tab
	.selected {
		background: var(--body-main);

		a,
		a:visited {
			color: var(--text-color);
		}
	}

	// padding for tabs
	li a {
		color: var(--vector-tab-link-color);
		padding: 0 .75em;
		padding-top: 1em;

		&:visited {
			color: var(--vector-tab-link-color);
		}
	}

	// background for tabs
	ul {
		li {
			background: var(--vector-tab-background);
		}

		a:hover {
			text-decoration: none;
		}
	}
}

// hide "Read" tab
#ca-view {
	display: none !important; // for beating the inline style in lower widths
}

// Tabs hover
.vector-menu-tabs ul li:not(.selected):hover,
// "More options" dropdown
#p-cactions:hover #p-cactions-label {
	background: var(--vector-tab-background--hover);
}


// inner shadow for tabs
.vector-menu-tabs ul li:not(.selected),
#mw-head .vector-menu-dropdown .vector-menu-heading {
	box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
}

// remove image borders between all tabs
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
	background-image: none;
}

// remove remaining blue border in VisualEditor
.ve-activated .vector-menu-tabs .selected {
	box-shadow: none;
}

// Watch icon
.vector-menu-tabs {
	#ca-watch.icon a {
		&:before,
		&:hover:before,
		&:focus:before {
			background-image: var(--watch-icon);
		}
	}

	#ca-unwatch.icon a {
		&:before,
		&:hover:before,
		&:focus:before {
			background-image: var(--unwatch-icon);
		}
	}
}