mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 03:34:25 +00:00
125 lines
2.6 KiB
Plaintext
125 lines
2.6 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
// TODO: Remove vector-user-menu-more after I371bb11903d8cdd8f0da89266fcf549050c0da8c has been in prod for a week
|
|
.vector-user-menu-more,
|
|
.vector-user-menu-overflow {
|
|
.vector-menu-content-list {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.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 (dropdown) menu.
|
|
#pt-userpage-2 {
|
|
max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );
|
|
|
|
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 );
|
|
}
|
|
}
|