|
Β |
| (19 intermediate revisions by the same user not shown) |
| Line 3: |
Line 3: |
| font-size: 4em; | | font-size: 4em; |
| } | | } |
| .lore-spotlight-widget { | | .emoji-trigger-wrap { margin-bottom: .5rem; } |
| Β Β background: #001933;
| | #emoji-trigger { margin-right: .5rem; } |
| Β Β 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 */
| |
| } | |
| /* 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%;
| |
| Β 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; }
| |
| /* 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;
| |
| }
| |
| Β | |
| /* If this is the ListFiles thumb column, keep it narrow (adjust nth-child if needed) */
| |
| 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;
| |
| }
| |
| Β | |
| /* 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,
| |
| .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;
| |
| }
| |
| /* Let the RecentChanges list shrink and wrap inside your body */
| |
| body.page-Special_RecentChanges .continuum-body {
| |
| Β min-width: 0;
| |
| Β max-width: 100%;
| |
| }
| |
| Β | |
| /* Each line wrapper should shrink, not overflow */
| |
| body.page-Special_RecentChanges .mw-changeslist-line-inner {
| |
| Β min-width: 0;
| |
| Β white-space: normal;
| |
| Β overflow-wrap: anywhere;
| |
| Β word-break: break-word;
| |
| }
| |
| Β | |
| /* Force user tool links to wrap */
| |
| body.page-Special_RecentChanges .mw-usertoollinks {
| |
| Β white-space: normal !important;
| |
| Β overflow-wrap: anywhere;
| |
| Β word-break: break-word;
| |
| }
| |
| Β | |
| /* Diff links (cur, prev, hist) should wrap too */
| |
| body.page-Special_RecentChanges .mw-changeslist-links {
| |
| Β white-space: normal !important;
| |
| Β overflow-wrap: anywhere;
| |
| }
| |
| Β | |
| /* Comments can be very long β allow them to wrap */
| |
| body.page-Special_RecentChanges .comment {
| |
| Β white-space: normal;
| |
| Β overflow-wrap: anywhere;
| |
| Β word-break: break-word;
| |
| }
| |
| Β | |
| /* Tags (abuse filter, edit tags) can also pile up */
| |
| body.page-Special_RecentChanges .mw-tag-markers {
| |
| Β white-space: normal;
| |
| Β overflow-wrap: anywhere;
| |
| Β word-break: break-word;
| |
| } | |