MediaWiki:Common.css: Difference between revisions

From PAWS Lab
Jump to navigation Jump to search
Zrisha (talk | contribs)
No edit summary
Add image sizing constraints and layout polish (migration setup)
Line 1: Line 1:
/** CSS placed here will be applied to all skins */
/* ============================================================
.img-responsive{
* PAWS Lab Wiki — site-wide CSS (Common.css)
  max-width:100%;
* Applies to all skins. Edit via MediaWiki:Common.css page.
  height:auto;
* ============================================================ */
 
/* 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;
    }
}