mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 18:05:19 +00:00
ce007e059e
This affects all dropdowns in Vector 2022, including the user menu in the header and the language variants and "more" menu in the article toolbar. By relying on shared styles instead of separate implementations, this change also reduces the size of the skins.vector.styles module by 1.6kB (uncompressed). Visual changes: - The links in the user menu are now blue - Dropdown links in the user menu and tabs are blue - The dropdown labels in the tabs are black not dark gray. Bug: T312157 Bug: T308344 Change-Id: I002d5454838a5516b6ee6c7c38721209ed28508b
123 lines
2.5 KiB
Plaintext
123 lines
2.5 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.
|
|
*/
|
|
.vector-user-menu-more {
|
|
.vector-menu-content-list {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-links-collapsible-item {
|
|
@media ( max-width: @min-width-tablet ) {
|
|
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 );
|
|
}
|
|
}
|