MediaWiki:Print.css: Difference between revisions
Appearance
Adventurer (talk | contribs) mNo edit summary |
Adventurer (talk | contribs) m Output of the prior version looked great, except for it wasn't in two columns. This version adds a two column format. Tag: Reverted |
||
| Line 3: | Line 3: | ||
@media print { | @media print { | ||
/* --- General Print Cleanup --- */ | /* --- General Print Cleanup --- */ | ||
#mw-navigation, #mw-panel, #p-cactions, #p-personal, #p-views, | #mw-navigation, #mw-panel, #p-cactions, #p-personal, #p-views, | ||
#p-navigation, #p-search, #siteSub, #footer, #catlinks, | #p-navigation, #p-search, #siteSub, #footer, #catlinks, | ||
| Line 13: | Line 12: | ||
/* Adjust page margins for better print layout */ | /* Adjust page margins for better print layout */ | ||
body { | body { | ||
margin: 1.5cm; | margin: 1.5cm; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
font-size: 9pt !important; | font-size: 9pt !important; | ||
line-height: 1.3 !important; | line-height: 1.3 !important; | ||
} | } | ||
/* --- Header Sizing --- */ | /* --- Header Sizing --- */ | ||
h1#firstHeading, #content h1 { | h1#firstHeading, #content h1 { | ||
font-size: 18pt !important; | font-size: 18pt !important; | ||
margin-top: 1em !important; | margin-top: 1em !important; | ||
margin-bottom: 0.7em !important; | margin-bottom: 0.7em !important; | ||
line-height: 1.2em !important; | line-height: 1.2em !important; | ||
text-align: center; | text-align: center; | ||
/* Ensure main title spans all columns */ | |||
-webkit-column-span: all; | |||
column-span: all; | |||
} | } | ||
h2 { | h2 { | ||
font-size: 14pt !important; | font-size: 14pt !important; | ||
margin-top: 1.2em !important; | margin-top: 1.2em !important; | ||
margin-bottom: 0.6em !important; | margin-bottom: 0.6em !important; | ||
| Line 37: | Line 37: | ||
text-align: center; | text-align: center; | ||
page-break-after: avoid; | page-break-after: avoid; | ||
/* Ensure H2 headings span all columns */ | |||
-webkit-column-span: all; | |||
column-span: all; | |||
} | } | ||
h3 { | h3 { | ||
font-size: 12pt !important; | font-size: 12pt !important; | ||
margin-top: 1em !important; | margin-top: 1em !important; | ||
margin-bottom: 0.5em !important; | margin-bottom: 0.5em !important; | ||
| Line 48: | Line 50: | ||
} | } | ||
h4, h5, h6 { | h4, h5, h6 { | ||
font-size: 10pt !important; | font-size: 10pt !important; | ||
margin-top: 0.8em !important; | margin-top: 0.8em !important; | ||
margin-bottom: 0.4em !important; | margin-bottom: 0.4em !important; | ||
| Line 57: | Line 58: | ||
} | } | ||
.mw-parser-output div[style*="text-align: center;"] h2 { | .mw-parser-output div[style*="text-align: center;"] h2 { | ||
font-size: 16pt !important; | font-size: 16pt !important; | ||
} | } | ||
/* --- Body Text & List Item Styling --- */ | /* --- Body Text & List Item Styling --- */ | ||
p, ul, ol, dl, pre, blockquote, table, li, td, th { | p, ul, ol, dl, pre, blockquote, table, li, td, th { | ||
font-size: 9pt !important; | font-size: 9pt !important; | ||
line-height: 1.4 !important; | line-height: 1.4 !important; | ||
margin-top: 0.3em !important; | margin-top: 0.3em !important; | ||
margin-bottom: 0.3em !important; | margin-bottom: 0.3em !important; | ||
page-break-inside: avoid; | |||
} | } | ||
dd { | dd { | ||
margin-left: 1.5em !important; | margin-left: 1.5em !important; | ||
font-size: 9pt !important; | font-size: 9pt !important; | ||
} | } | ||
dt { | dt { | ||
font-weight: bold !important; | font-weight: bold !important; | ||
font-size: 9pt !important; | font-size: 9pt !important; | ||
} | } | ||
/* --- Image & Thumbnail Styling --- */ | /* --- Image & Thumbnail Styling --- */ | ||
img { | img { | ||
max-width: 95% !important; | max-width: 95% !important; | ||
height: auto !important; | height: auto !important; | ||
display: block; | display: block; | ||
margin: 0.8em auto !important; | margin: 0.8em auto !important; | ||
page-break-inside: avoid; | |||
} | } | ||
.thumb { | .thumb { | ||
float: none !important; | float: none !important; | ||
margin: 0.8em auto !important; | margin: 0.8em auto !important; | ||
max-width: 200px !important; | max-width: 200px !important; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
padding: 3px !important; | padding: 3px !important; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
page-break-inside: avoid; | page-break-inside: avoid; | ||
/* Ensure thumbnails don't break across columns */ | |||
-webkit-column-break-inside: avoid; | |||
break-inside: avoid; | |||
} | } | ||
.thumbinner { | .thumbinner { | ||
padding: 2px !important; | padding: 2px !important; | ||
border: none !important; | border: none !important; | ||
background-color: transparent !important; | background-color: transparent !important; | ||
| Line 111: | Line 114: | ||
display: block; | display: block; | ||
border: none !important; | border: none !important; | ||
page-break-inside: avoid; | |||
} | } | ||
.thumbcaption { | .thumbcaption { | ||
font-size: 8pt !important; | font-size: 8pt !important; | ||
line-height: 1.2em !important; | line-height: 1.2em !important; | ||
padding: 2px 0 !important; | padding: 2px 0 !important; | ||
| Line 121: | Line 125: | ||
} | } | ||
/* --- | /* --- NPC Section specific handling --- */ | ||
h3 + * { | |||
page-break-before: avoid; | |||
} | |||
/* If you have individual NPC divs (e.g., <div class="npc-profile">) use this: */ | |||
/* .npc-profile { | |||
page-break-inside: avoid; | |||
-webkit-column-break-inside: avoid; | |||
break-inside: avoid; | |||
page-break-after: avoid; | |||
} */ | |||
/* --- TWO-COLUMN LAYOUT FOR MAIN CONTENT --- */ | |||
/* Target the main content area (where your session prep template renders) */ | |||
#content .mw-parser-output { | |||
column-count: 2; /* Set to two columns */ | |||
column-gap: 2em; /* Space between columns (adjust as needed) */ | |||
column-rule: 1px solid #eee; /* Optional: A thin line between columns */ | |||
} | |||
/* Disable existing multi-column settings from template for print */ | |||
.module, .div-col { | .module, .div-col { | ||
column-count: 1 !important; /* | column-count: 1 !important; /* Override with single column, let #content handle overall two columns */ | ||
column-width: auto !important; | column-width: auto !important; | ||
column-rule: none !important; | column-rule: none !important; | ||
Revision as of 19:01, 19 June 2025
/* MediaWiki:Print.css */
@media print {
/* --- General Print Cleanup --- */
#mw-navigation, #mw-panel, #p-cactions, #p-personal, #p-views,
#p-navigation, #p-search, #siteSub, #footer, #catlinks,
.noprint, .editsection, .mw-indicators, .printfooter,
#privacy, #about, #disclaimer, #toc {
display: none !important;
}
/* Adjust page margins for better print layout */
body {
margin: 1.5cm;
font-family: sans-serif;
font-size: 9pt !important;
line-height: 1.3 !important;
}
/* --- Header Sizing --- */
h1#firstHeading, #content h1 {
font-size: 18pt !important;
margin-top: 1em !important;
margin-bottom: 0.7em !important;
line-height: 1.2em !important;
text-align: center;
/* Ensure main title spans all columns */
-webkit-column-span: all;
column-span: all;
}
h2 {
font-size: 14pt !important;
margin-top: 1.2em !important;
margin-bottom: 0.6em !important;
line-height: 1.2em !important;
text-align: center;
page-break-after: avoid;
/* Ensure H2 headings span all columns */
-webkit-column-span: all;
column-span: all;
}
h3 {
font-size: 12pt !important;
margin-top: 1em !important;
margin-bottom: 0.5em !important;
line-height: 1.2em !important;
page-break-after: avoid;
}
h4, h5, h6 {
font-size: 10pt !important;
margin-top: 0.8em !important;
margin-bottom: 0.4em !important;
line-height: 1.2em !important;
page-break-after: avoid;
}
.mw-parser-output div[style*="text-align: center;"] h2 {
font-size: 16pt !important;
}
/* --- Body Text & List Item Styling --- */
p, ul, ol, dl, pre, blockquote, table, li, td, th {
font-size: 9pt !important;
line-height: 1.4 !important;
margin-top: 0.3em !important;
margin-bottom: 0.3em !important;
page-break-inside: avoid;
}
dd {
margin-left: 1.5em !important;
font-size: 9pt !important;
}
dt {
font-weight: bold !important;
font-size: 9pt !important;
}
/* --- Image & Thumbnail Styling --- */
img {
max-width: 95% !important;
height: auto !important;
display: block;
margin: 0.8em auto !important;
page-break-inside: avoid;
}
.thumb {
float: none !important;
margin: 0.8em auto !important;
max-width: 200px !important;
border: 1px solid #ccc;
padding: 3px !important;
background-color: #f9f9f9;
box-sizing: border-box;
page-break-inside: avoid;
/* Ensure thumbnails don't break across columns */
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
.thumbinner {
padding: 2px !important;
border: none !important;
background-color: transparent !important;
}
.thumbimage {
max-width: 100% !important;
height: auto !important;
display: block;
border: none !important;
page-break-inside: avoid;
}
.thumbcaption {
font-size: 8pt !important;
line-height: 1.2em !important;
padding: 2px 0 !important;
text-align: left !important;
overflow: hidden !important;
}
/* --- NPC Section specific handling --- */
h3 + * {
page-break-before: avoid;
}
/* If you have individual NPC divs (e.g., <div class="npc-profile">) use this: */
/* .npc-profile {
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
page-break-after: avoid;
} */
/* --- TWO-COLUMN LAYOUT FOR MAIN CONTENT --- */
/* Target the main content area (where your session prep template renders) */
#content .mw-parser-output {
column-count: 2; /* Set to two columns */
column-gap: 2em; /* Space between columns (adjust as needed) */
column-rule: 1px solid #eee; /* Optional: A thin line between columns */
}
/* Disable existing multi-column settings from template for print */
.module, .div-col {
column-count: 1 !important; /* Override with single column, let #content handle overall two columns */
column-width: auto !important;
column-rule: none !important;
}
.div-col li, .div-col dd, .div-col p {
break-inside: avoid;
}
}