diff --git a/resources/skins.vector.styles/Indicators.less b/resources/skins.vector.styles/Indicators.less new file mode 100644 index 0000000..50a1c6d --- /dev/null +++ b/resources/skins.vector.styles/Indicators.less @@ -0,0 +1,14 @@ +@import '../../variables.less'; + +// FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside? +.mw-body { + .mw-indicators { + font-size: @font-size-base; + line-height: @line-height-base; + position: relative; + } + + .mw-indicator { + display: inline-block; + } +} diff --git a/resources/skins.vector.styles/Menu.less b/resources/skins.vector.styles/Menu.less index d35cc34..8c6e403 100644 --- a/resources/skins.vector.styles/Menu.less +++ b/resources/skins.vector.styles/Menu.less @@ -1,6 +1,11 @@ @import '../../variables.less'; @import 'mediawiki.mixins.less'; +/* Hide empty portlets */ +.emptyPortlet { + display: none; +} + /* Personal */ .vector-menu, /* FIXME: Remove p-personal selector when cache has cleared. */ diff --git a/resources/skins.vector.styles/SiteNotice.less b/resources/skins.vector.styles/SiteNotice.less new file mode 100644 index 0000000..fbac2e1 --- /dev/null +++ b/resources/skins.vector.styles/SiteNotice.less @@ -0,0 +1,6 @@ +@import '../../variables.less'; + +/* Site Notice (includes notices from CentralNotice extension) */ +#siteNotice { + font-size: @font-size-site-notice; +} diff --git a/resources/skins.vector.styles/watchstar-ie8.less b/resources/skins.vector.styles/TabWatchstarLink-ie8.less similarity index 100% rename from resources/skins.vector.styles/watchstar-ie8.less rename to resources/skins.vector.styles/TabWatchstarLink-ie8.less diff --git a/resources/skins.vector.styles/watchstar.less b/resources/skins.vector.styles/TabWatchstarLink.less similarity index 100% rename from resources/skins.vector.styles/watchstar.less rename to resources/skins.vector.styles/TabWatchstarLink.less diff --git a/resources/skins.vector.styles/common.less b/resources/skins.vector.styles/common.less deleted file mode 100644 index cff58ab..0000000 --- a/resources/skins.vector.styles/common.less +++ /dev/null @@ -1,174 +0,0 @@ -/* - * Any rules which should not be flipped automatically in right-to-left situations should be - * prepended with @noflip in a comment block. - * - */ -@import '../../variables.less'; -@import 'mediawiki.mixins.less'; - -/* Framework */ -html { - font-size: @font-size-root; -} - -html, -body { - height: 100%; - margin: 0; - padding: 0; - font-family: @font-family-sans; -} - -body { - background-color: @background-color-secondary; - overflow-y: scroll; -} - -/* Content */ -.mw-body, -.parsoid-body { - background-color: @background-color-base; - color: @color-base; - padding: @padding-content; - direction: ltr; -} - -.mw-body { - /* Border on top, left, and bottom side */ - border: @border-width-base @border-style-base @border-color-content; - border-right-width: 0; - /* Merge the border with tabs' one (in their background image) */ - margin-top: -@border-width-base; - - // h1's can exist outside of mw-body-content so some heading styles - // need to be defined in mw-body as well - & h1, - &-content h1, - &-content h2 { - margin-bottom: 0.25em; - padding: 0; - font-family: @font-family-serif; - line-height: @line-height-heading; - - // Fallback heading font for scripts which render poorly in `@font-family-serif`. - // See T73240 - &:lang( ja ), /* See T65817 */ - &:lang( he ), /* See T65843 and T65844 */ - &:lang( ko ) { /* See T65827 */ - font-family: @font-family-sans--fallback; - } - - /* Burmese (Myanmar) language headlines would be cropped with set `line-height` */ - /* See T193270 */ - &:lang( my ) { - line-height: normal; - } - } - - & h1, - &-content h1 { - font-size: @font-size-heading-1; - } - - .firstHeading { - /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ - overflow: visible; - } - - .mw-indicators { - font-size: @font-size-base; - line-height: @line-height-base; - position: relative; - } - - .mw-indicator { - display: inline-block; - } -} - -.mw-body-content { - font-size: @font-size-base; - // Support IE 9-11, Trident cuts values 2 digits after decimal point. - // `calc` enables to set correct calculation in place again. See T102364. - font-size: calc( 1em ~'*' unit( @font-size-base ) ); - line-height: @line-height-base; - - p { - margin: 0.5em 0; - } - - h1 { - margin-top: 1em; - } - - h2 { - margin-top: 1em; - font-size: @font-size-heading-2; - } - - h3, - h4, - h5, - h6 { - margin-top: 0.3em; - margin-bottom: 0; - padding-bottom: 0; - line-height: @line-height-base; - } - - h3 { - font-size: @font-size-heading-3; - } - - h3, - h4 { - font-weight: bold; - } - - h4, - h5, - h6 { - font-size: @font-size-reset; // Reset. - } - - .toc h2 { - font-family: @font-family-sans; - font-size: @font-size-reset; // Reset. - } -} - -/* Allow edit sections outside of mw-body-content (T160269) */ -.mw-editsection, -.mw-editsection-like { - font-family: @font-family-sans; -} - -/* Hide empty portlets */ -.emptyPortlet { - display: none; -} - -ul { - // No need for PNG fallback. Fallback is browser default (a smaller, also black, circle). - .list-style-image( 'images/bullet-icon.svg' ); -} - -pre, -.mw-code { - line-height: @line-height-code; -} - -/* Site Notice (includes notices from CentralNotice extension) */ -#siteNotice { - font-size: @font-size-site-notice; -} - -.mw-jump-link:not( :focus ) { - .mixin-screen-reader-text; -} - -/* Head */ -#mw-page-base { - background-position: bottom left; - .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); -} diff --git a/resources/skins.vector.styles/common/content.less b/resources/skins.vector.styles/common/content.less new file mode 100644 index 0000000..a96c4c8 --- /dev/null +++ b/resources/skins.vector.styles/common/content.less @@ -0,0 +1,80 @@ +/* + * Any rules which should not be flipped automatically in right-to-left situations should be + * prepended with @noflip in a comment block. + * + */ + +.mw-body-content { + p { + margin: 0.5em 0; + } + + h1 { + margin-top: 1em; + } + + h2 { + margin-top: 1em; + font-size: @font-size-heading-2; + } + + h3, + h4, + h5, + h6 { + margin-top: 0.3em; + margin-bottom: 0; + padding-bottom: 0; + line-height: @line-height-base; + } + + h3 { + font-size: @font-size-heading-3; + } + + h3, + h4 { + font-weight: bold; + } + + h4, + h5, + h6 { + font-size: @font-size-reset; // Reset. + } + + .toc h2 { + font-family: @font-family-sans; + font-size: @font-size-reset; // Reset. + } +} + +/* Allow edit sections outside of mw-body-content (T160269) */ +.mw-editsection, +.mw-editsection-like { + font-family: @font-family-sans; +} + +ul { + // No need for PNG fallback. Fallback is browser default (a smaller, also black, circle). + .list-style-image( 'images/bullet-icon.svg' ); +} + +pre, +.mw-code { + line-height: @line-height-code; +} + +.mw-jump-link:not( :focus ) { + .mixin-screen-reader-text; +} + +// External links +.mw-parser-output { + .external { + background-position: center right; + background-repeat: no-repeat; + .background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' ); + padding-right: 13px; + } +} diff --git a/resources/skins.vector.styles/print.less b/resources/skins.vector.styles/common/print.less similarity index 100% rename from resources/skins.vector.styles/print.less rename to resources/skins.vector.styles/common/print.less diff --git a/resources/skins.vector.styles/common/typography.less b/resources/skins.vector.styles/common/typography.less new file mode 100644 index 0000000..8ecc33c --- /dev/null +++ b/resources/skins.vector.styles/common/typography.less @@ -0,0 +1,50 @@ +@import '../../../variables.less'; + +html { + font-size: @font-size-root; +} + +html, +body { + font-family: @font-family-sans; +} + +.mw-body-content { + font-size: @font-size-base; + // Support IE 9-11, Trident cuts values 2 digits after decimal point. + // `calc` enables to set correct calculation in place again. See T102364. + font-size: calc( 1em ~'*' unit( @font-size-base ) ); + line-height: @line-height-base; +} + +.mw-body { + // h1's can exist outside of mw-body-content so some heading styles + // need to be defined in mw-body as well + & h1, + &-content h1, + &-content h2 { + margin-bottom: 0.25em; + padding: 0; + font-family: @font-family-serif; + line-height: @line-height-heading; + + // Fallback heading font for scripts which render poorly in `@font-family-serif`. + // See T73240 + &:lang( ja ), /* See T65817 */ + &:lang( he ), /* See T65843 and T65844 */ + &:lang( ko ) { /* See T65827 */ + font-family: @font-family-sans--fallback; + } + + /* Burmese (Myanmar) language headlines would be cropped with set `line-height` */ + /* See T193270 */ + &:lang( my ) { + line-height: normal; + } + } + + & h1, + &-content h1 { + font-size: @font-size-heading-1; + } +} diff --git a/resources/skins.vector.styles/externalLinks.less b/resources/skins.vector.styles/externalLinks.less deleted file mode 100644 index d8095e2..0000000 --- a/resources/skins.vector.styles/externalLinks.less +++ /dev/null @@ -1,10 +0,0 @@ -@import 'mediawiki.mixins.less'; -// External links -.mw-parser-output { - .external { - background-position: center right; - background-repeat: no-repeat; - .background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' ); - padding-right: 13px; - } -} diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less index 852a4cd..78f78d5 100644 --- a/resources/skins.vector.styles/index.less +++ b/resources/skins.vector.styles/index.less @@ -1,23 +1,34 @@ +// Modern Vector stylesheets + @import '../../variables.less'; @import 'mediawiki.mixins.less'; -/* Vector screen styles */ @media screen { - @import 'common.less'; @import 'layout.less'; + // FIXME: Will be removed with new header. + @import 'legacy/background-gradient.less'; + @import 'common/content.less'; + @import 'common/typography.less'; + + // Components @import 'Logo.less'; + @import 'Indicators.less'; + @import 'SiteNotice.less'; @import 'Menu.less'; @import 'SearchBox.less'; @import 'MenuTabs.less'; - @import 'watchstar.less'; + @import 'TabWatchstarLink.less'; @import 'MenuDropdown.less'; @import 'Portal.less'; @import 'Sidebar.less'; @import 'SidebarLogo.less'; @import 'Footer.less'; @import 'EmphasizedSidebarAction.less'; - @import 'externalLinks.less'; } -@import 'watchstar-ie8.less'; -@import 'print.less'; +// Support: IE8 +// Media query hack required. +@import 'TabWatchstarLink-ie8.less'; + +// Media: Print +@import 'common/print.less'; diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less index b4193f8..4263989 100644 --- a/resources/skins.vector.styles/layout.less +++ b/resources/skins.vector.styles/layout.less @@ -22,6 +22,36 @@ 2 * @padding-vertical-header; @width-grid-column-one: 11em; +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + overflow-y: scroll; +} + +.mw-body, +.parsoid-body { + // General background/foreground color definition as one exception to the rule. + background-color: @background-color-base; + color: @color-base; + direction: ltr; + padding: @padding-content; +} + +.mw-body { + /* Merge the border with tabs' one (in their background image) */ + margin-top: -@border-width-base; + + .firstHeading { + /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ + overflow: visible; + } +} + /* Space for header above content */ .mw-header-placeholder { // Reserve space for the absolute positioned header and tabs. diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less index 5acf767..5eade86 100644 --- a/resources/skins.vector.styles/legacy.less +++ b/resources/skins.vector.styles/legacy.less @@ -1,20 +1,31 @@ -@import '../../variables.less'; +// Legacy Vector stylesheets + +@import '../../variables.less'; +@import 'mediawiki.mixins.less'; -/* Vector screen styles */ @media screen { - @import 'common.less'; @import 'legacy/layout.less'; + @import 'legacy/background-gradient.less'; + @import 'common/content.less'; + @import 'common/typography.less'; + + // Components + @import 'Indicators.less'; + @import 'SiteNotice.less'; @import 'Menu.less'; @import 'SearchBox.less'; @import 'MenuTabs.less'; - @import 'watchstar.less'; + @import 'TabWatchstarLink.less'; @import 'MenuDropdown.less'; @import 'Portal.less'; @import 'Sidebar.less'; @import 'SidebarLogo.less'; @import 'Footer.less'; - @import 'externalLinks.less'; } -@import 'watchstar-ie8.less'; -@import 'print.less'; +// Support: IE8 +// Media query hack required. +@import 'TabWatchstarLink-ie8.less'; + +// Media: Print +@import 'common/print.less'; diff --git a/resources/skins.vector.styles/legacy/background-gradient.less b/resources/skins.vector.styles/legacy/background-gradient.less new file mode 100644 index 0000000..bdbcb7a --- /dev/null +++ b/resources/skins.vector.styles/legacy/background-gradient.less @@ -0,0 +1,20 @@ +// 'background-gradient.less' will be removed and its rules moved to +// legacy/layout.less as soon as new header is in place. + +@import '../../../variables.less'; + +body { + background-color: @background-color-secondary; +} + +/* Head */ +#mw-page-base { + background-position: bottom left; + .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); +} + +.mw-body { + /* Border on top, left, and bottom side */ + border: @border-width-base @border-style-base @border-color-content; + border-right-width: 0; +} diff --git a/resources/skins.vector.styles/legacy/layout.less b/resources/skins.vector.styles/legacy/layout.less index bd421a3..f1a2077 100644 --- a/resources/skins.vector.styles/legacy/layout.less +++ b/resources/skins.vector.styles/legacy/layout.less @@ -2,12 +2,43 @@ // The rules here should only define the layout, not color or typography. @import 'mediawiki.mixins.less'; +@import '../../../variables.less'; + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + overflow-y: scroll; +} + +.mw-body, +.parsoid-body { + // General background/foreground color definition as one exception to the rule. + background-color: @background-color-base; + color: @color-base; + direction: ltr; + padding: @padding-content; +} .mw-body, #mw-data-after-content { margin-left: 10em; } +.mw-body { + /* Merge the border with tabs' one (in their background image) */ + margin-top: -@border-width-base; + + .firstHeading { + /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ + overflow: visible; + } +} + .mw-indicators { float: right; z-index: @z-index-indicators; diff --git a/stories/MenuTabs.stories.js b/stories/MenuTabs.stories.js index 8b2888f..e459cde 100644 --- a/stories/MenuTabs.stories.js +++ b/stories/MenuTabs.stories.js @@ -2,7 +2,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/watchstar.less'; +import '../resources/skins.vector.styles/TabWatchstarLink.less'; import '../.storybook/common.less'; export default {