diff --git a/resources/common/common.less b/resources/common/common.less index e3d0d058f..13661c4f0 100644 --- a/resources/common/common.less +++ b/resources/common/common.less @@ -15,7 +15,6 @@ @import './components/Indicators.less'; @import './components/SiteNotice.less'; @import './components/Menu.less'; - @import './components/MenuTabs.less'; @import './components/TabWatchstarLink.less'; @import './components/MenuDropdown.less'; @import './components/MenuPortal.less'; diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less index febc59ff0..73f68d48a 100644 --- a/resources/common/components/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -14,6 +14,7 @@ position: relative; display: block; box-sizing: border-box; + height: 100%; &:after { content: ''; @@ -113,22 +114,6 @@ padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em ); } -// Tab Separators -// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row. -// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border. -// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu. -// #mw-head rule is legacy Vector only. -.vector-menu-tabs, -.vector-menu-tabs a, -#mw-head .vector-menu-dropdown .vector-menu-heading { - // Support: IE 9, which doesn't understand `linear-gradient`. - background-image: url( images/tab-separator.png ); - background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% ); - background-repeat: no-repeat; - // Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner. - background-size: @border-width-base 100%; -} - // Invisible checkbox covering the dropdown menu handle .vector-menu-checkbox { cursor: pointer; diff --git a/resources/common/typography.less b/resources/common/typography.less index fcb9f3138..87bdb1b8f 100644 --- a/resources/common/typography.less +++ b/resources/common/typography.less @@ -37,6 +37,10 @@ pre, font-family: @font-family-sans; } +.mw-first-heading { + border-color: @border-color-pagetitle; +} + /* Main content area, including siteNotice, indicators, categories, firstHeading and `.vector-body`. */ .mw-body { // h1's can exist outside of `.mw-body-content` so some heading styles diff --git a/resources/common/variables.less b/resources/common/variables.less index c8c1af2b8..78e565939 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -61,12 +61,14 @@ // Due to darker background gradient, border needs to be darkened for aligned visual perception. @border-color-content--tabs-inactive: darken( @border-color-content, 10% ); @border-color-portal-heading: #c8ccd1; +@border-color-pagetitle: #eaecf0; // Use `rgba()` notation for better Safari support, see T254489. @border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 ); @border-start-blockquote: 4px @border-style-base #eaecf0; -@padding-top-content: 1.25em; +@padding-top-content: 0.5em; @padding-horizontal-content: 0.5em; @padding-blockquote: 8px 32px; +@border-tabs: 1px @border-style-base #eaecf0; // Navigation @background-color-secondary: #f6f6f6; diff --git a/resources/skins.vector.styles.legacy/components/MenuDropdown.less b/resources/skins.vector.styles.legacy/components/MenuDropdown.less index 8d77e5aba..08a44439b 100644 --- a/resources/skins.vector.styles.legacy/components/MenuDropdown.less +++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less @@ -24,3 +24,12 @@ } } } + +.vector-menu-dropdown .vector-menu-heading { + background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% ); + background-repeat: no-repeat; + // Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner. + background-size: @border-width-base 100%; + background-position: right bottom; + height: 100%; +} diff --git a/resources/common/components/MenuTabs.less b/resources/skins.vector.styles.legacy/components/MenuTabs.less similarity index 69% rename from resources/common/components/MenuTabs.less rename to resources/skins.vector.styles.legacy/components/MenuTabs.less index af4da3d40..0d61bd2da 100644 --- a/resources/common/components/MenuTabs.less +++ b/resources/skins.vector.styles.legacy/components/MenuTabs.less @@ -1,4 +1,4 @@ -@import '../variables.less'; +@import '../../common/variables.less'; @import 'mediawiki.mixins.less'; /** @@ -82,3 +82,19 @@ } } } + +// Tab Separators +// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row. +// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border. +// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu. +// #mw-head rule is legacy Vector only. +.vector-menu-tabs, +.vector-menu-tabs a, +#mw-head .vector-menu-dropdown .vector-menu-heading { + // Support: IE 9, which doesn't understand `linear-gradient`. + background-image: url( images/tab-separator.png ); + background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% ); + background-repeat: no-repeat; + // Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner. + background-size: @border-width-base 100%; +} diff --git a/resources/common/images/tab-normal-fade.png b/resources/skins.vector.styles.legacy/images/tab-normal-fade.png similarity index 100% rename from resources/common/images/tab-normal-fade.png rename to resources/skins.vector.styles.legacy/images/tab-normal-fade.png diff --git a/resources/common/images/tab-separator.png b/resources/skins.vector.styles.legacy/images/tab-separator.png similarity index 100% rename from resources/common/images/tab-separator.png rename to resources/skins.vector.styles.legacy/images/tab-separator.png diff --git a/resources/skins.vector.styles.legacy/skin-legacy.less b/resources/skins.vector.styles.legacy/skin-legacy.less index 133b0487f..6a5c5a3df 100644 --- a/resources/skins.vector.styles.legacy/skin-legacy.less +++ b/resources/skins.vector.styles.legacy/skin-legacy.less @@ -9,6 +9,7 @@ // Legacy specific components @import './components/MenuDropdown.less'; + @import './components/MenuTabs.less'; @import './components/SearchBox.less'; @import './components/Sidebar.less'; @import './components/UserLinks.less'; diff --git a/resources/skins.vector.styles/components/ArticleToolbar.less b/resources/skins.vector.styles/components/ArticleToolbar.less index 5cd0b7438..11060f0de 100644 --- a/resources/skins.vector.styles/components/ArticleToolbar.less +++ b/resources/skins.vector.styles/components/ArticleToolbar.less @@ -1,6 +1,8 @@ @import '../../common/variables.less'; .mw-article-toolbar-container { + border-bottom: @border-tabs; + .mw-portlet-views { display: none; @@ -27,12 +29,6 @@ } } -// T303549: When page title is above tabs, `.mw-article-toolbar-container` is -// moved inside `.mw-body` and requires margin between itself and the tagline. -.mw-body .mw-article-toolbar-container { - margin-bottom: 1.25em; -} - // FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class. .vector-article-toolbar .mw-article-toolbar-container { display: flex; @@ -42,25 +38,10 @@ padding-right: @padding-horizontal-tabs - 1px; } - .vector-menu-tabs { - // Account for background-image gradient. - margin-top: -1px; - } - - .vector-menu-dropdown .vector-menu-heading { - background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% ); - background-repeat: no-repeat; - // Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner. - background-size: @border-width-base 100%; - background-position: right bottom; - height: 100%; - } - #right-navigation { display: flex; flex-grow: 1; justify-content: end; - border-bottom: @border-width-base @border-style-base @border-color-content; // Layout correction - as it was before introduce of flex box. margin-right: -1px; @@ -71,21 +52,12 @@ #left-navigation { display: flex; - border-bottom: @border-width-base @border-style-base @border-color-content; // Layout correction - as it was before introduce of flex box. @media ( min-width: @width-breakpoint-desktop-wide ) { margin-left: @border-base-ems * 3; } } - - .vector-menu-tabs li { - margin-top: 1px; - - &.selected { - background: #fff; - } - } } // Currently when right navigation is empty and sidebar is open no diff --git a/resources/skins.vector.styles/components/MenuTabs.less b/resources/skins.vector.styles/components/MenuTabs.less new file mode 100644 index 000000000..78a3f770f --- /dev/null +++ b/resources/skins.vector.styles/components/MenuTabs.less @@ -0,0 +1,89 @@ +@import '../../common/variables.less'; +@import 'mediawiki.mixins.less'; + +/** + * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions) + */ + +/* 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; + + /* 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; + white-space: nowrap; + + &:first-child a { + margin-left: 0; + } + + &: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; + } + } + } + + .new { + a, + a:visited { + color: @color-link-new; + } + } + + .selected { + a { + border-bottom: 1px solid; + } + + a, + a:visited { + color: @color-link-selected; + } + } + + .icon { + a { + background-position: right bottom; + background-repeat: no-repeat; + } + } +} diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index ddd0d4286..d5c83b61c 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -90,9 +90,14 @@ body { .firstHeading { /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ overflow: visible; + margin-bottom: 0; } } +.mw-body-subheader { + margin-top: 1em; +} + .mw-header { // allow z-index to apply so search results overlay article position: relative; diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index f92d0e778..fce011c2f 100644 --- a/resources/skins.vector.styles/skin.less +++ b/resources/skins.vector.styles/skin.less @@ -18,6 +18,7 @@ @import './components/LanguageButton.less'; @import './components/UserLinks.less'; @import './components/Header.less'; + @import './components/MenuTabs.less'; @import './components/StickyHeader.less'; @import './components/TableOfContents.less'; } diff --git a/stories/MenuTabs.stories.js b/stories/MenuTabs.stories.js index 93183146d..0d4cca31e 100644 --- a/stories/MenuTabs.stories.js +++ b/stories/MenuTabs.stories.js @@ -1,7 +1,7 @@ import mustache from 'mustache'; import { menuTemplate as vectorTabsTemplate } from './Menu.stories.data'; import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data'; -import '../resources/skins.vector.styles/MenuTabs.less'; +import '../resources/skins.vector.styles/components/MenuTabs.less'; import '../resources/skins.vector.styles/TabWatchstarLink.less'; export default {