MediaWiki:Common.css: Difference between revisions
 Cdjensen94 (talk | contribs) |
Cdjensen94 (talk | contribs) |
||
| Line 138: | Line 138: | ||
white-space: pre-wrap; | white-space: pre-wrap; | ||
word-break: break-word; | word-break: break-word; | ||
} | |||
/* ===== Fieldset containment: no overflow, no scroll, everything fits ===== */ | |||
.continuum-body fieldset { | |||
position: relative; /* keeps abs-pos kids referenced here */ | |||
min-width: 0; /* flex/grid shrinking allowed */ | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
overflow: visible; /* no scrollbars, no clipping */ | |||
padding-top: .75em; /* legend breathing room */ | |||
} | |||
.continuum-body fieldset > legend { | |||
display: block; | |||
max-width: 100%; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
margin: 0 0 .25em 0; | |||
} | |||
/* Universal “be nice” rules for descendants */ | |||
.continuum-body fieldset * { | |||
box-sizing: border-box; /* widths include padding */ | |||
min-width: 0; /* critical for flex descendants */ | |||
} | |||
/* Text and links: wrap instead of stretching */ | |||
.continuum-body fieldset, | |||
.continuum-body fieldset .mw-parser-output, | |||
.continuum-body fieldset a, | |||
.continuum-body fieldset code, | |||
.continuum-body fieldset .nowrap, | |||
.continuum-body fieldset .mw-usertoollinks, | |||
.continuum-body fieldset .mw-sha1, | |||
.continuum-body fieldset .mime-type { | |||
white-space: normal !important; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Pre/code blocks that otherwise run off the edge */ | |||
.continuum-body fieldset pre, | |||
.continuum-body fieldset .mw-code { | |||
white-space: pre-wrap; /* preserve formatting, allow wrap */ | |||
overflow-wrap: anywhere; | |||
} | |||
/* Tables: fill container and wrap cells */ | |||
.continuum-body fieldset table { | |||
width: 100%; | |||
max-width: 100%; | |||
table-layout: fixed; /* predictable widths + wrapping */ | |||
border-collapse: collapse; | |||
} | |||
.continuum-body fieldset table th, | |||
.continuum-body fieldset table td { | |||
min-width: 0; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Media shrink to fit */ | |||
.continuum-body fieldset img, | |||
.continuum-body fieldset svg, | |||
.continuum-body fieldset video, | |||
.continuum-body fieldset canvas, | |||
.continuum-body fieldset audio { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
} | |||
/* Iframes & embeds: make them fluid (set aspect-ratio if you know it) */ | |||
.continuum-body fieldset iframe, | |||
.continuum-body fieldset embed, | |||
.continuum-body fieldset object { | |||
display: block; | |||
width: 100% !important; | |||
max-width: 100%; | |||
height: auto; | |||
aspect-ratio: 16 / 9; /* adjust per your content, prevents goofy heights */ | |||
} | |||
/* Forms & OOUI controls: never overflow narrow containers */ | |||
.continuum-body fieldset input, | |||
.continuum-body fieldset select, | |||
.continuum-body fieldset textarea, | |||
.continuum-body fieldset button, | |||
.continuum-body fieldset .oo-ui-widget { | |||
max-width: 100%; | |||
} | |||
/* Special:ListFiles niceties (if the table is inside this fieldset) */ | |||
body.page-Special_ListFiles .mw-datatable.listfiles { table-layout: fixed; } | |||
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb, | |||
body.page-Special_ListFiles .mw-datatable.listfiles th.TablePager_col_thumb { width: 120px; } | |||
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img { | |||
max-width: 100%; height: auto; object-fit: contain; display: block; | |||
} | } | ||