diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 5cb5e31..b7b0eb4 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -97,6 +97,10 @@ class SkinVector extends SkinMustache { } } $options['responsive'] = $responsive; + + if ( $this->shouldConsolidateUserLinks() ) { + $options['link'] = [ 'text-wrapper' => [ 'tag' => 'span' ] ]; + } } $options['templateDirectory'] = __DIR__ . '/templates'; diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less index 3a47893..cdc22f6 100644 --- a/resources/common/components/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -14,12 +14,15 @@ position: relative; display: block; .box-sizing( border-box ); - // `padding-top` needs to scale with font-size. - padding-top: 1.25em; - padding-left: 8px; - padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em ); - font-size: @font-size-tabs; - font-weight: normal; + + &:not( .mw-ui-icon ) { + // `padding-top` needs to scale with font-size. + padding-top: 1.25em; + padding-left: 8px; + padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em ); + font-size: @font-size-tabs; + font-weight: normal; + } &:after { content: ''; @@ -77,7 +80,7 @@ } li { - padding: 0; + padding: 0.625em; margin: 0; text-align: left; line-height: 1em; @@ -85,10 +88,12 @@ a { color: @color-link; display: block; - padding: 0.625em; white-space: nowrap; cursor: pointer; - font-size: @font-size-tabs; + + span { + font-size: @font-size-tabs; + } } } diff --git a/resources/common/variables.less b/resources/common/variables.less index 1942641..94f15c2 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -20,6 +20,22 @@ @outline-color-base--focus: @color-primary; +// +// == Icons == +// FIXME: Use mediawiki.skin.variables when available. +// +@icon-touch-area-sm: 34; +@icon-touch-area-md: 44; +@font-size-browser: 16; // Assumed browser default of `16px`. +// Small icon +@icon-glyph-size-sm: 16; +@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em ); +@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em ); +// Medium icon +@icon-glyph-size-md: 20; +@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em ); +@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em ); + // // == Typography == // diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index 646bb51..fea66e1 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -16,22 +16,10 @@ } #mw-sidebar-button { - // Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element. - min-width: @size-sidebar-button; - min-height: @size-sidebar-button; - width: @size-sidebar-button; - height: @size-sidebar-button; border: @border-width-base @border-style-base transparent; border-radius: @border-radius-base; &:before { - // FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px. - // As soon as mediawiki.ui is standardized, remove this override. See T191021. - min-width: 20px; - min-height: 20px; - height: 100%; - // Center it horizontally. - margin: 0 @margin-horizontal-sidebar-button-icon; // Equals `#555`, closest to `#54595d` on background-color `#fff`. opacity: 0.67; /* @embed */ diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index d019375..6eca49a 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -3,7 +3,6 @@ .vector-user-links { display: flex; align-items: center; - height: 30px; position: relative; justify-content: flex-end; flex-shrink: 1; @@ -42,8 +41,9 @@ height: 100%; h3 { + color: transparent; // overrides MediaWiki UI icon height: 100%; - padding: 0; + font-size: inherit; } .vector-menu-checkbox { @@ -89,7 +89,11 @@ .vector-user-menu-login { padding: 0.625em; margin: 0; - font-size: @font-size-tabs; + + p, + span { + font-size: @font-size-tabs; + } } // "Login" and "Logout" links in user menu @@ -125,18 +129,18 @@ } .vector-user-menu-logged-in h3 { - min-width: 48px; + @offset-icon-down-arrow: 4px; + @bg-height: unit( 12px / @font-size-browser, em ); &:before { - left: -25%; - top: 0; - bottom: 0; - background-size: auto; color: #54595d; + margin-left: -@offset-icon-down-arrow; } &:after { background-position: 100% 0%; + top: @icon-padding-md + ( @bg-height / 2 ); + right: @offset-icon-down-arrow; } } } diff --git a/skinStyles/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon.less index 3e4a425..198b86f 100644 --- a/skinStyles/mediawiki.ui.icon.less +++ b/skinStyles/mediawiki.ui.icon.less @@ -10,3 +10,68 @@ width: unit( @size-icon / @font-size-base, em ); height: unit( @size-icon / @font-size-base, em ); } + +.skin-vector-consolidated-user-links .vector-search-box, +.skin-vector-consolidated-user-links .mw-portlet-lang, +.skin-vector-consolidated-user-links { + .mw-ui-icon { + font-size: initial; + + &:before { + display: block; + height: 100%; + min-width: 1.25em; + min-height: 1.25em; + background-repeat: no-repeat; + background-size: 1.25em 1.25em; + background-position: center; + position: static; + margin: 0; + } + } + + .mw-ui-icon-element { + padding: 0.75em; + width: 1.25em; + height: 1.25em; + min-width: 1.25em; + min-height: 1.25em; + // stylelint-disable-next-line declaration-no-important + box-sizing: content-box !important; + line-height: 0; + + &:before { + width: 100%; + } + } + + .mw-ui-icon-before { + &:before { + display: inline-block; + font-size: initial; + width: auto; + min-width: 1.25em; + min-height: 1.25em; + margin-right: 8px; + vertical-align: middle; + } + } +} + +body:not( .skin-vector-consolidated-user-links ) { + #mw-sidebar-button { + // Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element. + min-width: @size-sidebar-button; + min-height: @size-sidebar-button; + width: @size-sidebar-button; + height: @size-sidebar-button; + + &:before { + min-width: 20px; + min-height: 20px; + height: 100%; + // Center it horizontally. + margin: 0 unit( 12px / @font-size-browser, em ); // 0.75em @ 16; + } + } +}