mediawiki-skins-Vector/resources/skins.vector.styles/components/UserLinks.less

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

@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
// Applies to links in the overflow menu that do not have the .mw-ui-button class.
@overflow-link-margin: 0 8px;

/**
 * Container that holds both the horizontal menu and dropdown menus.
 */
.vector-user-links {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: flex-end;
	flex-shrink: 1;
	font-size: @font-size-user-links;

	.mw-ui-button {
		// FIXME: Overrides mw-ui-button's `display: inline-block` property so that
		// the text in the button is vertically centered. `.mw-ui-button` sets a
		// min-height to the button, but should also vertically center the
		// button's children.
		display: flex;
		align-items: center;
	}

	.mw-list-item {
		margin: 0;
	}
}

/**
 * Both logged-in and logged-out dropdown menus.
 */
.vector-user-menu {
	.vector-menu-content {
		left: auto;
		right: 0;
		min-width: 200px;
	}

	.user-links-collapsible-item {
		@media ( min-width: @min-width-tablet ) {
			display: none;
		}
	}
}

.vector-user-menu-logout,
.vector-user-menu-create-account,
.vector-user-menu-login,
.mw-portlet-personal .mw-list-item {
	a {
		.mixin-vector-dropdown-menu-item();
		white-space: nowrap;
		color: @color-link;
	}
}

/**
 * Horizontal links menu - logged in and logged out.
 */
.vector-user-links .mw-portlet-vector-user-menu-overflow {
	.vector-menu-content-list {
		display: flex;
		align-items: center;
	}

	// TODO: Simplify button, icon button and link styling with T323244
	@media ( min-width: @min-width-desktop ) {
		// Right margin to separate overflow menu from dropdown
		margin-right: 8px;

		// Separate icon buttons inside the overflow menu
		.vector-menu-content-list {
			column-gap: 8px;
		}
	}

	// Add margin to links that don't have the .mw-ui-button or related icon classes.
	a:not( .mw-ui-button ):not( .mw-echo-notifications-badge  ) {
		margin: 0 8px;
	}

	.user-links-collapsible-item {
		@media ( max-width: @max-width-mobile ) {
			display: none;
		}
	}
}

/**
 * Logged-in dropdown menu
 */
.vector-user-menu-logged-in {
	.vector-menu-heading {
		// override user menu (.mw-ui-icon) fixed width,
		// so chevron beside icon is visible.
		width: auto;

		// and override again to ensure the user icon is 20px wide.
		&:before {
			width: auto;
		}
	}
}

/**
 * Dropdown menu items- Special treatment for special links.
 */

// Anon editor notice i.e. "Pages for logged out editors".
.vector-user-menu-anon-editor {
	.mixin-vector-dropdown-menu-item();
	color: @color-base--subtle;

	a:before {
		content: '@{msg-parentheses-start}';
	}

	a:after {
		content: '@{msg-parentheses-end}';
	}
}

// Login link.
.vector-user-menu-login {
	border-bottom: @border-width-base @border-style-base @colorGray14;
}

// Logout link
.vector-user-menu-logout {
	border-top: @border-width-base @border-style-base @colorGray14;
}

//User-page link in personal (overflow) menu.
#pt-userpage-2 {
	max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );

	a {
		// T312157 Override redlink (.new) color for non-existant userpage
		color: @color-primary;
	}

	span {
		.text-overflow( @visible: false );
	}

	// T287522#7295558: Increase the max-width of the username when viewport
	// allows for it.
	@media ( min-width: @min-width-desktop-wide ) {
		max-width: unit( 200 / @font-size-browser / @font-size-user-links, em );
	}
}