diff --git a/SkinVector.php b/SkinVector.php index 23dd944..28acae6 100644 --- a/SkinVector.php +++ b/SkinVector.php @@ -44,9 +44,6 @@ class SkinVector extends SkinTemplate { /** @inheritDoc */ public function getPageClasses( $title ) { $className = parent::getPageClasses( $title ); - if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) { - $className .= ' vector-experimental-print-styles'; - } $className .= ' vector-nav-directionality'; return $className; } @@ -74,14 +71,6 @@ class SkinVector extends SkinTemplate { $this->enableResponsiveMode(); } - // Print styles are feature flagged. - // This flag can be removed when T169732 is resolved. - if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) { - // Note, when deploying (T169732) we'll want to fold the stylesheet into - // skins.vector.styles and remove this module altogether. - $out->addModuleStyles( 'skins.vector.styles.experimental.print' ); - } - $out->addModules( 'skins.vector.js' ); } diff --git a/print.less b/print.less index 95568d2..543598c 100644 --- a/print.less +++ b/print.less @@ -4,24 +4,22 @@ // We have to render the wordmark image before the print dialog is invoked, otherwise the image // won't render in the printed file. Use a little hack to render the image outside the viewport // and bring it in the viewport in print view. -.vector-experimental-print-styles { - .firstHeading { - // We could also use a CSS background to display the logo. - // The problem is that the logo won't be printed unless the user prints the background too. - // Note. This specification does not fully define the interaction of :before and :after with - // replaced elements (such as IMG in HTML). This will be defined in more detail in a future - // specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content - & when( @printLogo = 1 ) { - &:before { - content: @printLogoUrl; - display: block; - height: ~'@{printLogoHeight}px'; - left: -9999px; - line-height: 0; // line-height is needed for correctly displaying the size of the content box. - margin-bottom: 20px; - position: absolute; - width: ~'@{printLogoWidth}px'; - } +.firstHeading { + // We could also use a CSS background to display the logo. + // The problem is that the logo won't be printed unless the user prints the background too. + // Note. This specification does not fully define the interaction of :before and :after with + // replaced elements (such as IMG in HTML). This will be defined in more detail in a future + // specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content + & when( @printLogo = 1 ) { + &:before { + content: @printLogoUrl; + display: block; + height: ~'@{printLogoHeight}px'; + left: -9999px; + line-height: 0; // line-height is needed for correctly displaying the size of the content box. + margin-bottom: 20px; + position: absolute; + width: ~'@{printLogoWidth}px'; } } } @@ -32,7 +30,7 @@ In future (when deploying these styles) we may want to refactor skins.vector.styles to apply certain styles in print as well as screen mode. */ #toc, - body.vector-experimental-print-styles { + body { padding: 10px; font-family: @font-family-serif; } @@ -53,162 +51,159 @@ font-family: @font-family-sans-serif; } - .vector-experimental-print-styles { + // Normalize Blue links in the article + a { + border-bottom: 1px solid #aaa; + } + + .firstHeading { + font-size: 25pt; + line-height: 28pt; + margin-bottom: 20px; + padding-bottom: 5px; + + // Bring back the wordmark to the viewport (see above how it's rendered outside the viewport). + & when( @printLogo = 1 ) { + &:before { + left: auto; + position: relative; + } + } + } + + // Headings + .firstHeading, + h2 { + // To avoid the bottom border of section headings with floated elements + overflow: hidden; + border-bottom: 2px solid @pureBlack; + } + + h3, + h4, + h5, + h6 { + margin: 30px 0 0; + } + + h2, + h3, + h4, + h5, + h6 { + padding: 0; + position: relative; + } + + h2 { + font-size: 18pt; + line-height: 24pt; + margin-bottom: 0.25em; + } + + h3 { + font-size: 13pt; + line-height: 20pt; + } + + h4, + h5, + h6 { + font-size: 10pt; + line-height: 15pt; + } + + p { + font-size: 10pt; + line-height: 16pt; + margin-top: 5px; + text-align: justify; + + // T175008 + // When a paragraph is surrounded by floating elements from both + // sides, we want to make sure that there is at least some space + // before showing the text. Otherwise, small lengths of text may show + // between the surrounding elements, making the reading experience less + // enjoyable. If there is not enough space the following code will push + // the paragraph contents until after the floating element(s). + @paragraphMinWidth: 120pt; + &:before { + content: ''; + display: block; + overflow: hidden; + width: @paragraphMinWidth; + } + } + + blockquote { + border-left: 2px solid @pureBlack; + padding-left: 20px; + } + + ol, + ul { + margin: 10px 0 0 1.6em; + padding: 0; + + li { + padding: 2px 0; + font-size: 10pt; + } + } + + // Using #toc rather than .toc to override default print style + #toc { + page-break-before: avoid; + page-break-after: avoid; + background: none; + border: 0; + display: table; - // Normalize Blue links in the article a { - border-bottom: 1px solid #aaa; + border: 0; + font-weight: normal; } - .firstHeading { - font-size: 25pt; - line-height: 28pt; - margin-bottom: 20px; - padding-bottom: 5px; + > ul { - // Bring back the wordmark to the viewport (see above how it's rendered outside the viewport). - & when( @printLogo = 1 ) { - &:before { - left: auto; - position: relative; + > li { + margin-bottom: 4px; + font-weight: bold; + + > ul { + padding-left: 0; } } } - // Headings - .firstHeading, - h2 { - // To avoid the bottom border of section headings with floated elements - overflow: hidden; - border-bottom: 2px solid @pureBlack; - } + ul { + margin: 0; + list-style: none; - h3, - h4, - h5, - h6 { - margin: 30px 0 0; - } + ul { + padding-left: 30px; - h2, - h3, - h4, - h5, - h6 { - padding: 0; - position: relative; - } - - h2 { - font-size: 18pt; - line-height: 24pt; - margin-bottom: 0.25em; - } - - h3 { - font-size: 13pt; - line-height: 20pt; - } - - h4, - h5, - h6 { - font-size: 10pt; - line-height: 15pt; - } - - p { - font-size: 10pt; - line-height: 16pt; - margin-top: 5px; - text-align: justify; - - // T175008 - // When a paragraph is surrounded by floating elements from both - // sides, we want to make sure that there is at least some space - // before showing the text. Otherwise, small lengths of text may show - // between the surrounding elements, making the reading experience less - // enjoyable. If there is not enough space the following code will push - // the paragraph contents until after the floating element(s). - @paragraphMinWidth: 120pt; - &:before { - content: ''; - display: block; - overflow: hidden; - width: @paragraphMinWidth; + li { + padding-left: 30px; + } + .tocnumber { + min-width: 30px; + } } } - blockquote { - border-left: 2px solid @pureBlack; - padding-left: 20px; - } - - ol, - ul { - margin: 10px 0 0 1.6em; - padding: 0; - - li { - padding: 2px 0; + li.toclevel-1 { + > a { + font-weight: bold; font-size: 10pt; } } - // Using #toc rather than .toc to override default print style - #toc { - page-break-before: avoid; - page-break-after: avoid; - background: none; - border: 0; - display: table; - - a { - border: 0; - font-weight: normal; - } - - > ul { - - > li { - margin-bottom: 4px; - font-weight: bold; - - > ul { - padding-left: 0; - } - } - } - - ul { - margin: 0; - list-style: none; - - ul { - padding-left: 30px; - - li { - padding-left: 30px; - } - .tocnumber { - min-width: 30px; - } - } - } - - li.toclevel-1 { - > a { - font-weight: bold; - font-size: 10pt; - } - } - - .tocnumber { - padding-right: 0; - text-align: right; - margin-right: 30px; - display: inline-block; - } + .tocnumber { + padding-right: 0; + text-align: right; + margin-right: 30px; + display: inline-block; } } diff --git a/skin.json b/skin.json index f283c67..8dd18b5 100644 --- a/skin.json +++ b/skin.json @@ -38,6 +38,7 @@ "@note": "When modifying skins.vector.styles definition, make sure the installer still works", "ResourceModules": { "skins.vector.styles": { + "class": "Vector\\ResourceLoaderLessModule", "targets": [ "desktop", "mobile" ], "position": "top", "styles": { @@ -46,17 +47,11 @@ }, "screen-hd.less": { "media": "screen and (min-width: 982px)" - } + }, + "print.less": {} } }, - "skins.vector.styles.experimental.print": { - "class": "Vector\\ResourceLoaderLessModule", - "targets": [ "desktop", "mobile" ], - "position": "top", - "styles": [ - "print.less" - ] - }, + "skins.vector.styles.responsive": { "targets": [ "desktop", "mobile" ], "position": "top", @@ -110,8 +105,6 @@ "config": { "VectorUseSimpleSearch": true, "VectorUseIconWatch": true, - "@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)", - "VectorExperimentalPrintStyles": false, "VectorResponsive": false, "VectorPrintLogo": false },