Jump to content

MediaWiki:Common.css: Difference between revisions

From Continuum Universes Wiki
Line 135: Line 135:
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img { max-width: 100%; height: auto; }
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; }
body.page-Special_ListFiles .mw-usertoollinks { white-space: normal !important; overflow-wrap: anywhere; }
/* Scope everything to your content column */
.continuum-body fieldset {
  /* Let it actually shrink inside flex/grid parents */
  min-width: 0;                /* critical */
  max-width: 100%;
  box-sizing: border-box;
  /* Last-resort safety if inner content truly can't wrap */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Legends love to force width: keep them from doing that */
.continuum-body fieldset > legend {
  display: block;              /* avoid odd inline formatting context */
  max-width: 100%;
  white-space: normal;          /* undo any nowraps */
  overflow-wrap: anywhere;      /* long words/names wrap */
  word-break: break-word;      /* fallback */
}
/* Tables inside fieldset should respect the container */
.continuum-body fieldset table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;          /* predictable wrapping */
  border-collapse: collapse;
  box-sizing: border-box;
}
/* Cells: allow wrapping of long tokens */
.continuum-body fieldset table th,
.continuum-body fieldset table td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Usual offenders inside cells */
.continuum-body fieldset table a,
.continuum-body fieldset table code,
.continuum-body fieldset table .nowrap {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
/* Images shrink with the cell */
.continuum-body fieldset table img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

Revision as of 01:57, 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; }
/* Scope everything to your content column */
.continuum-body fieldset {
  /* Let it actually shrink inside flex/grid parents */
  min-width: 0;                 /* critical */
  max-width: 100%;
  box-sizing: border-box;

  /* Last-resort safety if inner content truly can't wrap */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Legends love to force width: keep them from doing that */
.continuum-body fieldset > legend {
  display: block;               /* avoid odd inline formatting context */
  max-width: 100%;
  white-space: normal;          /* undo any nowraps */
  overflow-wrap: anywhere;      /* long words/names wrap */
  word-break: break-word;       /* fallback */
}

/* Tables inside fieldset should respect the container */
.continuum-body fieldset table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;          /* predictable wrapping */
  border-collapse: collapse;
  box-sizing: border-box;
}

/* Cells: allow wrapping of long tokens */
.continuum-body fieldset table th,
.continuum-body fieldset table td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Usual offenders inside cells */
.continuum-body fieldset table a,
.continuum-body fieldset table code,
.continuum-body fieldset table .nowrap {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Images shrink with the cell */
.continuum-body fieldset table img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}