X-Git-Url: https://scripts.mit.edu/gitweb/autoinstallsdev/mediawiki.git/blobdiff_plain/19e297c21b10b1b8a3acad5e73fc71dcb35db44a..6932310fd58ebef145fa01eb76edf7150284d8ea:/skins/vector/print.less

diff --git a/skins/vector/print.less b/skins/vector/print.less
new file mode 100644
index 00000000..6dafb441
--- /dev/null
+++ b/skins/vector/print.less
@@ -0,0 +1,252 @@
+@import 'variables.less';
+@footerColor: #eee;
+
+// 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';
+			}
+		}
+	}
+}
+
+@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;
+
+			// 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: block;
+
+			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;
+			}
+		}
+	}
+
+	.printfooter {
+		margin-top: 10px;
+		border-top: 3px solid @pureBlack;
+		padding-top: 10px;
+		font-size: 10pt;
+	}
+
+	#footer {
+		margin-top: 12px;
+		border-top: 1px solid @footerColor;
+		padding-top: 5px;
+	}
+
+	#footer-info {
+		margin: 0;
+		padding: 0;
+
+		li {
+			color: #999;
+			list-style: none;
+			display: block;
+			padding-bottom: 10px;
+			font-size: 10pt;
+
+			a {
+				// override default black print style.
+				color: #999 !important; /* stylelint-disable-line declaration-no-important */
+			}
+		}
+	}
+
+	// Last updated as primary info.
+	#footer-info-lastmod {
+		color: @pureBlack;
+		font-size: 12pt;
+		font-weight: bold;
+	}
+}