diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less index 899743066..6ec9ddec3 100644 --- a/resources/common/components/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -7,7 +7,6 @@ float: left; cursor: pointer; position: relative; - line-height: 1.125em; .vector-menu-heading { color: @color-base--subtle; @@ -44,6 +43,7 @@ .vector-menu-content { background-color: @background-color-base; list-style: none none; + line-height: 1.125em; // Match the width of the dropdown "heading" (the tab) min-width: 100%; position: absolute; @@ -84,10 +84,6 @@ display: block; white-space: nowrap; cursor: pointer; - - span:not( .mw-ui-icon ) { - font-size: @font-size-tabs; - } } } @@ -125,7 +121,6 @@ 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; } diff --git a/resources/skins.vector.styles.legacy/components/MenuDropdown.less b/resources/skins.vector.styles.legacy/components/MenuDropdown.less index f93920030..9d0140542 100644 --- a/resources/skins.vector.styles.legacy/components/MenuDropdown.less +++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less @@ -17,7 +17,13 @@ } .vector-menu-dropdown { + line-height: 1.125em; + li { + span:not( .mw-ui-icon ) { + font-size: @font-size-tabs; + } + a { // Historic value. padding: unit( ( 8.125px / @font-size-browser ), em ); @@ -38,6 +44,10 @@ } } +.vector-menu-dropdown-noicon .vector-menu-heading { + font-size: @font-size-tabs; +} + #mw-head .vector-menu-dropdown .vector-menu-heading { // Tab separator: Outer end (right in LTR) border of "Actions" menu. background-position: right bottom; diff --git a/resources/skins.vector.styles/components/ArticleToolbar.less b/resources/skins.vector.styles/components/ArticleToolbar.less index 295ce607c..d45ecba18 100644 --- a/resources/skins.vector.styles/components/ArticleToolbar.less +++ b/resources/skins.vector.styles/components/ArticleToolbar.less @@ -2,43 +2,18 @@ @border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em ); -.vector-article-toolbar .mw-article-toolbar-container { - display: flex; +.mw-article-toolbar-container { border-bottom: @border-tabs; - a { - // The hover effect is on `li` elements. - &:hover, - &:focus { - text-decoration: none; - } + /* Targets #left-navigation and #right-navigation */ + & > div { + font-size: @font-size-tabs; } @media ( min-width: @min-width-desktop-wide ) { padding-right: @padding-horizontal-tabs - 1px; } - #right-navigation { - display: flex; - flex-grow: 1; - justify-content: end; - // Layout correction - as it was before introduce of flex box. - margin-right: -1px; - - @media ( min-width: @min-width-desktop-wide ) { - margin-right: -@border-base-ems * 3; - } - } - - #left-navigation { - display: flex; - - // Layout correction - as it was before introduce of flex box. - @media ( min-width: @min-width-desktop-wide ) { - margin-left: @border-base-ems * 3; - } - } - .mw-portlet-views { display: none; diff --git a/resources/skins.vector.styles/components/MenuTabs.less b/resources/skins.vector.styles/components/MenuTabs.less index 78a3f770f..23783afc2 100644 --- a/resources/skins.vector.styles/components/MenuTabs.less +++ b/resources/skins.vector.styles/components/MenuTabs.less @@ -5,85 +5,61 @@ * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions) */ -/* Namespaces and Views */ +/* Tab list items */ .vector-menu-tabs { - // Tab separator: Outer start border (left in LTR) of tab row. float: left; - height: 2.5em; padding-left: @border-width-base; - /* Navigation Labels */ - .vector-menu-heading { - display: none; - } - - ul { - float: left; - height: 100%; - list-style: none none; - margin: 0; - padding: 0; - } - li { - // Tab fade background: Fade inside from light grey to white. - float: left; - display: block; - height: 100%; - padding: 0; - line-height: @line-height-nav; + display: inline-block; + vertical-align: middle; white-space: nowrap; + margin: 0; - &:first-child a { - margin-left: 0; + // Make first and last elements flush with edge of header. + &:first-child { + margin-left: -8px; } - &:last-child a { - margin-right: 0; - } - - a { - // Tab separator: Border between tabs and outer right border. - color: @color-link; - box-sizing: border-box; - display: block; - float: left; - height: unit( 40 / @font-size-tabs / @font-size-browser, em ); - position: relative; - padding-top: 1.25em; - margin: 0 @padding-horizontal-tabs; - font-size: @font-size-tabs; - cursor: pointer; - - &:hover { - text-decoration: none; - border-bottom: 1px solid; - } + &:last-child { + margin-right: -8px; } } - .new { - a, - a:visited { - color: @color-link-new; - } + /* focus and hover have outlines. Text underline interferes with bottom border */ + li a:focus, + li a:hover { + text-decoration: none; + border-bottom: 1px solid; } - .selected { - a { - border-bottom: 1px solid; - } - - a, - a:visited { - color: @color-link-selected; - } + .new a, + .new a:visited { + color: @color-link-new; } - .icon { - a { - background-position: right bottom; - background-repeat: no-repeat; - } + .selected a, + .selected a:visited { + color: @color-link-selected; + border-bottom: 1px solid; } } + +/** + * Tab link appearance, applies to + * - inside vector-menu-tabs (e.g. read, edit, view, history) + * - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets) +*/ +.vector-menu-tabs li a, +.vector-article-toolbar .vector-menu-heading { + display: block; + position: relative; + // Top bottom padding to increase clickable area. + padding-top: 18px; + padding-bottom: 7px; + // left & right margin separate bottom border between words, + // bottom margin makes link border overlap toolbar border. + margin: 0 8px -1px 8px; + cursor: pointer; + border-bottom: 1px solid transparent; +}