Jump to content

MediaWiki:Vector-2022.css

From The Perfect Tower II
Revision as of 11:28, 6 October 2026 by Speedybrain (talk | contribs) (Brand theme for Vector 2022 (TPT2 Community Brand Kit).)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* The Perfect Tower II wiki: skin theme for Vector 2022.
 *
 * Brand values come from the TPT2 Community Brand Kit. The server loads tpt.css and the MediaWiki
 * adapter (tpt-mediawiki.css) before this page, so every --tpt-* token already follows the reader's
 * Appearance choice (day, night, automatic). This file only maps the skin onto those tokens:
 * use var(--tpt-*), never a copied colour value.
 *
 * Source: wiki repository, onwiki/MediaWiki/Vector-2022.css.
 */

/* ---------- Skin colours -> brand tokens ---------- */
/* One block for every theme: the tokens switch, the mapping does not. html:root ties Vector's
   night/OS rules on specificity and wins because site CSS loads later. Print keeps Vector's light values. */
@media screen {
	html:root,
	html .notheme,
	html .skin-invert {
		--color-base: var(--tpt-ink);
		--color-base-fixed: var(--tpt-ink);
		--color-base--hover: var(--tpt-ink);
		--color-base--subtle: var(--tpt-ink-subtle);
		--color-emphasized: var(--tpt-ink);
		--color-subtle: var(--tpt-ink-muted);
		--color-placeholder: var(--tpt-ink-subtle);
		--color-disabled: var(--tpt-ink-subtle);
		--color-inverted: var(--tpt-bg);
		--color-inverted-fixed: var(--tpt-on-accent);
		--color-progressive: var(--tpt-accent);
		--color-progressive--hover: var(--tpt-accent);
		--color-progressive--active: var(--tpt-accent);
		--color-progressive--focus: var(--tpt-accent);
		--color-visited: var(--tpt-accent);
		--color-destructive: var(--tpt-danger);
		--color-destructive--hover: var(--tpt-danger);
		--color-destructive--active: var(--tpt-danger);
		--color-destructive--focus: var(--tpt-danger);
		--color-destructive--visited: var(--tpt-danger);
		--color-link-red: var(--tpt-danger);
		--color-link-red--hover: var(--tpt-danger);
		--color-link-red--active: var(--tpt-danger);
		--color-link-red--focus: var(--tpt-danger);
		--color-link-red--visited: var(--tpt-danger);
		--color-error: var(--tpt-danger);
		--color-warning: var(--tpt-warning);
		--color-success: var(--tpt-success);
		--color-notice: var(--tpt-ink);
		--color-content-added: var(--tpt-success);
		--color-content-removed: var(--tpt-danger);

		--background-color-base: var(--tpt-bg);
		--background-color-base-fixed: var(--tpt-surface);
		--background-color-neutral: var(--tpt-surface-alt);
		--background-color-neutral-subtle: var(--tpt-surface);
		--background-color-interactive: var(--tpt-surface-alt);
		--background-color-interactive-subtle: var(--tpt-surface);
		--background-color-disabled: var(--tpt-surface-alt);
		--background-color-disabled-subtle: var(--tpt-surface);
		--background-color-inverted: var(--tpt-ink);
		--background-color-progressive: var(--tpt-accent-fill);
		--background-color-progressive--hover: var(--tpt-brand-sun);
		--background-color-progressive--active: var(--tpt-accent-fill);
		--background-color-progressive--focus: var(--tpt-accent-fill);
		--background-color-progressive-subtle: color-mix(in srgb, var(--tpt-accent-fill) 14%, var(--tpt-bg));
		--background-color-destructive: var(--tpt-danger);
		--background-color-destructive--hover: var(--tpt-danger);
		--background-color-destructive--active: var(--tpt-danger);
		--background-color-destructive--focus: var(--tpt-danger);
		--background-color-destructive-subtle: color-mix(in srgb, var(--tpt-danger) 14%, var(--tpt-bg));
		--background-color-error: var(--tpt-danger);
		--background-color-error--hover: var(--tpt-danger);
		--background-color-error--active: var(--tpt-danger);
		--background-color-error-subtle: color-mix(in srgb, var(--tpt-danger) 14%, var(--tpt-bg));
		--background-color-warning-subtle: color-mix(in srgb, var(--tpt-warning) 14%, var(--tpt-bg));
		--background-color-success-subtle: color-mix(in srgb, var(--tpt-success) 14%, var(--tpt-bg));
		--background-color-notice-subtle: var(--tpt-surface);
		--background-color-content-added: color-mix(in srgb, var(--tpt-success) 20%, var(--tpt-bg));
		--background-color-content-removed: color-mix(in srgb, var(--tpt-danger) 20%, var(--tpt-bg));
		--background-color-transparent: transparent;
		--background-color-backdrop-light: color-mix(in srgb, var(--tpt-bg) 65%, transparent);
		--background-color-backdrop-dark: color-mix(in srgb, var(--tpt-outline) 65%, transparent);
		--background-color-button-quiet--hover: var(--tpt-surface-alt);
		--background-color-button-quiet--active: var(--tpt-line);
		--background-color-input-binary--checked: var(--tpt-accent-fill);
		--background-color-tab-list-item-framed--hover: var(--tpt-surface-alt);
		--background-color-tab-list-item-framed--active: var(--tpt-surface-alt);

		--border-color-base: var(--tpt-line-strong);
		--border-color-subtle: var(--tpt-line);
		--border-color-muted: var(--tpt-line);
		--border-color-divider: var(--tpt-line);
		--border-color-interactive: var(--tpt-line-strong);
		--border-color-disabled: var(--tpt-line);
		--border-color-inverted: var(--tpt-bg);
		--border-color-progressive: var(--tpt-accent-fill);
		--border-color-progressive--hover: var(--tpt-accent-fill);
		--border-color-progressive--active: var(--tpt-accent-fill);
		--border-color-progressive--focus: var(--tpt-focus);
		--border-color-destructive: var(--tpt-danger);
		--border-color-destructive--hover: var(--tpt-danger);
		--border-color-destructive--active: var(--tpt-danger);
		--border-color-destructive--focus: var(--tpt-focus);
		--border-color-error: var(--tpt-danger);
		--border-color-error--hover: var(--tpt-danger);
		--border-color-warning: var(--tpt-warning);
		--border-color-success: var(--tpt-success);
		--border-color-notice: var(--tpt-line-strong);
		--border-color-content-added: var(--tpt-success);
		--border-color-content-removed: var(--tpt-danger);
		--border-color-transparent: transparent;
		--border-color-input--hover: var(--tpt-ink-muted);
		--border-color-input-binary: var(--tpt-line-strong);
		--border-color-input-binary--hover: var(--tpt-ink-muted);
		--border-color-input-binary--active: var(--tpt-accent-fill);
		--border-color-input-binary--focus: var(--tpt-focus);
		--border-color-input-binary--checked: var(--tpt-accent-fill);
		--outline-color-progressive--focus: var(--tpt-focus);

		--box-shadow-color-base: var(--tpt-outline);
		--box-shadow-color-progressive--active: var(--tpt-accent-fill);
		--box-shadow-color-progressive--focus: var(--tpt-focus);
		--box-shadow-color-progressive-selected: var(--tpt-accent-fill);
		--box-shadow-color-progressive-selected--hover: var(--tpt-accent-fill);
		--box-shadow-color-progressive-selected--active: var(--tpt-accent-fill);
		--box-shadow-color-destructive--focus: var(--tpt-focus);
		--box-shadow-color-inverted: var(--tpt-bg);
		--box-shadow-color-transparent: transparent;

		--filter-invert-icon: invert(1);
		--filter-invert-primary-button-icon: none;
	}

	/* Skin icons are dark masks: invert them only on dark grounds. */
	html.skin-theme-clientpref-day,
	html .notheme,
	html .skin-invert {
		--filter-invert-icon: none;
	}
}

@media screen and (prefers-color-scheme: light) {
	html.skin-theme-clientpref-os {
		--filter-invert-icon: none;
	}
}

/* ---------- Type ---------- */
html,
body {
	font-family: var(--tpt-font-body);
}

.vector-feature-custom-font-size-clientpref-1 {
	--line-height-medium: 1.625; /* 16/26, the kit's body text */
}

.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-family: var(--tpt-font-heading);
	color: var(--tpt-ink);
}

pre,
code,
tt,
kbd,
samp,
.mw-code {
	font-family: var(--tpt-font-mono);
}

.mw-editsection,
.mw-editsection-like {
	font-family: var(--tpt-font-body);
}

/* Page title: the one Oxanium line per view. */
.mw-body h1.firstHeading,
.mw-body .firstHeading {
	font-family: var(--tpt-font-display);
	font-weight: 800;
	font-size: 2.75rem; /* 44px */
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0;
	text-wrap: balance;
	border: 0;
	padding: 4px 0 2px;
}

@media screen and (max-width: 719px) {
	.mw-body h1.firstHeading,
	.mw-body .firstHeading {
		font-size: 2rem; /* 32px */
	}
}

.vector-page-titlebar {
	box-shadow: none;
	border-bottom: 0;
	padding-top: 8px;
}

.vector-page-titlebar::after {
	display: none;
}

/* Article headings. */
.mw-body-content h2,
.mw-body-content .mw-heading2 h2 {
	font-weight: 600;
	font-size: 1.75rem; /* 28px */
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 2.25rem 0 1rem;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--tpt-line);
}

.mw-body-content .mw-heading2 {
	border-bottom: 1px solid var(--tpt-line);
	margin: 2.25rem 0 1rem;
	padding-bottom: 10px;
}

.mw-body-content .mw-heading2 h2 {
	border: 0;
	margin: 0;
	padding: 0;
}

.mw-body-content h3,
.mw-body-content .mw-heading3 h3 {
	font-weight: 600;
	font-size: 1.3125rem; /* 21px */
	line-height: 1.35;
	margin-top: 1.75rem;
}

.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-weight: 500;
	font-size: 1.0625rem; /* 17px */
	letter-spacing: .02em;
}

.mw-body-content h1 {
	font-weight: 600;
	text-transform: uppercase;
}

/* Prose stays at the kit's 720px measure; tables, galleries and navboxes may use the full column. */
.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > blockquote {
	max-width: var(--tpt-size-measure);
}

.mw-body-content a:not(.mw-file-description):not(.image) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.mw-body-content a:not(.mw-file-description):not(.image):hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* ---------- Header ---------- */
/* Surface with the kit's 3px ember-to-sun strip (.tpt-header::before). Painted as a background layer
   because .mw-header is a positioned, z-indexed child that would cover a pseudo-element. */
.vector-header-container {
	background:
		linear-gradient(90deg, var(--tpt-brand-ember), var(--tpt-brand-sun)) top left / 100% 3px no-repeat,
		var(--tpt-surface);
	border-bottom: 1px solid var(--tpt-line);
}

.vector-header-container .mw-header {
	background: transparent;
	min-height: 64px;
	padding-top: 3px;
}

.vector-header-container .vector-sticky-header {
	background:
		linear-gradient(90deg, var(--tpt-brand-ember), var(--tpt-brand-sun)) top left / 100% 3px no-repeat,
		var(--tpt-surface);
	border-bottom: 1px solid var(--tpt-line);
	min-height: 56px;
	padding-top: 3px;
}

.mw-header {
	align-items: center;
}

/* Phones: logo left, search and menus right, on one row. Below 640px Vector stacks the two halves
   (.vector-header { flex-flow: column }) and stretches both to 100%. */
@media screen and (max-width: 639px) {
	.vector-header-container .vector-header {
		flex-flow: row nowrap;
	}

	.mw-header .vector-header-start {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.mw-header .vector-header-end {
		width: auto;
		flex: 0 0 auto;
	}

	.mw-logo {
		min-width: 0;
	}
}

/* Lockup: the symbol plus "Wiki" in the display face, like the website's header. */
.mw-logo-container.skin-invert {
	filter: none !important;
	--tpt-ink: inherit;
}

.mw-logo {
	align-items: center;
	text-decoration: none;
}

.mw-logo-icon {
	width: 31px;
	height: 36px;
	margin-right: 10px;
}

.mw-logo-wordmark {
	font-size: 0;
	color: var(--tpt-ink);
}

.mw-logo-wordmark::after {
	content: "Wiki";
	font-family: var(--tpt-font-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Search field: the kit's .tpt-search. */
.vector-header .cdx-text-input__input,
.vector-sticky-header .cdx-text-input__input,
#searchInput {
	min-height: 40px;
	background: var(--tpt-bg);
	color: var(--tpt-ink);
	border: 2px solid var(--tpt-line-strong);
	border-radius: var(--tpt-radius-1);
	font-size: 15px;
	box-shadow: none;
}

.vector-header .cdx-text-input__input:focus,
.vector-sticky-header .cdx-text-input__input:focus,
#searchInput:focus {
	border-color: var(--tpt-focus);
	box-shadow: none;
	outline: none;
}

.vector-header .cdx-search-input__end-button {
	min-height: 40px;
	border-radius: var(--tpt-radius-1);
}

/* Header buttons and links: the kit's uppercase nav style. */
.vector-user-links .vector-menu-content-list > li > a,
.vector-user-links #pt-createaccount-2 a,
.vector-user-links #pt-login-2 a {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
	text-decoration: none;
}

.vector-user-links .vector-menu-content-list > li > a:hover {
	color: var(--tpt-ink);
}

/* Website links added by the server (user-page portlet): Play button in the kit's primary style. */
#pt-tpt-play a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	background: var(--tpt-accent-fill);
	color: var(--tpt-on-accent) !important;
	border: 2px solid var(--tpt-outline);
	border-radius: var(--tpt-radius-1);
	box-shadow: var(--tpt-extrude);
}

#pt-tpt-play a:hover {
	background: var(--tpt-brand-sun);
}

/* ---------- Page grid: main menu left, contents right (kit sizes: 248px nav, 340px aside) ---------- */
@media screen and (min-width: 1120px) {
	.vector-feature-main-menu-pinned-enabled .mw-page-container-inner {
		grid-template-columns: var(--tpt-size-wiki-nav) minmax(0, 1fr);
	}

	/* The nav starts level with the page title, with or without a contents column. */
	.vector-column-start {
		margin-top: 0;
	}

	.vector-main-menu-container .vector-main-menu {
		padding-top: 20px;
	}

	.mw-header {
		grid-template-columns: var(--tpt-size-wiki-nav) minmax(0, 1fr);
	}
}

@media screen and (min-width: 1400px) {
	/* The contents list moves out of the left column into its own column on the right. */
	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .mw-page-container-inner {
		grid-template-columns: var(--tpt-size-wiki-nav) minmax(0, 1fr) 15rem;
		grid-template-areas:
			'siteNotice siteNotice siteNotice'
			'mainMenu pageContent toc'
			'footer footer footer';
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-column-start {
		display: contents;
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-main-menu-container {
		grid-area: mainMenu;
		margin-left: 0;
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-column-start > .vector-sticky-pinned-container {
		grid-area: toc;
		align-self: start;
	}

	.vector-feature-main-menu-pinned-enabled.vector-feature-toc-pinned-clientpref-1.vector-toc-available .vector-column-start > .vector-sticky-pinned-container::after {
		display: none;
	}
}

/* ---------- Main menu (left nav) ---------- */
.vector-main-menu-container .vector-main-menu,
.vector-dropdown .vector-main-menu {
	font-size: 14px;
	line-height: 20px;
}

.vector-main-menu .vector-pinnable-header {
	display: none;
}

.vector-main-menu .vector-menu-heading,
.vector-main-menu #p-navigation .vector-menu-heading {
	display: block;
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
	border: 0;
	margin: 20px 0 6px;
	padding: 0 10px;
}

.vector-main-menu .vector-menu:first-of-type .vector-menu-heading {
	margin-top: 8px;
}

.vector-main-menu .vector-menu-content-list .mw-list-item {
	padding: 0;
	margin: 0;
}

.vector-main-menu .vector-menu-content-list .mw-list-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 10px;
	border-radius: var(--tpt-radius-1);
	color: var(--tpt-ink-muted);
	text-decoration: none;
	background-image: none;
}

.vector-main-menu .vector-menu-content-list .mw-list-item a:hover {
	background: var(--tpt-surface);
	color: var(--tpt-ink);
}

.vector-main-menu .vector-menu-content-list .mw-list-item.selected a,
.vector-main-menu .vector-menu-content-list .mw-list-item a.mw-selflink {
	background: var(--tpt-surface-alt);
	color: var(--tpt-ink);
	font-weight: 600;
}

/* Building links: a facility hexagon in the game's resource colour. */
#p-Town .mw-list-item[id^="n-"] a::before {
	content: "";
	width: 12px;
	height: 14px;
	flex: none;
	background: var(--tpt-fac, transparent);
	clip-path: polygon(50% 0, 100% 27.5%, 100% 72.5%, 50% 100%, 0 72.5%, 0 27.5%);
}

#p-Town #n-Town a::before,
#p-Town #n-All-buildings a::before {
	display: none;
}

#n-Power-Plant { --tpt-fac: var(--tpt-fac-power-plant); }
#n-Mine { --tpt-fac: var(--tpt-fac-mine); }
#n-Factory { --tpt-fac: var(--tpt-fac-factory); }
#n-Headquarters { --tpt-fac: var(--tpt-fac-headquarters); }
#n-Arcade { --tpt-fac: var(--tpt-fac-arcade); }
#n-Laboratory { --tpt-fac: var(--tpt-fac-laboratory); }
#n-Shipyard { --tpt-fac: var(--tpt-fac-shipyard); }
#n-Trading-Post { --tpt-fac: var(--tpt-fac-trading-post); }
#n-Workshop { --tpt-fac: var(--tpt-fac-workshop); }
#n-Museum { --tpt-fac: var(--tpt-fac-museum); }
#n-Construction-Firm { --tpt-fac: var(--tpt-fac-construction-firm); }
#n-Statue-of-Cubos { --tpt-fac: var(--tpt-fac-statue-of-cubos); }

/* External links in the menu: the website's arrow. */
.vector-main-menu .mw-list-item a.external::after,
.vector-main-menu .mw-list-item a[rel~="nofollow"]::after {
	content: "\2197";
	margin-left: auto;
	font-size: 12px;
	color: var(--tpt-ink-subtle);
}

/* ---------- Contents (TOC) ---------- */
.vector-toc {
	font-size: 14px;
	line-height: 20px;
}

.vector-toc .vector-pinnable-header-label {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
}

.vector-toc .vector-toc-link {
	color: var(--tpt-ink-muted);
	padding: 4px 0;
}

.vector-toc .vector-toc-link:hover {
	color: var(--tpt-ink);
	text-decoration: none;
}

.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
.vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
	color: var(--tpt-ink) !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--tpt-accent-fill);
	padding-left: 10px;
}

/* ---------- Page tabs (Read / Edit / History) ---------- */
.vector-page-toolbar-container {
	border-bottom: 2px solid var(--tpt-line);
}

.vector-menu-tabs .mw-list-item a {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted) !important;
}

.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
	color: var(--tpt-ink) !important;
	border-bottom: 3px solid var(--tpt-accent-fill);
}

.vector-menu-tabs .mw-list-item a:hover {
	color: var(--tpt-ink) !important;
}

.vector-page-toolbar .vector-dropdown-label {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- Dropdowns, menus, buttons ---------- */
.vector-dropdown .vector-dropdown-content {
	background: var(--tpt-surface);
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius-2);
	box-shadow: var(--tpt-lift);
}

.cdx-button,
.mw-ui-button {
	border-radius: var(--tpt-radius-1);
}

.cdx-button--action-progressive.cdx-button--weight-primary,
.mw-ui-button.mw-ui-progressive {
	color: var(--tpt-on-accent);
	border-color: var(--tpt-outline);
	box-shadow: var(--tpt-extrude);
}

/* ---------- Content chrome ---------- */
#siteSub {
	display: none;
}

/* The Main Page brings its own hero. */
.page-Main_Page.action-view .vector-page-titlebar .firstHeading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* External links: the website's arrow, in the link colour (Vector's icon is a fixed blue image). */
.mw-parser-output a.external {
	background-image: none;
	padding-right: 0;
}

.mw-parser-output a.external::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-left: .2em;
	background-color: currentColor;
	opacity: .75;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mw-parser-output a.external:has(img)::after {
	display: none;
}

#contentSub,
#contentSub2,
.mw-content-subtitle {
	color: var(--tpt-ink-subtle);
	font-size: 13px;
}

.catlinks {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--tpt-line);
	border-radius: 0;
	margin-top: 40px;
	padding: 16px 0 0;
}

.catlinks > div > a:first-child {
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tpt-ink-muted);
}

.catlinks li {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 6px 6px 0;
}

.catlinks li a {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--tpt-radius-1);
	background: var(--tpt-surface-alt);
	color: var(--tpt-ink-muted);
	font-family: var(--tpt-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.catlinks li a:hover {
	color: var(--tpt-ink);
	background: var(--tpt-line);
}

/* ---------- Footer ---------- */
.mw-footer-container {
	background: transparent;
	border-top: 1px solid var(--tpt-line);
	margin-top: 48px;
}

.mw-footer {
	border: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--tpt-ink-subtle);
}

.mw-footer li {
	color: var(--tpt-ink-subtle);
}

.mw-footer a {
	color: var(--tpt-ink-muted);
}

#footer-icons {
	display: none;
}
Retrieved from "https://wiki.perfecttower2.com/w/index.php?title=MediaWiki:Vector-2022.css&oldid=4183"