MediaWiki:Vector-2022.css: Difference between revisions
Speedybrain (talk | contribs) Brand theme for Vector 2022 (TPT2 Community Brand Kit). |
Speedybrain (talk | contribs) No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| 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 416: | Line 420: | ||
border-radius: var(--tpt-radius-1); | border-radius: var(--tpt-radius-1); | ||
box-shadow: var(--tpt-extrude); | box-shadow: var(--tpt-extrude); | ||
white-space: nowrap; | |||
} | } | ||
#pt-tpt-play a:hover { | #pt-tpt-play a:hover { | ||
background: var(--tpt-brand-sun); | background: var(--tpt-brand-sun); | ||
} | |||
/* Below 1280px the bar has no room for every website link: Game, Tools and Discord stay in the sidebar | |||
(perfecttower2.com and Community), the Play button stays here. Below 1000px the user name and | |||
watchlist move into the user menu, which Vector itself only does below 640px. */ | |||
@media screen and (max-width: 1279px) { | |||
.vector-user-links-main #pt-tpt-game, | |||
.vector-user-links-main #pt-tpt-tools, | |||
.vector-user-links-main #pt-tpt-discord { | |||
display: none; | |||
} | |||
} | |||
@media screen and (max-width: 999px) { | |||
.vector-user-links-main .user-links-collapsible-item:not(#pt-tpt-play) { | |||
display: none; | |||
} | |||
.vector-user-menu .user-links-collapsible-item { | |||
display: block; | |||
} | |||
} | } | ||
| Line 479: | Line 505: | ||
.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 557: | 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); } | ||
/* | /* 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[target="_blank"]::after { | |||
.vector-main-menu .mw-list-item a[ | |||
margin-left: auto; | margin-left: auto; | ||
background-color: var(--tpt-ink-subtle); | |||
opacity: 1; | |||
} | } | ||
| Line 666: | Line 695: | ||
} | } | ||
/* | /* ---------- 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 672: | Line 705: | ||
} | } | ||
.mw-parser-output a. | .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: . | margin-left: .3em; | ||
background-color: currentColor; | background-color: currentColor; | ||
opacity: .75; | opacity: .75; | ||
| Line 684: | Line 720: | ||
} | } | ||
.mw-parser-output a. | /* Image links, such as the footer's "Powered by MediaWiki" badge, get no icon. */ | ||
.mw-parser-output a[target="_blank"]:has(img)::after, | |||
.mw-footer a[target="_blank"]:has(img)::after { | |||
display: none; | display: none; | ||
} | } | ||
Latest revision as of 02:54, 7 October 2026
/* 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);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
/* 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);
white-space: nowrap;
}
#pt-tpt-play a:hover {
background: var(--tpt-brand-sun);
}
/* Below 1280px the bar has no room for every website link: Game, Tools and Discord stay in the sidebar
(perfecttower2.com and Community), the Play button stays here. Below 1000px the user name and
watchlist move into the user menu, which Vector itself only does below 640px. */
@media screen and (max-width: 1279px) {
.vector-user-links-main #pt-tpt-game,
.vector-user-links-main #pt-tpt-tools,
.vector-user-links-main #pt-tpt-discord {
display: none;
}
}
@media screen and (max-width: 999px) {
.vector-user-links-main .user-links-collapsible-item:not(#pt-tpt-play) {
display: none;
}
.vector-user-menu .user-links-collapsible-item {
display: block;
}
}
/* ---------- 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 2022 is the only skin, so "Switch to old look" has nowhere to go. */
.vector-main-menu-action-opt-out {
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); }
/* 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[target="_blank"]::after {
margin-left: auto;
background-color: var(--tpt-ink-subtle);
opacity: 1;
}
/* ---------- 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;
}
/* ---------- 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 {
background-image: none;
padding-right: 0;
}
.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: "";
display: inline-block;
width: .72em;
height: .72em;
margin-left: .3em;
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;
}
/* Image links, such as the footer's "Powered by MediaWiki" badge, get no icon. */
.mw-parser-output a[target="_blank"]:has(img)::after,
.mw-footer a[target="_blank"]: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;
}