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

@import '../../common/variables.less';

@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@padding-horizontal-user-links: 12px;

.vector-user-links {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: flex-end;
	flex-shrink: 1;

	.vector-user-menu-more {
		font-size: @font-size-user-links;

		.vector-menu-content-list {
			display: flex;
			align-items: center;

			li {
				margin: 0;
				white-space: nowrap;

				a {
					color: #000;
					text-decoration: none;
				}

				// Below tablet threshold, all menu items except the notification icons will collapse into the user menu
				// This ensures a max of 4 icons on small screen sizes (i.e. search, 2 notification icons and the user avatar)
				&.user-links-collapsible-item {
					display: none;

					@media ( min-width: @width-breakpoint-tablet ) {
						display: block;
					}
				}
			}
		}

		.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;
		}
	}

	// Overrides personal menu styles for consolidated user links.
	.vector-user-menu {
		height: 100%;

		h3 {
			color: transparent; // overrides MediaWiki UI icon
			height: 100%;
		}

		.vector-menu-checkbox {
			// FIXME: This variable is currently not available in mediawiki core, but defined in the icons specification.
			@icon-background-color--selected:  rgba( 0, 0, 0, 0.03 );
			// The mw-ui-icon hover effect does not work on the checkbox hack so must be applied explicitly.
			&:hover + h3 {
				background-color: @icon-background-color--selected;
			}
		}

		.vector-menu-content {
			min-width: 200px;
			top: 100%;
			left: unset;
			right: 0;
			border-top-width: 1px;
			border-radius: 2px;
			// T285786: Box shadow per design spec
			box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );

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

		.vector-menu-content-list {
			li {
				width: 100%;
				margin: 0;
			}
		}

		.vector-menu-content-item,
		li > a {
			// Overrides .mw-ui-icon's `min-height` property to have a computed
			// min-height of 32px. This matches the design spec of having an icon that
			// is 20px in height + 6px of top padding + 6px of bottom padding. Using
			// min-height instead of vertical padding allows menu items without an
			// icon to still be 32px in height.
			min-height: unit( 32px / @font-size-browser, em );
			// Overrides .mw-ui-icon's `display: inline-block` property so that
			// the text can be vertically centered.
			display: flex;
			align-items: center;
			// Overrides .mw-ui-icon's `padding: 0` property so that the text is not
			// at the edge of the menu. Apply the padding on the link element instead
			// of the li element to maximize the click target.
			padding: 0 @padding-horizontal-user-links;
			color: #000;
			text-decoration: none;

			span {
				font-size: @font-size-user-links;
			}

			// Set hover color for "Create account" and "Login" menu items.
			&:hover {
				background-color: @background-color-secondary;
			}
		}

		.vector-menu-content-item-login {
			border-bottom: 1px solid @border-color-base;
		}

		.vector-user-menu-anon-editor {
			padding: 4px @padding-horizontal-user-links;
			color: @colorGray5;
			font-size: @font-size-user-links;

			p {
				margin: 0;
			}
		}

		.vector-menu-content-item-logout {
			border-top: 1px solid @border-color-base;
		}
	}

	.vector-user-menu-logged-out h3 {
		&:before {
			height: 100%;
		}

		&:after {
			content: none;
		}
	}

	.vector-user-menu-logged-in h3 {
		// FIXME: Ideally this variable should be accessible from mediawiki.skin.variables
		// Remove it when we can.
		@icon-padding-md: unit( 12 / @font-size-browser, em );
		@icon-arrow-size: unit( 12px / @font-size-browser, em );
		padding-right: @icon-padding-md + @icon-arrow-size;

		&:before {
			color: #54595d;
		}

		&:after {
			background-position: 100% 0%;
			top: @icon-padding-md + ( @icon-arrow-size / 2 );
			right: @icon-arrow-size;
		}
	}
}