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; } }