mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-12 16:05:17 +00:00
b55d95c70c
Replacing the legacy Vector breakpoint tokens with the Codex standard ones. All names have been unified, only some legacy values remain for backwards compatibility. Also - replacing a wrongly applied min-width with the correct max-width token, - replacing a width with an equal value min-width one and - removing the now equal value mobile min-width one. Note that we can't do some reference magic here alike `@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as this would take the Codex value from skin variables and not the legacy value. Also note, that we could move all those Vector legacy definitions into Vector's 'mediawiki.skin.variables.less' file(s), but that would mean that extensions don't rely on the Codex default values, but on Vector's and we want latter to move to the standard, also in foresight of further standardization to build for all feature teams like a shared Grid. Bug: T331403 Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
116 lines
2.6 KiB
Plaintext
116 lines
2.6 KiB
Plaintext
@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 .cdx-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;
|
|
|
|
.mw-list-item {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Both logged-in and logged-out dropdown menus.
|
|
*/
|
|
.vector-user-menu {
|
|
.vector-dropdown-content {
|
|
.mixin-vector-dropdown-content-flip();
|
|
}
|
|
|
|
// Used to hide collapsible items inside the dropdown menu
|
|
// as well as the dropdown menu itself when the menu is empty
|
|
&.user-links-collapsible-item,
|
|
.user-links-collapsible-item {
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Horizontal links menu - logged in and logged out.
|
|
*/
|
|
.vector-user-links .mw-portlet-vector-user-menu-overflow {
|
|
font-size: @font-size-user-links;
|
|
|
|
.vector-menu-content-list {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
// Right margin to separate overflow menu from dropdown
|
|
margin-right: 8px;
|
|
|
|
// Separate menu items inside overflow menu
|
|
.vector-menu-content-list {
|
|
column-gap: 8px;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
// Only apply 8px spacing to normal links (i.e. Create account, User page)
|
|
// Links with button classes will have a larger touch area
|
|
// and therefore dont need additional spacing
|
|
a:not( .mw-echo-notifications-badge ):not( .cdx-button ) {
|
|
margin: 0 8px;
|
|
}
|
|
}
|
|
|
|
.user-links-collapsible-item {
|
|
@media ( max-width: @max-width-breakpoint-mobile ) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Logged-in dropdown menu
|
|
*/
|
|
.vector-user-menu-logged-in .vector-dropdown-label {
|
|
.mixin-vector-arrowed-dropdown-toggle();
|
|
}
|
|
|
|
/**
|
|
* Dropdown menu items- Special treatment for special links.
|
|
*/
|
|
#p-user-menu-anon-editor .vector-menu-heading {
|
|
display: block;
|
|
|
|
a::before {
|
|
content: '@{msg-parentheses-start}';
|
|
}
|
|
|
|
a::after {
|
|
content: '@{msg-parentheses-end}';
|
|
}
|
|
}
|
|
|
|
//User-page link in personal (overflow) menu.
|
|
#pt-userpage-2 {
|
|
max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );
|
|
|
|
a:not( .mw-selflink ) {
|
|
// T312157 Override redlink (.new) color for non-existant userpage
|
|
color: @color-link;
|
|
}
|
|
|
|
span {
|
|
.text-overflow( @visible: false );
|
|
}
|
|
|
|
// T287522#7295558: Increase the max-width of the username when viewport
|
|
// allows for it.
|
|
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
|
|
max-width: unit( 200 / @font-size-browser / @font-size-user-links, em );
|
|
}
|
|
}
|