MediaWiki:Common.css: Difference between revisions
Appearance
![]() Cdjensen94 (talk | contribs) |
![]() Cdjensen94 (talk | contribs) |
||
Line 88: | Line 88: | ||
display: inline-block; /* makes wrapping cleaner inside cells */ | display: inline-block; /* makes wrapping cleaner inside cells */ | ||
} | } | ||
/* 1) Let the content column actually shrink (flexbox gotcha) */ | |||
.continuum-body { min-width: 0; } | |||
/* 2) Any table in the content should respect the container */ | |||
.continuum-body table { | |||
width: 100%; | |||
max-width: 100%; | |||
table-layout: fixed; /* enables wrapping based on cell width */ | |||
border-collapse: collapse; | |||
box-sizing: border-box; | |||
} | |||
/* 3) Cells: allow wrapping of long stuff */ | |||
.continuum-body table th, | |||
.continuum-body table td { | |||
min-width: 0; /* crucial with table-layout:fixed */ | |||
white-space: normal; /* kill any stray nowraps */ | |||
overflow-wrap: anywhere; /* modern break for long tokens */ | |||
word-break: break-word; /* fallback */ | |||
} | |||
/* 4) Common offenders inside cells */ | |||
.continuum-body table a, | |||
.continuum-body table code, | |||
.continuum-body table .nowrap, | |||
.continuum-body table .mw-usertoollinks, | |||
.continuum-body table .mw-parser-output .nowrap { | |||
white-space: normal !important; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* 5) Images/thumbs shrink with the cell */ | |||
.continuum-body table img { | |||
max-width: 100%; | |||
height: auto; | |||
object-fit: contain; | |||
display: block; | |||
} | |||
/* 6) Safety: horizontally scroll if something truly can’t shrink (e.g., embedded iframes) */ | |||
.continuum-body { overflow-x: auto; } | |||
/* 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; } |
Revision as of 01:55, 26 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;
}
/* Keep Special:ListFiles from overflowing the layout */
body.page-Special_ListFiles .continuum-body {
overflow-x: auto; /* horizontal scroll if needed, not page-breaks */
}
/* Make the table respect the container */
body.page-Special_ListFiles .mw-datatable.listfiles {
width: 100%;
max-width: 100%;
table-layout: fixed; /* predictable column widths; enables wrapping */
border-collapse: collapse;
}
/* Wrap long content instead of blowing out */
body.page-Special_ListFiles .mw-datatable.listfiles th,
body.page-Special_ListFiles .mw-datatable.listfiles td {
white-space: normal; /* was often nowrap via defaults */
overflow-wrap: anywhere; /* modern wrap for very long strings */
word-break: break-word; /* fallback for older browsers */
}
/* Keep thumbnails sane */
body.page-Special_ListFiles .mw-datatable.listfiles img {
max-width: 100px;
height: auto;
}
/* Reasonable fixed widths for the first couple columns (thumb + size) */
body.page-Special_ListFiles .mw-datatable.listfiles td:nth-child(1),
body.page-Special_ListFiles .mw-datatable.listfiles th:nth-child(1) {
width: 120px; /* thumbnail */
}
body.page-Special_ListFiles .mw-datatable.listfiles td:nth-child(2),
body.page-Special_ListFiles .mw-datatable.listfiles th:nth-child(2) {
width: 120px; /* size / dims column (tweak if your layout differs) */
}
/* Don’t let code-y bits (SHA1, MIME) refuse to wrap */
body.page-Special_ListFiles .mw-datatable.listfiles code,
body.page-Special_ListFiles .mw-datatable.listfiles a,
body.page-Special_ListFiles .mw-datatable.listfiles .mw-sha1,
body.page-Special_ListFiles .mw-datatable.listfiles .mime-type {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Safety net: prevent any rogue table inside from exceeding container width */
body.page-Special_ListFiles .continuum-body table {
max-width: 100%;
}
/* Force thumbnails in ListFiles to scale down nicely */
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img {
max-width: 100%; /* don’t exceed the column */
height: auto; /* keep aspect ratio */
display: block; /* avoids inline whitespace issues */
object-fit: contain; /* keeps whole image visible if column is small */
}
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb,
body.page-Special_ListFiles .mw-datatable.listfiles th.TablePager_col_thumb {
width: 120px; /* or whatever max width feels right */
}
@media (max-width: 600px) {
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img {
max-width: 80px;
}
}
.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 */
}
/* 1) Let the content column actually shrink (flexbox gotcha) */
.continuum-body { min-width: 0; }
/* 2) Any table in the content should respect the container */
.continuum-body table {
width: 100%;
max-width: 100%;
table-layout: fixed; /* enables wrapping based on cell width */
border-collapse: collapse;
box-sizing: border-box;
}
/* 3) Cells: allow wrapping of long stuff */
.continuum-body table th,
.continuum-body table td {
min-width: 0; /* crucial with table-layout:fixed */
white-space: normal; /* kill any stray nowraps */
overflow-wrap: anywhere; /* modern break for long tokens */
word-break: break-word; /* fallback */
}
/* 4) Common offenders inside cells */
.continuum-body table a,
.continuum-body table code,
.continuum-body table .nowrap,
.continuum-body table .mw-usertoollinks,
.continuum-body table .mw-parser-output .nowrap {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
}
/* 5) Images/thumbs shrink with the cell */
.continuum-body table img {
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* 6) Safety: horizontally scroll if something truly can’t shrink (e.g., embedded iframes) */
.continuum-body { overflow-x: auto; }
/* 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; }