MediaWiki:Common.css

/* The look of the game's print UI kit: paper plates with an ink keyline and a hard shadow,
   on the dark dotted ground of the full-screen menus. Colours and type come from the kit's tokens. */

@font-face {
  font-family: Archivo;
  src: url(/static/fonts/Archivo-Variable.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: "Barlow Condensed"; src: url(/static/fonts/BarlowCondensed-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/static/fonts/BarlowCondensed-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/static/fonts/BarlowCondensed-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/static/fonts/BarlowCondensed-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --gw-paper: #F6F0DE;
  --gw-paper-inset: #FBF7E9;
  --gw-mat: #E7DFC8;
  --gw-rule: #E2DAC2;
  --gw-ink: #17150F;
  --gw-ink-2: #5A5344;
  --gw-ink-3: #8A8272;
  --gw-on-ink: #F6F0DE;
  --gw-on-ink-2: #B3AB98;
  --gw-flare: #C9501A;
  --gw-signal: #B3302C;
  --gw-ground: #26261F;
  --gw-shadow-dark: #4A4A3F;
  --gw-font-display: Archivo, system-ui, sans-serif;
  --gw-font-label: "Barlow Condensed", system-ui, sans-serif;

  /* The skin reads its colours from these. */
  --background-color-base: var(--gw-paper);
  --background-color-neutral: var(--gw-mat);
  --background-color-neutral-subtle: var(--gw-paper-inset);
  --background-color-interactive: var(--gw-mat);
  --background-color-interactive-subtle: var(--gw-paper-inset);
  --color-base: var(--gw-ink);
  --color-emphasized: var(--gw-ink);
  --color-subtle: var(--gw-ink-2);
  --color-placeholder: var(--gw-ink-3);
  --color-progressive: var(--gw-flare);
  --color-progressive--hover: #A8410F;
  --color-progressive--active: #8A340B;
  --color-visited: #9A4318;
  --color-destructive: var(--gw-signal);
  --color-link-red: var(--gw-signal);
  --color-link-red--hover: var(--gw-signal);
  --border-color-base: var(--gw-ink);
  --border-color-subtle: var(--gw-rule);
  --border-color-muted: var(--gw-rule);
  --border-color-interactive: var(--gw-ink);
  --border-color-progressive: var(--gw-flare);
}

html,
body {
  background-color: var(--gw-ground);
  background-image: radial-gradient(rgba(246, 240, 222, 0.11) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
}

body {
  font-family: var(--gw-font-display);
  font-stretch: 100%;
}

/* The header sits on the ground, so its type and fields are the light-on-ink set. */
.vector-header-container {
  background: transparent;
  --background-color-base: var(--gw-ink);
  --background-color-interactive: #2E2B22;
  --background-color-interactive-subtle: #2E2B22;
  --background-color-neutral-subtle: var(--gw-ink);
  --color-base: var(--gw-on-ink);
  --color-emphasized: var(--gw-on-ink);
  --color-subtle: var(--gw-on-ink-2);
  --color-placeholder: var(--gw-on-ink-2);
  --color-progressive: #F0A64A;
  --color-progressive--hover: #FFC073;
  --color-visited: #F0A64A;
  --border-color-base: var(--gw-on-ink-2);
  --border-color-interactive: var(--gw-on-ink-2);
  --border-color-subtle: #3A372C;
}
.vector-header-container .mw-header {
  background: transparent;
  color: var(--gw-on-ink);
}
.mw-logo-icon {
  display: none;
}

.mw-page-container {
  margin-top: 6px;
  margin-bottom: 40px;
  border: 3px solid var(--gw-ink);
  box-shadow: -7px 7px 0 var(--gw-shadow-dark);
}

.mw-body h1,
.mw-body .mw-heading1,
.mw-body h2,
.mw-body .mw-heading2,
.mw-body h3,
.mw-body h4,
.mw-first-heading {
  font-family: var(--gw-font-display);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.08;
}
.mw-body h2,
.mw-body .mw-heading2 {
  border-bottom: 3px solid var(--gw-ink);
}
.mw-body h3 {
  font-size: 1.05em;
}

/* Labels: the kit sets every small caption in Barlow Condensed capitals. */
.vector-menu-heading,
.vector-pinnable-header-label,
.vector-menu-tabs .mw-list-item a,
.vector-toc .vector-toc-title,
.wikitable > * > tr > th,
.gw-infobox th,
.catlinks {
  font-family: var(--gw-font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.wikitable {
  background: var(--gw-paper-inset);
  color: var(--gw-ink);
  border: 3px solid var(--gw-ink);
}
.wikitable > * > tr > th,
.wikitable > * > tr > td {
  border: 2px solid var(--gw-rule);
  padding: 0.35em 0.7em;
}
.wikitable > * > tr > th {
  background: var(--gw-ink);
  color: var(--gw-on-ink);
  border-color: var(--gw-ink);
  font-size: 1.05em;
}

.catlinks {
  background: var(--gw-paper-inset);
  border: 2px solid var(--gw-rule);
}

.gw-infobox {
  float: right;
  clear: right;
  width: 300px;
  margin: 0 0 1.4em 1.4em;
  background: var(--gw-paper-inset);
  color: var(--gw-ink);
  border: 3px solid var(--gw-ink);
  box-shadow: -6px 6px 0 var(--gw-ink);
  border-collapse: collapse;
  font-size: 0.9em;
}
.gw-infobox th,
.gw-infobox td {
  padding: 0.4em 0.7em;
  border-top: 2px solid var(--gw-rule);
  vertical-align: top;
  text-align: left;
}
.gw-infobox th {
  color: var(--gw-ink-2);
  white-space: nowrap;
}
.gw-infobox th[colspan="2"] {
  background: var(--gw-flare);
  color: var(--gw-on-ink);
  border-top: 0;
  border-bottom: 3px solid var(--gw-ink);
  font-family: var(--gw-font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.15em;
  letter-spacing: 0.03em;
  white-space: normal;
}
.gw-infobox .gw-infobox-icon,
.gw-infobox .gw-infobox-demo {
  text-align: center;
}

.gw-demo {
  display: inline-block;
  /* The left margin keeps the shadow off the word in front of the label. */
  margin-left: 0.5em;
  padding: 0.05em 0.5em;
  background: var(--gw-flare);
  color: var(--gw-on-ink);
  border: 2px solid var(--gw-ink);
  box-shadow: -3px 3px 0 var(--gw-ink);
  font-family: var(--gw-font-label);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .gw-infobox {
    float: none;
    width: auto;
    margin: 0 0 1.4em 6px;
  }
}