mediawiki-skins-Vector/resources/skins.vector.styles/components/UserLinks.less
Jon Robson f31f0bbf50 [Cleanup] Address FIXMES relating to cached HTML
Change-Id: I6f5e97dde1f774e741a4236d1f6b49ad146cc236
2022-11-15 23:23:56 +00:00

144 lines
3.1 KiB
Plaintext

@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;
}
}
}
/**
* Horizontal links menu - logged in and logged out.
*/
.vector-user-links .mw-portlet-vector-user-menu-overflow {
.vector-feature-visual-enhancement-next-enabled & {
margin-right: 8px;
}
.vector-menu-content-list {
display: flex;
align-items: center;
.vector-feature-visual-enhancement-next-enabled & {
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 );
}
}