MediaWiki:Vector.less/vectormenu.less

From Brighter Shores Wiki
Jump to navigation Jump to search
:root {
	--personal-links-bg: var(--body-main);
	// --background-text-color (#444) fill
	--arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5' fill='%23444'/%3E%3C/svg%3E");
}

.vector-menu-dropdown {
	.vector-menu-heading {
		background-color: var(--vector-tab-background);
		padding: 1em 0.75em 0.6923em; // 0.6923em is roughly 9px
		margin: 0; // kill negative pixel margin

		// "More" text
		&,
		&:hover,
		&:focus {
			color: var(--background-text-color);
		}

		&:after {
			background-image: var(--arrow-down);
			opacity: 1;
		}
	}

	.vector-menu-content {
		border-color: transparent;
		background-color: var(--body-light);
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
		left: 0; // reset -1px offset since we don't have border between tabs
	}

	.mw-list-item {
		a {
			color: var(--link-color);
		}

		// Selected page on the menu
		&.selected a,
		&.selected a:visited {
			color: var(--text-color);
		}
	}
}

// top links
#p-personal {
	background: var(--personal-links-bg);
	top: 0;
	right: 0;
	border-radius: 0 0 0 @border-radius * 2;
	height: 1.875em; // 30px with a 16px default font-size

	ul {
		padding: 0 1em 0 .4375em; // + list items' margin-left of 9px = 1em on both sides
	}
}