MediaWiki:Common.css: Difference between revisions
Appearance
![]() Cdjensen94 (talk | contribs) |
![]() Cdjensen94 (talk | contribs) |
||
(130 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.welcome { | |||
. | text-align: center; | ||
font-size: 4em; | |||
} | |||
.lore-spotlight-widget { | |||
background: #001933; | |||
border: 1px solid #FF6300; | |||
- | padding: 0.75em; | ||
- | margin: 1em 0; | ||
font-style: italic; | |||
border-radius: 4px; | |||
} | |||
.mw-datatable th { | |||
background-color: var(--color-accent-navy); | |||
} | |||
/* Let user tool links wrap instead of forcing one line */ | |||
.mw-usertoollinks { | |||
white-space: normal !important; /* undo the nowrap */ | |||
overflow-wrap: anywhere; /* modern browsers */ | |||
word-break: break-word; /* fallback */ | |||
display: inline-block; /* makes wrapping cleaner inside cells */ | |||
} | |||
/* 7) Special:ListFiles specifics you already touched, but keep them here for consistency */ | |||
body.page-Special_ListFiles .mw-datatable.listfiles { table-layout: fixed; } | |||
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img { max-width: 100%; height: auto; } | |||
body.page-Special_ListFiles .mw-usertoollinks { white-space: normal !important; overflow-wrap: anywhere; } | |||
/* FIELDSET: allow shrinking, no scrollbars */ | |||
.continuum-body fieldset { | |||
min-width: 0; /* crucial in flex layouts */ | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
overflow-x: visible; /* you said no scrolling */ | |||
} | |||
/* LEGEND shouldn’t inflate width */ | |||
.continuum-body fieldset > legend { | |||
display: block; | |||
max-width: 100%; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* TABLE should fit container and wrap content */ | |||
.continuum-body fieldset table { | |||
width: 100%; | |||
max-width: 100%; | |||
table-layout: fixed; /* enables predictable wrapping */ | |||
border-collapse: collapse; | |||
box-sizing: border-box; | |||
} | |||
/* CELLS: wrap, don’t grow the table */ | |||
.continuum-body fieldset table th, | |||
.continuum-body fieldset table td { | |||
min-width: 0; /* lets fixed layout actually shrink */ | |||
white-space: normal; /* kill any nowraps */ | |||
overflow-wrap: anywhere; /* modern long-word wrap */ | |||
word-break: break-word; /* fallback for older browsers */ | |||
} | |||
/* Usual offenders inside cells: links, codey bits, “nowrap” classes, user tools */ | |||
.continuum-body fieldset table a, | |||
.continuum-body fieldset table code, | |||
.continuum-body fieldset table .nowrap, | |||
.continuum-body fieldset table .mw-usertoollinks, | |||
.continuum-body fieldset table .mw-sha1, | |||
.continuum-body fieldset table .mime-type { | |||
white-space: normal !important; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Images/Thumbs must shrink with the cell */ | |||
.continuum-body fieldset table img { | |||
max-width: 100%; | |||
height: auto; | |||
object-fit: contain; | |||
display: block; | |||
} | |||
/* ===== Special:Upload (and its stash step) ===== */ | |||
body.page-Special_Upload .continuum-body, | |||
body.page-Special_UploadStash .continuum-body { | |||
min-width: 0; | |||
max-width: 100%; | |||
} | |||
/* Fieldsets & forms on Upload */ | |||
body.page-Special_Upload .continuum-body fieldset, | |||
body.page-Special_UploadStash .continuum-body fieldset { | |||
min-width: 0; | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
overflow: visible; /* no scrollbars, make it fit */ | |||
} | |||
body.page-Special_Upload .continuum-body fieldset > legend, | |||
body.page-Special_UploadStash .continuum-body fieldset > legend { | |||
display: block; | |||
max-width: 100%; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
margin: 0 0 .25em 0; | |||
} | |||
/* Tables/forms inside Upload */ | |||
body.page-Special_Upload .continuum-body table, | |||
body.page-Special_UploadStash .continuum-body table { | |||
width: 100%; | |||
max-width: 100%; | |||
table-layout: fixed; | |||
border-collapse: collapse; | |||
box-sizing: border-box; | |||
} | |||
body.page-Special_Upload .continuum-body th, | |||
body.page-Special_Upload .continuum-body td, | |||
body.page-Special_UploadStash .continuum-body th, | |||
body.page-Special_UploadStash .continuum-body td { | |||
min-width: 0; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
body.page-Special_Upload .continuum-body img, | |||
body.page-Special_UploadStash .continuum-body img { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
} | |||
/* ===== Special:ListFiles ===== */ | |||
body.page-Special_ListFiles .continuum-body { min-width: 0; max-width: 100%; } | |||
body.page-Special_ListFiles .mw-datatable.listfiles { | |||
width: 100%; | |||
max-width: 100%; | |||
table-layout: fixed; | |||
border-collapse: collapse; | |||
} | |||
body.page-Special_ListFiles .mw-datatable.listfiles th, | |||
body.page-Special_ListFiles .mw-datatable.listfiles td { | |||
min-width: 0; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Thumbnails column stays narrow; images shrink to fit */ | |||
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; | |||
} | |||
/* Usual overflow goblins on ListFiles only */ | |||
body.page-Special_ListFiles .mw-usertoollinks, | |||
body.page-Special_ListFiles .mw-datatable.listfiles .mw-sha1, | |||
body.page-Special_ListFiles .mw-datatable.listfiles .mime-type, | |||
body.page-Special_ListFiles .mw-datatable.listfiles .nowrap, | |||
body.page-Special_ListFiles .mw-datatable.listfiles a, | |||
body.page-Special_ListFiles .mw-datatable.listfiles code { | |||
white-space: normal !important; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Preformatted chunks (sometimes appear in tables) should wrap too */ | |||
.continuum-body fieldset table pre, | |||
.continuum-body fieldset table .mw-code { | |||
white-space: pre-wrap; | |||
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 { | |||
max-width: 100%; | |||
} | } | ||
/* VE overlays live outside your content column: don't force wrapping there */ | |||
/* | html.ve-activated .ve-ui-overlay-global *, | ||
. | html.ve-activated .oo-ui-defaultOverlay * { | ||
/* Restore normal text behavior inside VE/OOUI */ | |||
white-space: normal !important; | |||
word-break: normal !important; | |||
overflow-wrap: normal !important; | |||
min-width: 0; /* allow flex children to shrink */ | |||
box-sizing: border-box; | |||
} | } | ||
/* | /* Buttons should never wrap letter-by-letter */ | ||
. | html.ve-activated .ve-ui-overlay-global .oo-ui-buttonElement .oo-ui-labelElement-label, | ||
html.ve-activated .oo-ui-defaultOverlay .oo-ui-buttonElement .oo-ui-labelElement-label { | |||
white-space: nowrap !important; | |||
} | } | ||
/* | /* VE template search results menu: give it breathable height */ | ||
. | html.ve-activated .ve-ui-overlay-global .oo-ui-menuSelectWidget .oo-ui-menuSelectWidget-menu, | ||
html.ve-activated .oo-ui-defaultOverlay .oo-ui-menuSelectWidget .oo-ui-menuSelectWidget-menu { | |||
max-height: 60vh; /* visible results */ | |||
overflow-y: auto; | |||
} | } | ||
/* | /* Don’t force fixed table layout inside dialogs (some widgets use tables) */ | ||
. | html.ve-activated .ve-ui-overlay-global table, | ||
html.ve-activated .oo-ui-defaultOverlay table { | |||
table-layout: auto !important; | |||
} | } | ||
input#title { | |||
background-color: var(--background-color-base); | |||
color: var(--color-emphasized); | |||
margin: 0; | |||
border: 1px solid var(--border-color-base); | |||
border-radius: 8px; | |||
padding: 5px 8px; | |||
font-size: inherit; | |||
font-family: inherit; | |||
line-height: 1.42857143em; | |||
} | } | ||
.create-title { | |||
. | color: #FFF; | ||
} | } | ||
div.copyright-warning p { | |||
. | color: #FFF; | ||
} | } | ||
#blog-page-right { | |||
background-color: var(--color-accent-navy); | |||
} | } |
Latest revision as of 10:12, 27 August 2025
.welcome {
text-align: center;
font-size: 4em;
}
.lore-spotlight-widget {
background: #001933;
border: 1px solid #FF6300;
padding: 0.75em;
margin: 1em 0;
font-style: italic;
border-radius: 4px;
}
.mw-datatable th {
background-color: var(--color-accent-navy);
}
/* Let user tool links wrap instead of forcing one line */
.mw-usertoollinks {
white-space: normal !important; /* undo the nowrap */
overflow-wrap: anywhere; /* modern browsers */
word-break: break-word; /* fallback */
display: inline-block; /* makes wrapping cleaner inside cells */
}
/* 7) Special:ListFiles specifics you already touched, but keep them here for consistency */
body.page-Special_ListFiles .mw-datatable.listfiles { table-layout: fixed; }
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img { max-width: 100%; height: auto; }
body.page-Special_ListFiles .mw-usertoollinks { white-space: normal !important; overflow-wrap: anywhere; }
/* FIELDSET: allow shrinking, no scrollbars */
.continuum-body fieldset {
min-width: 0; /* crucial in flex layouts */
max-width: 100%;
box-sizing: border-box;
overflow-x: visible; /* you said no scrolling */
}
/* LEGEND shouldn’t inflate width */
.continuum-body fieldset > legend {
display: block;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* TABLE should fit container and wrap content */
.continuum-body fieldset table {
width: 100%;
max-width: 100%;
table-layout: fixed; /* enables predictable wrapping */
border-collapse: collapse;
box-sizing: border-box;
}
/* CELLS: wrap, don’t grow the table */
.continuum-body fieldset table th,
.continuum-body fieldset table td {
min-width: 0; /* lets fixed layout actually shrink */
white-space: normal; /* kill any nowraps */
overflow-wrap: anywhere; /* modern long-word wrap */
word-break: break-word; /* fallback for older browsers */
}
/* Usual offenders inside cells: links, codey bits, “nowrap” classes, user tools */
.continuum-body fieldset table a,
.continuum-body fieldset table code,
.continuum-body fieldset table .nowrap,
.continuum-body fieldset table .mw-usertoollinks,
.continuum-body fieldset table .mw-sha1,
.continuum-body fieldset table .mime-type {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Images/Thumbs must shrink with the cell */
.continuum-body fieldset table img {
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* ===== Special:Upload (and its stash step) ===== */
body.page-Special_Upload .continuum-body,
body.page-Special_UploadStash .continuum-body {
min-width: 0;
max-width: 100%;
}
/* Fieldsets & forms on Upload */
body.page-Special_Upload .continuum-body fieldset,
body.page-Special_UploadStash .continuum-body fieldset {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: visible; /* no scrollbars, make it fit */
}
body.page-Special_Upload .continuum-body fieldset > legend,
body.page-Special_UploadStash .continuum-body fieldset > legend {
display: block;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
margin: 0 0 .25em 0;
}
/* Tables/forms inside Upload */
body.page-Special_Upload .continuum-body table,
body.page-Special_UploadStash .continuum-body table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
box-sizing: border-box;
}
body.page-Special_Upload .continuum-body th,
body.page-Special_Upload .continuum-body td,
body.page-Special_UploadStash .continuum-body th,
body.page-Special_UploadStash .continuum-body td {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
body.page-Special_Upload .continuum-body img,
body.page-Special_UploadStash .continuum-body img {
max-width: 100%;
height: auto;
display: block;
}
/* ===== Special:ListFiles ===== */
body.page-Special_ListFiles .continuum-body { min-width: 0; max-width: 100%; }
body.page-Special_ListFiles .mw-datatable.listfiles {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
body.page-Special_ListFiles .mw-datatable.listfiles th,
body.page-Special_ListFiles .mw-datatable.listfiles td {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Thumbnails column stays narrow; images shrink to fit */
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;
}
/* Usual overflow goblins on ListFiles only */
body.page-Special_ListFiles .mw-usertoollinks,
body.page-Special_ListFiles .mw-datatable.listfiles .mw-sha1,
body.page-Special_ListFiles .mw-datatable.listfiles .mime-type,
body.page-Special_ListFiles .mw-datatable.listfiles .nowrap,
body.page-Special_ListFiles .mw-datatable.listfiles a,
body.page-Special_ListFiles .mw-datatable.listfiles code {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Preformatted chunks (sometimes appear in tables) should wrap too */
.continuum-body fieldset table pre,
.continuum-body fieldset table .mw-code {
white-space: pre-wrap;
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 {
max-width: 100%;
}
/* VE overlays live outside your content column: don't force wrapping there */
html.ve-activated .ve-ui-overlay-global *,
html.ve-activated .oo-ui-defaultOverlay * {
/* Restore normal text behavior inside VE/OOUI */
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
min-width: 0; /* allow flex children to shrink */
box-sizing: border-box;
}
/* Buttons should never wrap letter-by-letter */
html.ve-activated .ve-ui-overlay-global .oo-ui-buttonElement .oo-ui-labelElement-label,
html.ve-activated .oo-ui-defaultOverlay .oo-ui-buttonElement .oo-ui-labelElement-label {
white-space: nowrap !important;
}
/* VE template search results menu: give it breathable height */
html.ve-activated .ve-ui-overlay-global .oo-ui-menuSelectWidget .oo-ui-menuSelectWidget-menu,
html.ve-activated .oo-ui-defaultOverlay .oo-ui-menuSelectWidget .oo-ui-menuSelectWidget-menu {
max-height: 60vh; /* visible results */
overflow-y: auto;
}
/* Don’t force fixed table layout inside dialogs (some widgets use tables) */
html.ve-activated .ve-ui-overlay-global table,
html.ve-activated .oo-ui-defaultOverlay table {
table-layout: auto !important;
}
input#title {
background-color: var(--background-color-base);
color: var(--color-emphasized);
margin: 0;
border: 1px solid var(--border-color-base);
border-radius: 8px;
padding: 5px 8px;
font-size: inherit;
font-family: inherit;
line-height: 1.42857143em;
}
.create-title {
color: #FFF;
}
div.copyright-warning p {
color: #FFF;
}
#blog-page-right {
background-color: var(--color-accent-navy);
}