Jump to content

MediaWiki:Vector-2022.css

From PokeNexus Wiki

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.
/* ==========================================================
   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);
  }
}
Retrieved from "https://wiki.poke-nexus.com/index.php?title=MediaWiki:Vector-2022.css&oldid=20"