diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less index 6ec9ddec..89974306 100644 --- a/resources/common/components/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -7,6 +7,7 @@ float: left; cursor: pointer; position: relative; + line-height: 1.125em; .vector-menu-heading { color: @color-base--subtle; @@ -43,7 +44,6 @@ .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,6 +84,10 @@ display: block; white-space: nowrap; cursor: pointer; + + span:not( .mw-ui-icon ) { + font-size: @font-size-tabs; + } } } @@ -121,6 +125,7 @@ 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 9d014054..f9392003 100644 --- a/resources/skins.vector.styles.legacy/components/MenuDropdown.less +++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less @@ -17,13 +17,7 @@ } .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 ); @@ -44,10 +38,6 @@ } } -.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 d45ecba1..295ce607 100644 --- a/resources/skins.vector.styles/components/ArticleToolbar.less +++ b/resources/skins.vector.styles/components/ArticleToolbar.less @@ -2,18 +2,43 @@ @border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em ); -.mw-article-toolbar-container { +.vector-article-toolbar .mw-article-toolbar-container { + display: flex; border-bottom: @border-tabs; - /* Targets #left-navigation and #right-navigation */ - & > div { - font-size: @font-size-tabs; + a { + // The hover effect is on `li` elements. + &:hover, + &:focus { + text-decoration: none; + } } @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 23783afc..78a3f770 100644 --- a/resources/skins.vector.styles/components/MenuTabs.less +++ b/resources/skins.vector.styles/components/MenuTabs.less @@ -5,61 +5,85 @@ * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions) */ -/* Tab list items */ +/* Namespaces and Views */ .vector-menu-tabs { + // Tab separator: Outer start border (left in LTR) of tab row. float: left; + height: 2.5em; padding-left: @border-width-base; - li { - display: inline-block; - vertical-align: middle; - white-space: nowrap; + /* Navigation Labels */ + .vector-menu-heading { + display: none; + } + + ul { + float: left; + height: 100%; + list-style: none none; margin: 0; + padding: 0; + } - // Make first and last elements flush with edge of header. - &:first-child { - margin-left: -8px; + li { + // Tab fade background: Fade inside from light grey to white. + float: left; + display: block; + height: 100%; + padding: 0; + line-height: @line-height-nav; + white-space: nowrap; + + &:first-child a { + margin-left: 0; } - &:last-child { - margin-right: -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; + } } } - /* focus and hover have outlines. Text underline interferes with bottom border */ - li a:focus, - li a:hover { - text-decoration: none; - border-bottom: 1px solid; + .new { + a, + a:visited { + color: @color-link-new; + } } - .new a, - .new a:visited { - color: @color-link-new; + .selected { + a { + border-bottom: 1px solid; + } + + a, + a:visited { + color: @color-link-selected; + } } - .selected a, - .selected a:visited { - color: @color-link-selected; - border-bottom: 1px solid; + .icon { + a { + background-position: right bottom; + background-repeat: no-repeat; + } } } - -/** - * 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; -}