mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 08:35:42 +00:00
31b0fd08d2
The user links and language button are SkinVector22 features but they are buried inside SkinVector. When we rename the templates this code will become problematic as SkinVector22 requires these modifications Bug: T319349 Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
153 lines
3.3 KiB
Plaintext
153 lines
3.3 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;
|
|
}
|
|
|
|
// T319070
|
|
.mw-portlet-personal {
|
|
.vector-feature-visual-enhancement-next-enabled & {
|
|
width: unit( 48 / @font-size-browser / @font-size-user-links, em );
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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 );
|
|
}
|
|
}
|