|
|
| Line 1: |
Line 1: |
| /* CSS placed here will affect the print output */
| |
|
| |
|
| /* --- GENERAL PRINT SETTINGS & REMOVALS --- */
| |
| @media print {
| |
| /* Remove non-essential elements */
| |
| .firstHeading { margin-top: 0; padding-top: 0; }
| |
| #toc { display: none; }
| |
| #siteSub { display: none; }
| |
| .printfooter { display: none; }
| |
| #catlinks, .catlinks { display: none; }
| |
| #footer { display: none; }
| |
| #privacy, #about, #disclaimer {display:none;}
| |
| #p-cactions, #p-personal, #p-views, #p-navigation, #p-search,
| |
| .noprint, .editsection, .mw-indicators { /* Hide common navigation/interface elements */
| |
| display: none !important;
| |
| }
| |
|
| |
| /* Force background colors/images to print (use with caution, ink intensive!) */
| |
| /* If you absolutely want backgrounds, uncomment this, but it's not generally recommended for print. */
| |
| /*
| |
| body {
| |
| -webkit-print-color-adjust: exact; /* Chrome, Safari */
| |
| color-adjust: exact; /* Other browsers */
| |
| }
| |
| */
| |
|
| |
| /* --- FONT FIXES --- */
| |
| /* Set default font for the whole site */
| |
| body {
| |
| font-family: "Century Schoolbook", serif; /* Add a generic fallback */
| |
| font-size: 1.5em; /* Ensure this size is applied */
| |
| font-weight: normal;
| |
| /* Remove the problematic 'inherit !important' if it's causing issues */
| |
| /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
| |
| }
| |
|
| |
| h1 {
| |
| font-family: "CasablancaAntique", "Century Schoolbook", serif;
| |
| font-size: 3em;
| |
| /* Remove the problematic 'inherit !important' if it's causing issues */
| |
| /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
| |
| }
| |
|
| |
| h2 {
| |
| font-family: "CasablancaAntique", "Century Schoolbook", serif;
| |
| font-size: 2.5em;
| |
| font-variant: small-caps;
| |
| text-decoration: underline;
| |
| /* Remove the problematic 'inherit !important' if it's causing issues */
| |
| /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
| |
| }
| |
|
| |
| h3 {
| |
| font-family: "Century Schoolbook", serif;
| |
| font-size: 2em;
| |
| font-variant: small-caps;
| |
| /* Remove the problematic 'inherit !important' if it's causing issues */
| |
| /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
| |
| }
| |
|
| |
| h4 {
| |
| font-family: "Century Schoolbook", serif;
| |
| font-size: 2em;
| |
| font-variant: small-caps;
| |
| /* Remove the problematic 'inherit !important' if it's causing issues */
| |
| /* font-size: inherit !important; -- REMOVE THIS LINE IF IT'S IN YOUR ACTUAL CSS */
| |
| }
| |
|
| |
| /* --- IMAGE / THUMBNAIL PRINT STYLES --- */
| |
| /* Ensure thumbnails behave like thumbnails in print */
| |
| .thumb {
| |
| float: left; /* Allow text to wrap around the image */
| |
| margin: 0.5em 1em 0.5em 0; /* Adjust spacing around the thumbnail: top right bottom left */
| |
| border: 1px solid #ccc; /* Add a subtle border like online */
| |
| padding: 4px; /* Add some padding inside the border */
| |
| background-color: #f9f9f9; /* Light background */
| |
| box-sizing: border-box; /* Include padding and border in element's total width/height */
| |
| max-width: 200px; /* **ADJUST THIS**: Set a reasonable maximum width for the thumbnail container */
| |
| page-break-inside: avoid; /* Prevent thumbnails from breaking across pages */
| |
| }
| |
|
| |
| .thumbinner {
| |
| padding: 3px !important; /* Adjust inner padding if needed */
| |
| border: none !important; /* Remove inner border if default has one */
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .thumbimage {
| |
| max-width: 100%; /* Important: Constrain image to its container */
| |
| height: auto; /* Maintain aspect ratio */
| |
| display: block; /* Ensures it behaves nicely within the div */
| |
| border: 1px solid #ccc; /* Add border directly to image */
| |
| }
| |
|
| |
| .thumbcaption {
| |
| font-size: 0.9em; /* Smaller font for caption */
| |
| line-height: 1.3em;
| |
| padding: 3px 0; /* Padding for the caption */
| |
| text-align: left; /* Align caption text */
| |
| overflow: hidden; /* Prevent long captions from breaking layout */
| |
| }
| |
|
| |
| /* Styles for images that are not thumbnails but should be smaller */
| |
| /* This targets any img tag not inside a .thumb, useful for other embedded images */
| |
| img:not(.thumbimage) {
| |
| max-width: 80%; /* Limit width of other images */
| |
| height: auto;
| |
| display: block;
| |
| margin: 1em auto; /* Center them if they are block */
| |
| }
| |
|
| |
| /* --- TEMPLATE-SPECIFIC LAYOUT ADJUSTMENTS (FOR SESSION PREP) --- */
| |
| /* This assumes the Session Prep template renders content in a specific HTML structure.
| |
| You might need to inspect the live page HTML to get the exact classes/IDs. */
| |
|
| |
| /* Example: If Session Prep uses divs or tables for layout */
| |
| .session-prep-container { /* Replace with actual class/ID from template HTML */
| |
| page-break-after: always; /* If you want each session prep to start on a new page */
| |
| }
| |
|
| |
| /* If it uses definition lists (dl, dt, dd) for key-value pairs */
| |
| dl.session-prep-data { /* Adjust class name */
| |
| margin-bottom: 1em;
| |
| }
| |
| dl.session-prep-data dt {
| |
| font-weight: bold;
| |
| float: left; /* Try to make keys float left */
| |
| clear: left;
| |
| margin-right: 0.5em;
| |
| width: 120px; /* Adjust as needed for labels */
| |
| }
| |
| dl.session-prep-data dd {
| |
| margin-left: 130px; /* Align content with dt width */
| |
| margin-bottom: 0.5em;
| |
| }
| |
|
| |
| /* Ensure content inside columns doesn't break poorly */
| |
| .module, .div-col {
| |
| column-count: 1 !important; /* Force single column layout for print if multi-columns cause issues */
| |
| column-width: auto !important;
| |
| column-rule: none !important; /* Remove column rule if it's there */
| |
| }
| |
|
| |
| /* Avoid breaking within list items or paragraphs inside columns */
| |
| .div-col li, .div-col dd, .div-col p {
| |
| break-inside: avoid-column; /* Old property, less effective */
| |
| break-inside: avoid; /* Modern property */
| |
| }
| |
|
| |
| /* Headings within template content might need adjusted margins for print */
| |
| .session-prep-content h5, .session-prep-content h6 { /* Assuming template generates these */
| |
| margin-top: 1em;
| |
| margin-bottom: 0.5em;
| |
| page-break-after: avoid; /* Keep heading with content */
| |
| }
| |
|
| |
| /* Specific element for 'hooks' or 'key_events' */
| |
| .mw-headline { /* Often used for section headings */
| |
| page-break-after: avoid;
| |
| page-break-before: avoid;
| |
| }
| |
|
| |
| /* Ensure {{:Borin}} and other transcluded NPCs print cleanly */
| |
| /* This will depend on their individual page's HTML structure */
| |
| /* If they are just text, they'll print fine. If they have complex layouts,
| |
| you might need print CSS on their individual pages too, or target their
| |
| containers here. */
| |
| .mw-parser-output .thumb { /* More specific selector for thumbnails within content */
| |
| float: left;
| |
| margin: 0.5em 1em 0.5em 0;
| |
| max-width: 180px; /* Make NPC thumbnails slightly smaller perhaps */
| |
| }
| |
|
| |
| } /* End @media print */
| |
|
| |
| /* --- NON-PRINT SPECIFIC STYLES (Keep as they were) --- */
| |
| /* Your original font definitions are outside the @media print block.
| |
| This means they apply to both screen and print, unless overridden by @media print.
| |
| The 'inherit !important' lines here are very likely the culprit for font issues.
| |
| If you have them outside the @media print block, remove them. */
| |
|
| |
| /* I'm commenting out the problematic 'inherit !important' and ensuring the size is set.
| |
| If these lines exist outside your @media print block in the actual CSS,
| |
| you should remove the 'font-size: inherit !important;' line. */
| |
| /*
| |
| body {
| |
| /* Override any editor added inline styles that play with font-size */
| |
| /* font-size: inherit !important; */
| |
| font-family: "Century Schoolbook";
| |
| font-size: 1.5 em;
| |
| font-weight: normal;
| |
| }
| |
|
| |
| h1 {
| |
| /* Override any editor added inline styles that play with font-size */
| |
| /* font-size: inherit !important; */
| |
| font-family: "CasablancaAntique", "Century Schoolbook";
| |
| font-size: 3em;
| |
| }
| |
| */
| |
| /* ... similar for h2, h3, h4 ... */
| |
|
| |
| .module {
| |
| column-count: 2; /* This will be overridden by the @media print rule above for print */
| |
| }
| |
|
| |
| .div-col {
| |
| margin-top: 0.3em;
| |
| column-width: 40em; /* This will be overridden by the @media print rule above for print */
| |
| }
| |
|
| |
| .div-col-rules {
| |
| column-rule: 1px solid #aaa; /* This will be overridden by the @media print rule above for print */
| |
| }
| |
|
| |
| /* Reset top margin for lists in div col */
| |
| .div-col dl,
| |
| .div-col ol,
| |
| .div-col ul {
| |
| margin-top: 0;
| |
| }
| |
|
| |
| /* Avoid elements breaking between columns
| |
| See also Template:No col break */
| |
| .div-col li,
| |
| .div-col dd {
| |
| break-inside: avoid-column;
| |
| }
| |
