WikiSync: Sync from repository

2026-10-20T20:01:27Z

Sync from repository

New page

/* ==========================================================
PokeNexus Wiki
Vector 2022 visual theme

Vector owns:
- layout
- positioning
- responsive behaviour
- content widths
- menu pinning
- search/header geometry
- light/dark page surfaces

This stylesheet owns:
- PokeNexus brand colours
- typography
- logo theme variants
- small cosmetic details
========================================================== */

/* ----------------------------------------------------------
Fonts
---------------------------------------------------------- */

@font-face {
font-family: "Roboto";
src: url("/images/branding/fonts/Roboto-Regular.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "Roboto";
src: url("/images/branding/fonts/Roboto-Bold.ttf") format("truetype");
font-style: normal;
font-weight: 700;
font-display: swap;
}

@font-face {
font-family: "Roboto";
src: url("/images/branding/fonts/Roboto-Italic.ttf") format("truetype");
font-style: italic;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "Roboto";
src: url("/images/branding/fonts/Roboto-BoldItalic.ttf") format("truetype");
font-style: italic;
font-weight: 700;
font-display: swap;
}

/* ----------------------------------------------------------
PokeNexus design tokens — light/default
---------------------------------------------------------- */

:root {
--pn-brand: #15b8c4;
--pn-brand-strong: #007f89;
--pn-brand-hover: #006c75;

--pn-heading: #202122;
--pn-muted: #54595d;

--pn-rule: #c8c3ba;

--pn-font: "Roboto", Arial, sans-serif;
--pn-heading-font: "Roboto", Arial, sans-serif;
}

/* ----------------------------------------------------------
Explicit Vector dark mode
---------------------------------------------------------- */

html.skin-theme-clientpref-night {
--pn-brand: #35d4dd;
--pn-brand-strong: #35d4dd;
--pn-brand-hover: #6fe9ef;

--pn-heading: #f8f9fa;
--pn-muted: #c8ccd1;

--pn-rule: #54595d;
}

/* ----------------------------------------------------------
Vector automatic mode + dark OS preference
---------------------------------------------------------- */

@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--pn-brand: #35d4dd;
--pn-brand-strong: #35d4dd;
--pn-brand-hover: #6fe9ef;

--pn-heading: #f8f9fa;
--pn-muted: #c8ccd1;

--pn-rule: #54595d;
}
}

/* ==========================================================
Page typography
========================================================== */

/*
* Keep Vector's native body font.
* Only article titles/headings get the slightly more
* traditional wiki/editorial treatment.
*/

.skin-vector-2022 .mw-first-heading,
.skin-vector-2022 .mw-body h1,
.skin-vector-2022 .mw-body h2 {
color: var(--pn-heading);

font-family: var(--pn-heading-font);
}

body,
button,
input,
select,
textarea {
font-family: var(--pn-font);
}

/*
* H3+ stay in Vector's normal UI/body typeface.
* This prevents article pages from becoming overly decorative.
*/

/* ==========================================================
Heading rules
========================================================== */

.skin-vector-2022 .vector-page-titlebar,
.skin-vector-2022 .mw-body h2 {
border-color: var(--pn-rule);
}

/* ==========================================================
Article links
========================================================== */

/*
* Brand normal article links with an accessible darker cyan
* in light mode and brighter cyan in dark mode.
*/

.skin-vector-2022 .mw-body-content a:not(.new) {
color: var(--pn-brand-strong);
}

.skin-vector-2022 .mw-body-content a:not(.new):hover {
color: var(--pn-brand-hover);
}

/*
* Leave MediaWiki's missing-page red treatment alone.
*/

/* ==========================================================
Main navigation
========================================================== */

/*
* Cosmetic only.
* No menu dimensions or positioning are changed.
*/

.skin-vector-2022 .vector-main-menu .vector-menu-heading {
color: var(--pn-muted);

font-size: 0.75rem;
font-weight: 700;

letter-spacing: 0.06em;

text-transform: uppercase;
}

/*
* Give sidebar links a subtle PokeNexus accent on hover without
* replacing Vector's own menu behaviour.
*/

.skin-vector-2022 .vector-main-menu .mw-list-item > a:hover {
color: var(--pn-brand-strong);
}

/* ==========================================================
Table of contents
========================================================== */

.skin-vector-2022 .vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: var(--pn-brand-strong);
}

/* ==========================================================
Search
========================================================== */

/*
* Keep Codex/Vector's search component completely intact.
* Only brand its focused border.
*/

.skin-vector-2022 .vector-search-box .cdx-text-input__input:focus {
border-color: var(--pn-brand-strong);
}

/* ==========================================================
Selection
========================================================== */

.skin-vector-2022 ::selection {
background: color-mix(in srgb, var(--pn-brand) 28%, transparent);
}

/* ==========================================================
PokeNexus — Article typography
========================================================== */

/* ----------------------------------------------------------
Page title
---------------------------------------------------------- */

#firstHeading {
color: var(--pn-heading);

font-family: var(--pn-font, "Roboto", Arial, sans-serif);
font-size: 1.85rem;
font-weight: 700;

line-height: 1.15;
letter-spacing: -0.025em;
}

/* ----------------------------------------------------------
Article body
---------------------------------------------------------- */

.mw-body-content {
color: var(--color-base);
font-family: var(--pn-font, "Roboto", Arial, sans-serif);
font-size: 0.9rem;
line-height: 1.6;
}

/* ----------------------------------------------------------
Level 2 section headings
---------------------------------------------------------- */

.mw-parser-output .mw-heading2 {
margin-block: 1.75rem 0.65rem;
padding-block-end: 0.35rem;

border-bottom: 1px solid var(--pn-light-border-subtle, #cbbda8);
}

.mw-parser-output .mw-heading2 h2 {
margin: 0;
padding: 0;

color: var(--pn-heading);

font-family: var(--pn-font, "Roboto", Arial, sans-serif);
font-size: 1.3rem;
font-weight: 700;

line-height: 1.25;
letter-spacing: -0.015em;
}

/* Keep section-edit links visually secondary */

.mw-parser-output .mw-heading2 .mw-editsection {
margin-inline-start: 0.6rem;

color: var(--pn-muted);

font-size: 0.75rem;
font-weight: 400;
}

/* ==========================================================
PokeNexus — Article heading icons
========================================================== */

.mw-parser-output .mw-heading2 h2 {
padding-inline-start: 1.8rem;

background-repeat: no-repeat;
background-position: left center;
background-size: 1.4rem;
}

/* Obtaining */
.mw-parser-output #Obtaining {
background-image: url("/images/branding/icons/section-heading-obtaining.svg");
}

/* Notes */
.mw-parser-output #Notes {
background-image: url("/images/branding/icons/section-heading-notes.svg");
}

/* Strategy */
.mw-parser-output #Strategy {
background-image: url("/images/branding/icons/section-heading-strategy.svg");
}

.mw-parser-output #Item_categories {
background-image: url("/images/branding/icons/section-heading-description.svg");
}

.mw-parser-output #All_items {
background-image: url("/images/branding/icons/section-heading-notes.svg");
}

/* ----------------------------------------------------------
Lower-level headings
---------------------------------------------------------- */

.mw-parser-output .mw-heading3 h3 {
color: var(--pn-heading);

font-family: var(--pn-font, "Roboto", Arial, sans-serif);
font-size: 1.2rem;
font-weight: 700;

line-height: 1.3;
}

.mw-parser-output .mw-heading4 h4 {
color: var(--pn-heading);

font-family: var(--pn-font, "Roboto", Arial, sans-serif);
font-size: 1.05rem;
font-weight: 700;

line-height: 1.35;
}

/* ==========================================================
PokeNexus — Vector main sidebar
========================================================== */

/* ----------------------------------------------------------
Main menu header
---------------------------------------------------------- */

.skin-vector-2022 .vector-main-menu .vector-pinnable-header-label {
color: var(--color-emphasized);

font-size: 0.95rem;
font-weight: 700;
}

.skin-vector-2022 .vector-main-menu .vector-pinnable-header {
padding-block-end: 0.45rem;

border-bottom: 1px solid var(--border-color-subtle);
}

/* Keep Vector's native hide/pin control, just soften it */

.skin-vector-2022 .vector-main-menu .vector-pinnable-header-toggle-button {
color: var(--color-subtle);

background-color: var(--background-color-interactive-subtle);

border-radius: 0.2rem;
}

/* ----------------------------------------------------------
Menu section headings
---------------------------------------------------------- */

.skin-vector-2022 .vector-main-menu .vector-menu-heading {
margin-block: 0.9rem 0.3rem;
padding-block-end: 0.25rem;

color: var(--color-subtle);

border-bottom: 1px solid var(--border-color-muted);

font-size: 0.75rem;
font-weight: 700;

letter-spacing: 0.055em;
}

/* ----------------------------------------------------------
Navigation links
---------------------------------------------------------- */

.skin-vector-2022 .vector-main-menu .mw-list-item > a {
display: block;

margin-block: 0.08rem;
padding: 0.32rem 0.45rem;

color: var(--color-progressive);

border-radius: 0.3rem;

line-height: 1.35;

transition:
background-color 120ms ease,
color 120ms ease;
}

.skin-vector-2022 .vector-main-menu .mw-list-item > a:hover {
color: var(--color-progressive--hover);

background-color: var(--background-color-interactive-subtle);

text-decoration: none;
}

/* ----------------------------------------------------------
Current page
---------------------------------------------------------- */

.skin-vector-2022 .vector-main-menu .mw-list-item.selected > a,
.skin-vector-2022 .vector-main-menu .mw-list-item > a[aria-current="page"] {
color: var(--color-emphasized);

background-color: var(--background-color-interactive);

font-weight: 700;
}

/* Small brand accent on the active page */

.skin-vector-2022 .vector-main-menu .mw-list-item.selected > a,
.skin-vector-2022 .vector-main-menu .mw-list-item > a[aria-current="page"] {
box-shadow: inset 3px 0 0 var(--pn-brand-strong);
}

/* ==========================================================
PokeNexus — Vector header / search
========================================================== */

/* ----------------------------------------------------------
Search shell
---------------------------------------------------------- */

.skin-vector-2022 .vector-search-box .cdx-search-input--has-end-button {
background-color: var(--pn-surface);

border-color: var(--pn-border);

border-radius: 0.35rem;
}

/* ----------------------------------------------------------
Search input
---------------------------------------------------------- */

.skin-vector-2022 .vector-search-box .cdx-text-input__input {
background-color: var(--pn-surface);
color: var(--color-base);

border-color: var(--pn-border);

font-family: "Roboto", Arial, sans-serif;
}

.skin-vector-2022 .vector-search-box .cdx-text-input__input::placeholder {
color: var(--color-subtle);
}

.skin-vector-2022 .vector-search-box .cdx-text-input__input:hover {
border-color: var(--pn-light-border-subtle);
}

.skin-vector-2022 .vector-search-box .cdx-text-input__input:focus {
border-color: var(--pn-brand-strong);

box-shadow: inset 0 0 0 1px var(--pn-brand-strong);

outline: 0;
}

/* Header search result thumbnails.
Keep small game sprites at their native visual size. */

.vector-search-box .cdx-thumbnail__image {
background-size: 22px 22px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}

/* ----------------------------------------------------------
Search button
---------------------------------------------------------- */

.skin-vector-2022 .vector-search-box .cdx-search-input__end-button.cdx-button {
background-color: var(--pn-panel);
color: var(--color-emphasized);

border-color: var(--pn-border);

font-weight: 700;
}

.skin-vector-2022
.vector-search-box
.cdx-search-input__end-button.cdx-button:hover {
background-color: var(--pn-panel-strong);
color: var(--color-emphasized);

border-color: var(--pn-border);
}

.skin-vector-2022
.vector-search-box
.cdx-search-input__end-button.cdx-button:active {
background-color: var(--pn-light-panel-active);
}

/* ----------------------------------------------------------
Header separation
---------------------------------------------------------- */

.skin-vector-2022 .vector-header-container {
border-bottom-color: var(--border-color-muted);
}

/* ==========================================================
PokeNexus — Categories
========================================================== */

.skin-vector-2022 #catlinks {
margin-block-start: 1.75rem;
padding: 0.65rem 0.85rem;

background-color: var(--background-color-neutral-subtle);

border: 1px solid var(--border-color-subtle);
border-radius: 0.4rem;

color: var(--color-subtle);

font-size: 0.875rem;
line-height: 1.4;
}

/* Category label */

.skin-vector-2022 #catlinks .mw-normal-catlinks > a:first-child {
color: var(--color-emphasized);

font-weight: 700;

text-decoration: none;
}

/* Category list */

.skin-vector-2022 #catlinks ul {
display: inline;

margin: 0;
padding: 0;
}

.skin-vector-2022 #catlinks li {
display: inline;

margin: 0;
padding: 0;
}

/* Warm separators between categories */

.skin-vector-2022 #catlinks li + li::before {
content: "·";

margin-inline: 0.55rem;

color: var(--color-subtle);
}

/* Category links */

.skin-vector-2022 #catlinks li > a {
color: var(--pn-brand-strong);

text-decoration: none;
}

.skin-vector-2022 #catlinks li > a:hover {
color: var(--pn-brand-hover);

text-decoration: underline;
}

.skin-vector-2022 #catlinks li {
border-left: 0;
}

/* ==========================================================
PokeNexus — Parchment Taupe light theme
========================================================== */

/*
* Raw light-theme palette.
*
* These are deliberately separate from the semantic variables
* used throughout the site so the palette has one source of truth.
*/

:root {
--pn-light-page-bg: #e9e1d3;
--pn-light-surface: #f7f1e7;

--pn-light-panel-subtle: #eee6d8;
--pn-light-panel: #e0d6c4;
--pn-light-panel-strong: #d4c7b2;
--pn-light-panel-active: #c8b89f;

--pn-light-border: #b29f86;
--pn-light-border-subtle: #cbbda8;
--pn-light-border-muted: #ddd2c1;

--pn-light-text: #312b25;
--pn-light-text-emphasized: #211d19;
--pn-light-text-neutral: #554d43;
--pn-light-text-muted: #756a5b;

--pn-light-brand: #19b5c2;
--pn-light-brand-strong: #0b7f88;
--pn-light-brand-hover: #086a72;
--pn-light-brand-active: #06565d;
}

/* ==========================================================
Explicit light appearance
========================================================== */

html.skin-theme-clientpref-day,
html:not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) {
--pn-page-bg: var(--pn-light-page-bg);
--pn-surface: var(--pn-light-surface);
--pn-panel: var(--pn-light-panel);
--pn-panel-strong: var(--pn-light-panel-strong);

--pn-border: var(--pn-light-border);

--pn-heading: var(--pn-light-text);
--pn-muted: var(--pn-light-text-muted);

--pn-brand: var(--pn-light-brand);
--pn-brand-strong: var(--pn-light-brand-strong);
--pn-brand-hover: var(--pn-light-brand-hover);

/* MediaWiki / Codex semantic tokens */

--background-color-base: var(--pn-light-surface);

--background-color-neutral: var(--pn-light-panel);
--background-color-neutral-subtle: var(--pn-light-panel-subtle);

--background-color-interactive: var(--pn-light-panel);
--background-color-interactive--hover: var(--pn-light-panel-strong);
--background-color-interactive--active: var(--pn-light-panel-active);

--background-color-interactive-subtle: var(--pn-light-panel-subtle);
--background-color-interactive-subtle--hover: var(--pn-light-panel);
--background-color-interactive-subtle--active: var(--pn-light-panel-strong);

--color-base: var(--pn-light-text);
--color-emphasized: var(--pn-light-text-emphasized);
--color-neutral: var(--pn-light-text-neutral);
--color-subtle: var(--pn-light-text-muted);

--color-progressive: var(--pn-light-brand-strong);
--color-progressive--hover: var(--pn-light-brand-hover);
--color-progressive--active: var(--pn-light-brand-active);

--color-link: var(--pn-light-brand-strong);
--color-link--hover: var(--pn-light-brand-hover);
--color-link--active: var(--pn-light-brand-active);

--border-color-base: var(--pn-light-border);
--border-color-subtle: var(--pn-light-border-subtle);
--border-color-muted: var(--pn-light-border-muted);
--border-color-divider: var(--pn-light-border);
}

/* Outer page canvas */

html.skin-theme-clientpref-day body,
html:not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os) body {
background-color: var(--pn-page-bg);
color: var(--pn-heading);
}

/* Main Vector surfaces */

html.skin-theme-clientpref-day .mw-page-container,
html:not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os)
.mw-page-container,
html.skin-theme-clientpref-day .vector-header-container .mw-header,
html:not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os)
.vector-header-container
.mw-header,
html.skin-theme-clientpref-day .vector-header-container .vector-sticky-header,
html:not(.skin-theme-clientpref-night):not(.skin-theme-clientpref-os)
.vector-header-container
.vector-sticky-header {
background-color: var(--pn-surface);
}

/* ==========================================================
Automatic appearance — OS currently in light mode
========================================================== */

@media screen and (prefers-color-scheme: light) {
html.skin-theme-clientpref-os {
--pn-page-bg: var(--pn-light-page-bg);
--pn-surface: var(--pn-light-surface);
--pn-panel: var(--pn-light-panel);
--pn-panel-strong: var(--pn-light-panel-strong);

--pn-border: var(--pn-light-border);

--pn-heading: var(--pn-light-text);
--pn-muted: var(--pn-light-text-muted);

--pn-brand: var(--pn-light-brand);
--pn-brand-strong: var(--pn-light-brand-strong);
--pn-brand-hover: var(--pn-light-brand-hover);

--background-color-base: var(--pn-light-surface);

--background-color-neutral: var(--pn-light-panel);
--background-color-neutral-subtle: var(--pn-light-panel-subtle);

--background-color-interactive: var(--pn-light-panel);
--background-color-interactive--hover: var(--pn-light-panel-strong);
--background-color-interactive--active: var(--pn-light-panel-active);

--background-color-interactive-subtle: var(--pn-light-panel-subtle);
--background-color-interactive-subtle--hover: var(--pn-light-panel);
--background-color-interactive-subtle--active: var(--pn-light-panel-strong);

--color-base: var(--pn-light-text);
--color-emphasized: var(--pn-light-text-emphasized);
--color-neutral: var(--pn-light-text-neutral);
--color-subtle: var(--pn-light-text-muted);

--color-progressive: var(--pn-light-brand-strong);
--color-progressive--hover: var(--pn-light-brand-hover);
--color-progressive--active: var(--pn-light-brand-active);

--color-link: var(--pn-light-brand-strong);
--color-link--hover: var(--pn-light-brand-hover);
--color-link--active: var(--pn-light-brand-active);

--border-color-base: var(--pn-light-border);
--border-color-subtle: var(--pn-light-border-subtle);
--border-color-muted: var(--pn-light-border-muted);
--border-color-divider: var(--pn-light-border);
}

html.skin-theme-clientpref-os body {
background-color: var(--pn-page-bg);
color: var(--pn-heading);
}

html.skin-theme-clientpref-os .mw-page-container,
html.skin-theme-clientpref-os .vector-header-container .mw-header,
html.skin-theme-clientpref-os .vector-header-container .vector-sticky-header {
background-color: var(--pn-surface);
}
}

MediaWiki:Vector-2022.css - Revision history

WikiSync: Sync from repository