mediawiki-skins-Vector/resources/skins.vector.styles/components/UserLinks.less
bwang 6bff0011c1 Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
2022-11-11 18:56:12 +00:00

146 lines
3.2 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.
*/
// FIXME: vector-user-menu-overflow for cached HTML only.
.vector-user-links .mw-portlet-vector-user-menu-overflow,
.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 );
}
}