MediaWiki:Common.css

/* The Perfect Tower II wiki: content styles shared by every page.
 *
 * Colours, type and sizes come from the TPT2 Community Brand Kit (--tpt-* tokens, loaded by the server
 * before this page). Skin chrome lives in MediaWiki:Vector-2022.css; template layout lives in each
 * template's /styles.css (TemplateStyles). Templates may also use the kit's classes directly:
 * tpt-card, tpt-callout, tpt-tag, tpt-chip, tpt-fac-<id>, tpt-num, tpt-infobox, tpt-table.
 *
 * Source: wiki repository, onwiki/MediaWiki/Common.css.
 */

/* ---------- Lists ---------- */
/* Horizontal lists (navboxes and templates). After mediawiki.org/wiki/Snippets/Horizontal_lists. */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}

.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
	display: inline;
}

.hlist .mw-empty-li {
	display: none;
}

.hlist dt::after {
	content: ": ";
}

.hlist dd::after,
.hlist li::after {
	content: " \00B7 ";
	font-weight: bold;
	color: var(--tpt-ink-subtle);
}

.hlist dd:last-child::after,
.hlist dt:last-child::after,
.hlist li:last-child::after {
	content: none;
}

.hlist dd dd:first-child::before, .hlist dd dt:first-child::before, .hlist dd li:first-child::before,
.hlist dt dd:first-child::before, .hlist dt dt:first-child::before, .hlist dt li:first-child::before,
.hlist li dd:first-child::before, .hlist li dt:first-child::before, .hlist li li:first-child::before {
	content: " (";
	font-weight: normal;
}

.hlist dd dd:last-child::after, .hlist dd dt:last-child::after, .hlist dd li:last-child::after,
.hlist dt dd:last-child::after, .hlist dt dt:last-child::after, .hlist dt li:last-child::after,
.hlist li dd:last-child::after, .hlist li dt:last-child::after, .hlist li li:last-child::after {
	content: ")";
	font-weight: normal;
}

.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li::before {
	content: " " counter(listitem) "\a0";
}

.plainlist ol,
.plainlist ul {
	line-height: inherit;
	list-style: none;
	margin: 0;
}

.plainlist ol li,
.plainlist ul li {
	margin-bottom: 0;
}

.nowrap,
.nowraplinks a,
.nowraplinks .selflink {
	white-space: nowrap;
}

.nowrap pre {
	white-space: pre;
}

.wrap,
.wraplinks a {
	white-space: normal;
}

/* ---------- Tables ---------- */
/* Wikitables take the kit's table look (.tpt-table): surface ground, uppercase header labels. */
.mw-parser-output table.wikitable,
.mw-parser-output table.toccolours {
	background: var(--tpt-surface);
	color: var(--tpt-ink);
	border: 1px solid var(--tpt-line);
	border-collapse: collapse;
	border-radius: 0;
	font-size: 15px;
	line-height: 22px;
	margin: 1em 0;
}

.mw-parser-output table.wikitable > * > tr > th,
.mw-parser-output table.wikitable > * > tr > td,
.mw-parser-output table.toccolours > * > tr > th,
.mw-parser-output table.toccolours > * > tr > td {
	border: 1px solid var(--tpt-line);
	padding: 8px 12px;
}

.mw-parser-output table.wikitable > * > tr > th,
.mw-parser-output table.toccolours > * > tr > th {
	background-color: var(--tpt-surface-alt);
	color: var(--tpt-ink);
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 13px;
	line-height: 17px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--tpt-line-strong);
}

.mw-parser-output table.wikitable > caption {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: .02em;
	text-align: left;
	padding: 8px 0;
	color: var(--tpt-ink);
}

/* Row headers (scope=row) read like body text, not like column labels. */
.mw-parser-output table.wikitable > * > tr > th[scope="row"] {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	border-bottom-width: 1px;
}

.mw-parser-output table.wikitable > tbody > tr:hover > td {
	background: color-mix(in srgb, var(--tpt-surface-alt) 55%, var(--tpt-surface));
}

.mw-parser-output table.wikitable td ul,
.mw-parser-output table.wikitable td ol,
.mw-parser-output table.wikitable td dl {
	text-align: left;
}

/* Sortable headers: only the color is set above, so MediaWiki's arrow keeps its place (one arrow, right
   side, not tiled); Vector swaps in the light arrow on dark grounds. Leave room for it next to the label. */
.mw-parser-output table.jquery-tablesorter th.headerSort {
	background-color: var(--tpt-surface-alt);
	padding-right: 24px;
}

/* Long tables keep their header row in view, below Vector's sticky page header while it shows. */
.mw-parser-output table.sortable > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
}

.vector-sticky-header-visible .mw-parser-output table.sortable > thead > tr > th {
	top: 56px;
}

/* A table wider than the text column scrolls sideways in its own box (MediaWiki:Common.js adds the box
   only around tables that don't fit), so it never runs under the contents column or off the screen.
   The box is the table's scroll container, so its header row stays in place there. */
.mw-parser-output .wiki-table-scroll {
	overflow-x: auto;
	max-width: 100%;
	margin: 1em 0;
	scrollbar-color: var(--tpt-line-strong) transparent;
}

.mw-parser-output .wiki-table-scroll:focus-visible {
	outline: 2px solid var(--tpt-focus);
	outline-offset: 2px;
}

.mw-parser-output .wiki-table-scroll > table {
	margin: 0;
}

.mw-parser-output .wiki-table-scroll > table > thead > tr > th {
	position: static;
}

/* Without JavaScript every table gets that box itself. */
.client-nojs .mw-parser-output table.wikitable {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* Phones: floated tables take the full width. */
@media screen and (max-width: 719px) {
	.mw-parser-output table.wikitable[style*="float"] {
		float: none !important;
		margin-left: 0 !important;
	}
}

/* ---------- Numbers ---------- */
/* Template:Number writes scientific notation and named numbers; this shows the one the reader picked under
   Appearance (class on <html> from the server, see WikiBranding.php), scientific by default. */
html:not(.tpt-notation-clientpref-named) .wiki-num__named,
.tpt-notation-clientpref-named .wiki-num__sci {
	display: none;
}

/* ---------- Navboxes (Module:Navbox output) ---------- */
.navbox {
	box-sizing: border-box;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius-2);
	width: 100%;
	clear: both;
	font-size: 14px;
	line-height: 22px;
	text-align: center;
	padding: 0;
	margin: 2em auto 0;
	background: var(--tpt-surface);
	overflow: hidden;
}

.navbox .navbox {
	margin-top: 0;
	border: 0;
	border-radius: 0;
}

.navbox + .navbox {
	margin-top: 8px;
}

.navbox-inner,
.navbox-subgroup {
	width: 100%;
	background: transparent;
	border-spacing: 0;
}

.navbox-group,
.navbox-title,
.navbox-abovebelow {
	padding: 6px 12px;
	line-height: 1.5em;
	text-align: center;
}

.navbox th,
.navbox-title {
	background: var(--tpt-surface-alt);
	color: var(--tpt-ink);
}

.navbox-title {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--tpt-line);
}

.navbox-title a {
	color: var(--tpt-ink);
}

th.navbox-group,
.navbox-abovebelow,
.navbox-subgroup .navbox-title {
	background: color-mix(in srgb, var(--tpt-surface-alt) 60%, var(--tpt-surface));
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
}

th.navbox-group {
	white-space: nowrap;
	text-align: right;
	width: 1%;
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background: color-mix(in srgb, var(--tpt-surface-alt) 35%, var(--tpt-surface));
}

.navbox-list {
	line-height: 1.6em;
	border-color: var(--tpt-surface);
	text-align: left;
	padding: 4px 12px;
}

tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {
	border-top: 1px solid var(--tpt-line);
}

.navbox-even,
.navbox-odd {
	background: transparent;
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 2px 0;
}

/* Navbar (the V, T, E links) is for editors; readers don't need it while editing is closed. */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}

.navbar ul {
	display: inline;
	white-space: nowrap;
}

.navbox .navbar {
	display: block;
	font-size: 100%;
}

.navbox-title .navbar {
	float: left;
	text-align: left;
	margin-right: .5em;
	visibility: hidden;
}

/* ---------- Collapsible blocks ---------- */
.mw-parser-output .mw-collapsible-toggle {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: right;
	padding: 0 .2em;
}

.mw-parser-output .mw-collapsible-toggle a,
.mw-parser-output .mw-collapsible-text {
	color: var(--tpt-accent);
}

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	float: left;
	text-align: left;
}

/* ---------- Hatnotes ---------- */
.hatnote,
div.hatnote {
	font-style: normal;
	color: var(--tpt-ink-muted);
	padding: 6px 0 6px 12px;
	margin-bottom: .75em;
	border-left: 3px solid var(--tpt-line-strong);
	font-size: 15px;
}

div.hatnote + div.hatnote {
	margin-top: -.5em;
}

/* ---------- Subpage breadcrumbs (Factory/Recipes) ---------- */
.mw-body .subpages,
#contentSub .subpages {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	line-height: 18px;
	color: var(--tpt-ink-subtle);
}

#contentSub .subpages a {
	color: var(--tpt-ink-muted);
	text-decoration: none;
}

#contentSub .subpages a:hover {
	color: var(--tpt-accent);
	text-decoration: underline;
}

/* ---------- Images and galleries ---------- */
.mw-parser-output figure[typeof~="mw:File/Thumb"],
.mw-parser-output figure[typeof~="mw:File/Frame"] {
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius-2);
}

.mw-parser-output figure[typeof~="mw:File/Thumb"] > figcaption,
.mw-parser-output figure[typeof~="mw:File/Frame"] > figcaption {
	color: var(--tpt-ink-muted);
	font-size: 13px;
	line-height: 18px;
}

.mw-parser-output ul.gallery li.gallerybox div.thumb {
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius-2);
}

.mw-parser-output .gallerytext {
	color: var(--tpt-ink-muted);
	font-size: 13px;
}

/* ---------- Code ---------- */
/* Scripts and code blocks always sit on the kit's code ground (dark in both themes). */
.mw-parser-output pre,
.mw-parser-output .mw-highlight pre {
	background: var(--tpt-code-bg);
	color: var(--tpt-code-ink);
	border: 0;
	border-radius: var(--tpt-radius-1);
	padding: 14px 16px;
	font-size: 14px;
	line-height: 22px;
	tab-size: 2;
	overflow-x: auto;
	white-space: pre;
}

.mw-parser-output code {
	font-size: .9em;
	font-weight: 500;
	padding: 1px 5px;
	border: 0;
	border-radius: var(--tpt-radius-1);
	background: var(--tpt-surface-alt);
	color: var(--tpt-ink);
}

.mw-highlight .k, .mw-highlight .kd, .mw-highlight .kr, .mw-highlight .kc, .mw-highlight .kn, .mw-highlight .kt, .mw-highlight .ow { color: var(--tpt-syn-keyword); font-weight: normal; }
.mw-highlight .nf, .mw-highlight .fm, .mw-highlight .nb, .mw-highlight .bp, .mw-highlight .nx, .mw-highlight .na { color: var(--tpt-syn-call); }
.mw-highlight .s, .mw-highlight .s1, .mw-highlight .s2, .mw-highlight .sb, .mw-highlight .sc, .mw-highlight .sd, .mw-highlight .se, .mw-highlight .sh, .mw-highlight .si, .mw-highlight .sx, .mw-highlight .sr, .mw-highlight .ss { color: var(--tpt-syn-string); }
.mw-highlight .m, .mw-highlight .mi, .mw-highlight .mf, .mw-highlight .mh, .mw-highlight .mo, .mw-highlight .il { color: var(--tpt-syn-number); }
.mw-highlight .c, .mw-highlight .c1, .mw-highlight .cm, .mw-highlight .cp, .mw-highlight .cs, .mw-highlight .ch, .mw-highlight .cpf { color: var(--tpt-syn-comment); font-style: italic; }
.mw-highlight .p, .mw-highlight .o, .mw-highlight .w, .mw-highlight .n, .mw-highlight .nv, .mw-highlight .vg, .mw-highlight .nl, .mw-highlight .nn, .mw-highlight .nc { color: var(--tpt-code-ink); }
.mw-highlight .err { color: var(--tpt-danger); border: 0; }
.mw-highlight .hll { background: color-mix(in srgb, var(--tpt-accent-fill) 18%, transparent); }

/* ---------- Legacy inline colours (safety net) ---------- */
/* A few user pages still hardcode light backgrounds in style="". These rules keep them readable on dark
   grounds. Remove a rule once its pattern is gone from the wiki; articles and templates use classes.
   Hex colors are listed in both cases instead of using the "i" flag, which the CSS editor rejects. */
.mw-parser-output [style*="background-color: #eee"],
.mw-parser-output [style*="background-color: #EEE"],
.mw-parser-output [style*="background-color: #fff"],
.mw-parser-output [style*="background-color: #FFF"] {
	background: var(--tpt-surface-alt) !important;
	color: var(--tpt-ink) !important;
	border-color: var(--tpt-line) !important;
}

/* ---------- Kit components inside articles ---------- */
.mw-parser-output .tpt-card,
.mw-parser-output .tpt-callout,
.mw-parser-output .tpt-infobox {
	color: var(--tpt-ink);
}

.mw-parser-output .tpt-callout {
	margin: 1em 0;
}

.mw-parser-output a.tpt-card,
.mw-parser-output .tpt-card a {
	text-decoration: none;
}