Speedybrain at 02:54, 7 October 2026

2026-10-07T02:54:42Z

← Older revision		Revision as of 02:54, 7 October 2026
Line 588:		Line 588:
	#n-Statue-of-Cubos { --tpt-fac: var(--tpt-fac-statue-of-cubos); }		#n-Statue-of-Cubos { --tpt-fac: var(--tpt-fac-statue-of-cubos); }

	/* ~~External~~ links in the ~~menu:~~ the ~~website's arrow~~. */		/* Menu links that open in a new tab: the new-tab icon (see "Links that open in a new tab") at the right edge. */
	~~.vector-main-menu .mw-list-item a.external::after,~~		.vector-main-menu .mw-list-item a[target="_blank"]::after {
	.vector-main-menu .mw-list-item a[~~rel~~~="~~nofollow~~"]::after {
	~~content: "\2197";~~
	margin-left: auto;		margin-left: auto;
	~~font~~-~~size: 12px;~~		background-color: var(--tpt-ink-subtle);
	color: var(--tpt-ink-subtle);		opacity: 1;
	}		}

Line 697:		Line 695:
	}		}

	/* ~~External links~~: the website's arrow, in the link ~~colour (~~Vector's ~~icon~~ is a fixed blue ~~image)~~. */		/* ---------- Links that open in a new tab ---------- */
			/* Links to other sites open in a new tab: in articles ($wgExternalLinkTarget), the menu, the header and the footer.
			Each carries the website's new-tab icon, a box with an arrow out of it, in the link's color, so readers know
			before they click. Links to the wiki itself stay in the same tab and have none. Vector's own external-link
			image is a fixed blue, so it is turned off. */
	.mw-parser-output a.external {		.mw-parser-output a.external {
	background-image: none;		background-image: none;
Line 703:		Line 705:
	}		}

	.mw-parser-output a.~~external~~::after {		.mw-parser-output a[target="_blank"]::after,
			.vector-main-menu a[target="_blank"]::after,
			.vector-user-links a[target="_blank"]::after,
			.mw-footer a[target="_blank"]::after {
	content: "";		content: "";
	display: inline-block;		display: inline-block;
	width: .72em;		width: .72em;
	height: .72em;		height: .72em;
	margin-left: .~~2em~~;		margin-left: .3em;
	background-color: currentColor;		background-color: currentColor;
	opacity: .75;		opacity: .75;
Line 715:		Line 720:
	}		}

	.mw-parser-output a~~.external~~:has(img)::after,		/* Image links, such as the footer's "Powered by MediaWiki" badge, get no icon. */
	.mw-~~parser-output .plainlinks~~ a~~.external~~::after {		.mw-parser-output a[target="_blank"]:has(img)::after,
			.mw-footer a[target="_blank"]:has(img)::after {
	display: none;		display: none;
	}		}

Speedybrain: Header: Play button on one line

2026-10-06T19:33:04Z

Header: Play button on one line

@@ Line 420: / Line 420: @@
 	border-radius: var(--tpt-radius-1);
 	box-shadow: var(--tpt-extrude);
+}
 #pt-tpt-play a:hover {
 	background: var(--tpt-brand-sun);
+}

Speedybrain: Hide "Switch to old look"

2026-10-06T11:57:21Z

Hide "Switch to old look"

← Older revision		Revision as of 11:57, 6 October 2026
Line 180:		Line 180:
	.mw-editsection-like {		.mw-editsection-like {
	font-family: var(--tpt-font-body);		font-family: var(--tpt-font-body);
			font-size: 13px;
			font-weight: 400;
			letter-spacing: 0;
			text-transform: none;
	}		}

Line 479:		Line 483:

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

			/* Vector 2022 is the only skin, so "Switch to old look" has nowhere to go. */
			.vector-main-menu-action-opt-out {
	display: none;		display: none;
	}		}
Line 684:		Line 693:
	}		}

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

Speedybrain: Brand theme for Vector 2022 (TPT2 Community Brand Kit).

2026-10-06T11:28:58Z

Brand theme for Vector 2022 (TPT2 Community Brand Kit).

New page

/* 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;
}

MediaWiki:Vector-2022.css - Revision history

Speedybrain at 02:54, 7 October 2026

Speedybrain: Header: Play button on one line

Speedybrain: Hide "Switch to old look"

Speedybrain: Brand theme for Vector 2022 (TPT2 Community Brand Kit).