413870d350
Logo cannot be displayed as a background image because it won't be visible in print unless the user prints backgrounds too. A sample configuration looks like this: $wgVectorPrintLogo = [ 'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 174, 'height' => 27 ]; The solution presented in the patch has a downside of not being able to scale images down if their dimensions are bigger than the dimensions specified in the config variable. For example, if we want to go with an SVG image, then IE8 won't be able to render it. Alternatively, if we want to go with a PNG image, its dimensions need to match the exact dimensoins in the config variable, otherwise the image will show up larger or smaller depending on its dimensions. A more complicated approach of scaling images using `transform: scale` hasn't been used because we wanted to keep the configuration simple while supporting the majority of our users. With the current change, we can reuse the existing configuration options from Minerva, for exmaple. It would look something like this: $wgVectorPrintLogo = [ 'url' => $wgMFCustomLogos['copyright'], 'width' => $wgMFCustomLogos['copyright-width'], 'height' => $wgMFCustomLogos['copyright-height'] ]; Bug: T169826 Change-Id: If8f9f8d95fd3c955ece37d6c8ab6995596189667
180 lines
3.0 KiB
Plaintext
180 lines
3.0 KiB
Plaintext
@import 'variables.less';
|
|
|
|
@media print {
|
|
|
|
/* These styles retain the existing typography in screen.less
|
|
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 {
|
|
padding: 10px;
|
|
font-family: @font-family-serif;
|
|
}
|
|
|
|
.printfooter,
|
|
#footer,
|
|
// Tables, thumbs and lists are sans-serif in print mode (unlike screen mode) because these will render
|
|
// more legibly on print media in a smaller font sizes
|
|
.thumb,
|
|
table,
|
|
ol,
|
|
dl,
|
|
ul,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
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;
|
|
|
|
// 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';
|
|
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
|
|
margin-bottom: 10px;
|
|
width: ~'@{printLogoWidth}px';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headings
|
|
.firstHeading,
|
|
h2 {
|
|
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;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 2px solid @pureBlack;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin: 10px 0 0 1.6em;
|
|
padding: 0;
|
|
|
|
li {
|
|
padding: 5px 0;
|
|
font-size: 10pt;
|
|
}
|
|
}
|
|
|
|
// Using #toc rather than .toc to override default print style
|
|
#toc {
|
|
page-break-before: always;
|
|
page-break-after: always;
|
|
background: none;
|
|
border: 0;
|
|
display: block;
|
|
|
|
a {
|
|
border: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
> ul {
|
|
|
|
> li {
|
|
margin-bottom: 20px;
|
|
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: 16px;
|
|
}
|
|
}
|
|
|
|
.tocnumber {
|
|
padding-right: 0;
|
|
text-align: right;
|
|
margin-right: 30px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|