mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 00:25:40 +00:00
e7b4edf7a6
The Dropdown component should be considered the dropdown folder going forward. This should be distinguished as a different component that composes the Dropdown component Since the template itself is rather simple it seems preferable to have duplicate templates that describe the actual component (PageTools, VariantsDropdown and LanguageButton) MenuDropdown is renamed Dropdown and styles that don't correspond to the Dropdown component are moved to the relevant components. MenuContents mustache template (future component) is added to DRY up several of the new templates. Bug: T320927 Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
150 lines
3.2 KiB
Plaintext
150 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vector-user-menu-logout,
|
|
.vector-user-menu-create-account,
|
|
.vector-user-menu-login,
|
|
.mw-portlet-personal .mw-list-item {
|
|
a {
|
|
.mixin-vector-dropdown-menu-item();
|
|
white-space: nowrap;
|
|
color: @color-link;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Horizontal links menu - logged in and logged out.
|
|
*/
|
|
.vector-user-links .mw-portlet-vector-user-menu-overflow {
|
|
margin-right: 8px;
|
|
|
|
.vector-menu-content-list {
|
|
display: flex;
|
|
align-items: center;
|
|
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 );
|
|
}
|
|
}
|