mediawiki-skins-Vector/resources/skins.vector.styles/components/UserLinks.less
bwang 25f4bc2a37 Remove @font-size-base from vector-2022
Bug: T367899
Change-Id: I6ec44a10a7bfeb6b03912ca6d5a23eaed046db08
2024-09-26 11:44:57 -05:00

115 lines
2.4 KiB
Plaintext

/**
* UserLinks
* All links and menus that appear in the header,
* at the top of the page, after the search bar.
*/
/**
* Top-most container that holds ALL menus in the user links section
* (horizontal menus and dropdowns)
* Logged-in and logged-out.
*/
.vector-user-links {
display: flex;
align-items: center;
position: relative;
justify-content: flex-end;
flex-shrink: 1;
// Spacing for all top-level menu icons.
.mw-list-item,
.vector-dropdown-label {
margin: 0 @spacing-25;
}
// Reset margins on items inside dropdowns.
.vector-dropdown-content .mw-list-item {
margin: 0;
}
}
/**
* Container that holds just the dropdown user menu (displays "..." when logged out).
* Logged-in and logged-out.
*/
.vector-user-menu {
.vector-dropdown-content {
.mixin-vector-dropdown-content-flip();
}
// Used to hide collapsible items inside the dropdown menu
// as well as the dropdown menu itself when the menu is empty
&.user-links-collapsible-item,
.user-links-collapsible-item {
@media ( min-width: @min-width-breakpoint-tablet ) {
display: none;
}
}
}
/**
* Container that holds all menus except the user menu (.vector-user-menu).
* Logged-in and logged-out.
*/
.vector-user-links-main {
display: flex;
align-items: center;
.vector-menu-content-list {
display: flex;
align-items: center;
font-size: @font-size-small;
}
.user-links-collapsible-item {
@media ( max-width: @max-width-breakpoint-mobile ) {
display: none;
}
}
}
/**
* Logged-in dropdown user menu.
*/
.vector-user-menu-logged-in .vector-dropdown-label {
.mixin-vector-arrowed-dropdown-toggle();
}
/**
* Logged-out dropdown user menu items- Special treatment for special links.
*/
#p-user-menu-anon-editor .vector-menu-heading {
display: block;
a::before {
content: '@{msg-parentheses-start}';
}
a::after {
content: '@{msg-parentheses-end}';
}
}
/**
* Logged-in user-page link in personal (overflow) menu.
*/
#pt-userpage-2 {
max-width: unit( 155 / @font-size-browser / @font-size-small, em );
overflow: hidden;
text-overflow: ellipsis;
a:not( .mw-selflink ) {
// T312157 Override redlink (.new) color for non-existant userpage
color: @color-progressive;
}
span {
.text-overflow( @visible: false );
}
// T287522#7295558: Increase the max-width of the username when viewport
// allows for it.
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
max-width: unit( 200 / @font-size-browser / @font-size-small, em );
}
}