MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Add image sizing constraints and layout polish (migration setup) |
||
| Line 1: | Line 1: | ||
/** CSS | /* ============================================================ | ||
.img- | * PAWS Lab Wiki — site-wide CSS (Common.css) | ||
* Applies to all skins. Edit via MediaWiki:Common.css page. | |||
* ============================================================ */ | |||
/* Constrain images so they don't overflow the content column. | |||
* The old Tweeki skin did this implicitly; Vector doesn't. */ | |||
.mw-parser-output img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Thumbnails and floating figures also honor container width */ | |||
.mw-parser-output .thumb, | |||
.mw-parser-output .thumbinner, | |||
.mw-parser-output figure { | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
} | |||
/* Prevent overwide tables from breaking layout */ | |||
.mw-parser-output table { | |||
max-width: 100%; | |||
} | |||
/* Wide code blocks scroll horizontally instead of pushing the page */ | |||
.mw-parser-output pre { | |||
max-width: 100%; | |||
overflow-x: auto; | |||
white-space: pre; | |||
} | |||
/* Small tweak: infobox-style floats behave reasonably on narrow viewports */ | |||
@media (max-width: 720px) { | |||
.mw-parser-output .thumb.tright, | |||
.mw-parser-output .thumb.tleft { | |||
float: none; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | } | ||
Revision as of 17:02, 22 July 2026
/* ============================================================
* PAWS Lab Wiki — site-wide CSS (Common.css)
* Applies to all skins. Edit via MediaWiki:Common.css page.
* ============================================================ */
/* Constrain images so they don't overflow the content column.
* The old Tweeki skin did this implicitly; Vector doesn't. */
.mw-parser-output img {
max-width: 100%;
height: auto;
}
/* Thumbnails and floating figures also honor container width */
.mw-parser-output .thumb,
.mw-parser-output .thumbinner,
.mw-parser-output figure {
max-width: 100%;
box-sizing: border-box;
}
/* Prevent overwide tables from breaking layout */
.mw-parser-output table {
max-width: 100%;
}
/* Wide code blocks scroll horizontally instead of pushing the page */
.mw-parser-output pre {
max-width: 100%;
overflow-x: auto;
white-space: pre;
}
/* Small tweak: infobox-style floats behave reasonably on narrow viewports */
@media (max-width: 720px) {
.mw-parser-output .thumb.tright,
.mw-parser-output .thumb.tleft {
float: none;
margin-left: auto;
margin-right: auto;
}
}