--- /dev/null
+@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;
+ }
+}
scripts.mit.edu / autoinstallsdev / mediawiki.git / blobdiff