MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(88 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/**
* CSS placed here will be applied to all skins
*/
.plainlist ul {
list-style: none;
margin: 0;
}
 
.dotlist ul {
  list-style-type: none;
  margin-left: 0;
}
 
.dotlist ul > li {
  display: inline;
}
 
.dotlist ul > li::after {
  font-weight: bold;
  content: ' · ';
  white-space: nowrap;
}
 
.dotlist ul > li:last-of-type::after {
  display: none;
}
 
[class^="infobox"] .dotlist ul {
  margin: 0;
}


.plainlist > ul {
.skin-vector-2022 .floatright,
list-style-type: none;
.skin-vector-2022 .floatleft {
padding-left: 0;
    margin: 0;
}
}


/* undoing Citizen having all the padding on the right for some reason */
.skin-vector-2022 .mw-page-container {
min-width: auto;
}


.skin-citizen table.wikitable tr td,
@media ( min-width: 800px ) {
.skin-citizen table.wikitable tr th {
.skin-vector-2022 .floatright {
   padding: 10px 5px;
float: right;
clear: right;
margin-left: 1em;
}
.skin-vector-2022 .floatleft {
float: left;
clear: left;
margin-right: 1em;
}
}
.client-js table.mw-collapsible:not(.mw-made-collapsible) > caption:first-child::after {
   /**
    * Dunno why this is set to `display: block` elsewhere; it causes a flash
    * of reflowed content once the .mw-made-collapsible gets added.
    */
  display: inline;
}
}


/*
.skin-citizen-dark .mw-highlight {
* Colors are from https://www.hsluv.org/ color space
  background: var(--background-color-framed);
*
}
* Light mode bg: hsluv(0, 0, 100)
* Dark mode bg: hsluv(0, 0, 5)
*
* == hue
* red    12
* yellow 65
* green  120
* blue  240
*
* == saturation
* base  100
* muddy  50
*
* == lightness
* base  80
* {n}    100 - {n}
*
* == lightness (dark mode)
* base  25
* {n}    5 + {n}
*/
   
   
:root {
.mw-logo-icon,
  --blue-muddy-05: #ecf1f8;
.mw-wiki-logo {
   --yellow: #efc200;
   /**
  --green: #6de000;
    * Chrome downscaling makes the logo blurry. This makes it use a 3D
   --red: #ffb3b3;
    * accelerated downscaling algorithm which seems to do better.
    */
   transform: translateZ(0);
}
}


@media (prefers-color-scheme: dark) {
.wavu-logo {
   :root {
   background-image: url(/w/skins/Tekken/wavu-logo-v3.svg);
      --blue-muddy-05: #121d26;
   background-size: contain;
      --yellow: #493a00;
      --green: #1c4400;
      --red: #7e0002;
   }
 
  body.skin-citizen {
      background-color: #111111;
  }
}
}


.bg-green { background-color: var(--green); }
sup,
.bg-red { background-color: var(--red); }
sub {
.bg-yellow { background-color: var(--yellow); }
  line-height: 1;
}


/* first movedata style */
* + .mediaContainer {
.movedata {
  margin-top: 0.5em;
  display: grid;
  grid-template-columns: 18% 12% repeat(3, 12%) 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  border-width: 1px 0;
  border-style: solid;
  border-color: #888;
  padding: 0.2em 0;
  grid-gap: 0 0.2em;
  grid-template-areas:
    "input damage block  hit  ch  notes"
    "input target startup crush recv notes";
}
}


.movedata p {
.skin-citizen #footer-icons a { transition: filter 0.2s; }
  margin: 0;
.skin-citizen #footer-icons a:hover { filter: brightness(140%); }
 
.mw-gallery-nolines .gallerytext {
  text-align: start !important;
  padding-right: 5px !important;
}
}


.movedata {
.toc ul {
  margin-top: 1em;
  scrollbar-width: thin;
  text-align: center;
}
.toc ul::-webkit-scrollbar {
  width: 0.5em;
}
.toc ul::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.skin-citizen-dark
.toc ul::-webkit-scrollbar-thumb {
  background-color: #777;
}
}


.movedata + .movedata {
/**
  margin-top: -1px;
* SVG background-image for templates since this doesn't pass the css-sanitizer
*/
 
/* Template:Combolist */
.combolist > dl > dd::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1240 2480' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='translate(-180 2080)'%3E%3Cpath stroke='%23111' fill='%23111' stroke-opacity='0.45' stroke-width='2' d=' M 365,-813 Q 365,-702 393,-623 Q 422,-545 477,-495 Q 533,-446 615,-423 Q 697,-401 803,-401 L 1155,-401 L 1032,-520 L 1032,-668 L 1352,-336 L 1352,-332 L 1032,0 L 1032,-147 L 1157,-268 L 799,-268 Q 690,-268 587,-294 Q 485,-320 406,-382 Q 327,-445 279,-549 Q 231,-654 231,-811 L 231,-1120 L 365,-1120 L 365,-813 Z '/%3E%3C/g%3E%3C/svg%3E%0A");
}
.skin-citizen-dark .combolist > dl > dd::before {
  filter: invert(100%);
}
.combolist > dl,
.changelist > dl,
.binlist > dl,
.combolist > dl > dd,
.changelist > dl > dd,
.binlist > dl > dd {
  display: inline-block;
  /**
    * prefixed width values that don't pass the sanitizer
    *
    * This is the only way to ensure that the deflists don't span multiple
    * columns, as break-inside: avoid isn't super strict.
    *
    * Applying to the <dd> also because the svg icons need a new block context
    * to be absolutely positioned. Because their parent is inline-block, they
    * can't be a regular block I guess?
    **/
  width: -moz-available;
  width: -webkit-fill-available;
}
}


.movedata:hover {
.fill-available {
  background-color: var(--blue-muddy-05);
  width: -moz-available;
  width: -webkit-fill-available;
}
}


.movedata-input-ctn { grid-area: input; }
/* Template::Tt */
.movedata-name { grid-area: name; }
.movedata-startup-ctn { grid-area: startup; }
.movedata-damage-ctn { grid-area: damage; }
.movedata-target-ctn {  grid-area: target; }
.movedata-block { grid-area: block; }
.movedata-hit { grid-area: hit; }
.movedata-ch { grid-area: ch; }
.movedata-clean { grid-area: clean; }
.movedata-crush { grid-area: crush; }
.movedata-recv { grid-area: recv; }
.movedata-range { grid-area: range; }
.movedata-notes { grid-area: notes; }


.movedata-input-ctn {
.tooltip-label {
  font-size: 1.7em;
text-decoration: underline dotted;
  padding-left: 0.2em;
cursor: pointer;
  text-align: start;
display: inline;
}
}


.movedata-damage-ctn { align-self: end; }
.tooltip-hr {
.movedata-target-ctn { align-self: start; }
display: block;
height: 1px;
width: 100%;
background-color: var(--border-color-base--darker);
margin: var(--space-xs) 0;
}


.movedata-startup-ctn,
.tippy-box {
.movedata-crush,
background-color: var(--color-surface-1);
.movedata-recv {
border: 1px solid #777;
  align-self: start;
border-radius: var(--border-radius--small);
color: var(--color-base);
outline: 0;
padding: var(--space-xs);
text-align: start;
text-indent: 0;
}
}


.movedata-hit,
/* svg icons for patch notes */
.movedata-block,
 
.movedata-ch {
.buff,
  align-self: end;
.nerf,
.unclear,
.new-move {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: text-bottom;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}
}


.movedata-damageLead,
.nerf {
.movedata-targetLead,
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
.movedata-inputLead {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
  opacity: .3;
  background-color: var(--red);
}
}


.movedata-clean,
.buff {
.movedata-name,
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3Crect x='44' y='20' width='12' height='60' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
.movedata-range,
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3Crect x='44' y='20' width='12' height='60' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
.movedata-startupLead {
  background-color: var(--blue);
  display: none;
}
}


.movedata:before {
.unclear {
  content: " ";
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpath d='M20,40 Q35,30 50,40 65,50 80,40' stroke='black' stroke-width='10px'/%3E%3Cpath d='M20,60 Q35,50 50,60 65,70 80,60' stroke='black' stroke-width='10px'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
  display: block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpath d='M20,40 Q35,30 50,40 65,50 80,40' stroke='black' stroke-width='10px'/%3E%3Cpath d='M20,60 Q35,50 50,60 65,70 80,60' stroke='black' stroke-width='10px'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
  height: 0px;
  background-color: var(--grey);
  width: 100%;
  grid-column: 3 / span 3;
  grid-row: 1;
  align-self: end;
  border-bottom: 1px dotted grey;
}
}


.movedata-notes {
.new-move {
  align-self: stretch;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpolygon points='41 20, 59 20, 56 60, 44 60' fill='black'/%3E%3Ccircle cx='50' cy='75' r='9' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
  line-height: initial;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpolygon points='41 20, 59 20, 56 60, 44 60' fill='black'/%3E%3Ccircle cx='50' cy='75' r='9' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
  text-align: start;
  background-color: var(--purple);
  border-left: 1px solid #888;
  padding: 0 0.2em;
}
}


.movedata-input-ctn  {
/* clip-path not allowed elsewhere */
  display: flex;
 
  flex-flow: row nowrap;
.char-select-t8-img a {
  background-image: linear-gradient( to right, var(--color-link) 0, var(--color-link) 100% );
  clip-path: path('M 0 87 L 5,15 L 20,1 L 72,1 L 67,73 L 53,87 Z');
}
}


.movedata-input-ctn,
/* helper classes to change alignment of columns in table */
.movedata-target-ctn,
 
.movedata-damage-ctn {
.valign-middle td,
  word-break: break-word;
.valign-middle th {
  vertical-align: middle;
}
}


.movedata-input-ctn:after {
.col-1-start tr > :nth-child(1) { text-align: start; }
  content: "";
.col-2-start tr > :nth-child(2) { text-align: start; }
  align-self: center;
.col-3-start tr > :nth-child(3) { text-align: start; }
  flex-basis: 0px;
.col-4-start tr > :nth-child(4) { text-align: start; }
  flex-grow: 1;
.col-5-start tr > :nth-child(5) { text-align: start; }
  margin-left: 0.2em;
.col-6-start tr > :nth-child(6) { text-align: start; }
  border-top: 1px solid #888;
.col-7-start tr > :nth-child(7) { text-align: start; }
.col-8-start tr > :nth-child(8) { text-align: start; }
.col-9-start tr > :nth-child(9) { text-align: start; }
 
.col-1-center tr > :nth-child(1) { text-align: center; }
.col-2-center tr > :nth-child(2) { text-align: center; }
.col-3-center tr > :nth-child(3) { text-align: center; }
.col-4-center tr > :nth-child(4) { text-align: center; }
.col-5-center tr > :nth-child(5) { text-align: center; }
.col-6-center tr > :nth-child(6) { text-align: center; }
.col-7-center tr > :nth-child(7) { text-align: center; }
.col-8-center tr > :nth-child(8) { text-align: center; }
.col-9-center tr > :nth-child(9) { text-align: center; }
 
.col-1-end tr > :nth-child(1) { text-align: end; }
.col-2-end tr > :nth-child(2) { text-align: end; }
.col-3-end tr > :nth-child(3) { text-align: end; }
.col-4-end tr > :nth-child(4) { text-align: end; }
.col-5-end tr > :nth-child(5) { text-align: end; }
.col-6-end tr > :nth-child(6) { text-align: end; }
.col-7-end tr > :nth-child(7) { text-align: end; }
.col-8-end tr > :nth-child(8) { text-align: end; }
.col-9-end tr > :nth-child(9) { text-align: end; }
 
/**
* overwrite some .wikitable rules
*
* .punishers is basically the same except center-aligned
* and the heading has a blue border instead of grey
* and the cell borders are on top instead of bottom,
* so the last row doesn't have a border on the bottom
*/
 
table.wikitable tr:hover {
  background-color: inherit;
}
}


@media (max-width: 600px) {
.punishers {
  .movedata {
  border-collapse: collapse;
    grid-template-areas:
  text-align: center;
      "input input input input"
      "damage block hit ch"
      "target startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 1fr repeat(3, 25%);
    border: none;
  }
 
  .movedata:before {
    grid-row: 2;
    grid-column: 2 / -1;
  }
 
  .movedata-notes {
    text-align: end;
    border: none;
  }
}
}
 
 
.movedata-range:empty:after {
.punishers td,
  content: "N/A";
.punishers th,
  visibility: hidden;
table.wikitable tr td,
table.wikitable tr th {
  padding: 0.2em 0.4em;
}
}


.movedata-name {
.punishers th,
  text-align: start;
.punishers td {
  font-size: 0.75em;
  border-color: var(--border-color-base);
  border-style: solid;
  border-width: 1px 0 0 0;
}
}


/* add name and range to movedata */
.wikitable-heading,
.movelist-nr .movedata-range,
.table-cat {
.movelist-nr .movedata-name {
  width:100vw;
  display: initial;
  text-align:center;
  font-size:1.15em;
}
}


.movelist-nr .movedata {
table.wikitable .wikitable-heading,
  grid-template-areas:
table.wikitable .table-cat {
    "name name name name name notes"
  border-color: var(--grey);
    "input damage block hit ch notes"
    "input damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "input range startup crush recv notes"
    "input range startup crush recv notes";
  grid-template-rows: repeat(7, auto);
}
}


.movelist-nr .movedata-target-ctn { align-self: center; }
.punishers .wikitable-heading,
.movelist-nr .movedata-range { align-self: start; }
.punishers .table-cat {
  border-color: var(--blue-30);
  border-width: 0 0 1px 0;
}


.movelist-nr .movedata:before {
tr:not(:first-child) .table-cat,
  grid-row: 2 / 5;
tr:not(:first-child) .wikitable-heading {
  padding-top: 0.5em;
}
}


/* add name and range, name above frame data */
/* font based on in-game Tekken symbols */
.movelist-nuf .movedata {
 
  grid-template-rows: repeat(3, auto);
@font-face {
  grid-template-areas:
  font-family: IronFist;
    "input damage name name name notes"
  src: url('/w/skins/Tekken/Iron-Fist.woff');
    "input target block hit ch notes"
  font-weight: normal;
    "input range startup crush recv notes";
  font-style: normal;
  font-display: block;
}
}


.movelist-nuf .movedata:before {
.ironfist {
   grid-row: 2 / 3;
   font-family: IronFist;
}
}


.movelist-nuf .movedata-range,
/**
.movelist-nuf .movedata-name {
* Colors intended for figures use HSV color space, as it's more vibrant, and
  display: initial;
* uniform perceived lightness isn't essential since the lightness is fixed and
* values of S and V are chosen such that contrast remains good.
*
* == hues ==
* red 0
* orange 30
* yellow 60
* green 120
* teal 160
* blue 200
* purple 290
*
* Colors with a number use https://www.hsluv.org/ color space
*
* Light mode bg: hsluv(0, 0, 100)
* Dark mode bg: hsluv(0, 0, 5)
*
* == hue
* blue 250
* purple 270
*
* == saturation
* 100
* grey 0
*
* == lightness
* 100 - {n}
*
* == lightness (dark mode)
* 5 + {n}
*/
:root {
  --p0: #1f7303;
  --p1: #0664b3;
  --p2: #a83652;
  --black-border: black;
 
  --white: white;
 
  --grey-03: #f3f3f3;
  --blue-05: #eaf1ff;
  --blue-15: #bfd5ff;
  --blue-30: #71adff;
  --purple-30: #ac9fff;
 
  /* HSV S=30 V=100 */
  --red: #ffb3b3;
  --orange: #ffd9b3;
  --yellow: #ffffb3;
  --green: #b3ffb3;
  --teal: #b3ffe6;
  --blue: #b3e5ff;
  --purple: #d9b3ff;
 
  --grey: #888;
}
}


.movelist-nuf .movedata-target-ctn { align-self: center; }
.skin-citizen-dark:root {
.movelist-nuf .movedata-range { align-self: start; }
  --p0: #3cc50a;
 
  --p1: #7faefe;
@media (max-width: 600px) {
  --p2: #f88a9d;
  .movelist-nuf .movedata {
  --black-border: #aaa;
    grid-template-areas:
 
      "input input input input"
  --white: var(--color-surface-0);
      "damage name name name"
 
      "target block hit ch"
  --grey-03: #1d2028; /* color-mix(in lab, var(--color-surface-0), var(--color-base) 6%) */
      "range startup crush recv"
  --blue-05: #001c37;
      "notes notes notes notes";
  --blue-15: #00325a;
    grid-template-rows: repeat(5, auto);
  --blue-30: #005493;
    grid-template-columns: 1fr repeat(3, 25%);
  --purple-30: #5500f5;
  }
    
    
  .movelist-nuf .movedata:before {
  /* HSV S=100 V=45 */
    grid-row: 3 / 4;
  --red: #730000;
  }
  --orange: #733900;
  --yellow: #8b7600; /* HSLuv 70, 100, 50 */
  --green: #007300;
  --blue: #004c73;
  --teal: #00734d;
  --purple: #600073;
  --grey: #555;
}
}


/* name above input, in damage row */
.fg-p0 { color: var(--p0); }
.fg-p1 { color: var(--p1); }
.fg-p2 { color: var(--p2); }
.fg-error { color: var(--p2); }
.fg-link { color: var(--color-link); }
 
.bg-blue { background-color: var(--blue); }
.bg-green { background-color: var(--green); }
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }
.bg-purple { background-color: var(--purple); }
.bg-teal { background-color: var(--teal); }
.bg-orange { background-color: var(--orange); }
.bg-white { background-color: var(--white); }
 
.border-blue { border-color: var(--blue); }
.border-green { border-color: var(--green); }
.border-red { border-color: var(--red); }
.border-yellow { border-color: var(--yellow); }
.border-purple { border-color: var(--purple); }
.border-teal { border-color: var(--teal); }
.border-orange { border-color: var(--orange); }
 
.bg-grey-03 { background-color: var(--grey-03); }
.bg-blue-05 { background-color: var(--blue-05); }
.bg-blue-30 { background-color: var(--blue-30); }
.bg-purple-30 { background-color: var(--purple-30); }
.border-blue-15 { border-color: var(--blue-15); }
.border-blue-30 { border-color: var(--blue-30); }
.border-purple-30 { border-color: var(--purple-30); }
.border-black { border-color: var(--black-border); }
.hover-bg-grey-03:hover { background-color: var(--grey-03); }


.movelist-naid .movedata {
.filter-grey-03 {
  grid-template-rows: repeat(6, auto);
  filter: brightness(0%) opacity(0.04);
  grid-template-areas:
    "name damage block hit ch notes"
    "name damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "input range startup crush recv notes"
    "input range startup crush recv notes";
}
}


.movelist-naid .movedata:before {
.skin-citizen-dark .filter-grey-03 {
  grid-row: 1 / 4;
  filter: brightness(0%) invert(100%) opacity(0.04);
}
}


.movelist-naid .movedata-range,
/* Patterns for color blind assistance */
.movelist-naid .movedata-name {
 
  display: initial;
.bg-blue.pattern {
  background-image: repeating-linear-gradient(135deg,
      var(--white), var(--white) 1px,
      transparent 0, transparent 6px
  );
}
}


.movelist-naid .movedata-target-ctn { align-self: center; }
.bg-red.pattern {
.movelist-naid .movedata-range { align-self: start; }
  background:
    repeating-linear-gradient(135deg,
        var(--red) 0, var(--red) 6px,
        transparent 6px, transparent 8px
    ),
    repeating-linear-gradient(45deg,
        var(--red) 0, var(--red) 6px,
        transparent 6px, transparent 8px
    );
}


/* name under input, in range row */
.bg-teal.pattern {
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      var(--white) 10px,
      var(--white) 11px
  );
}


.movelist-nuir .movedata {
.bg-purple.pattern {
  grid-template-areas:
  background-image:
    "input damage block hit ch notes"
    repeating-radial-gradient(circle at center,
    "input damage block hit ch notes"
        var(--white), var(--white) 1px,
    "input target block hit ch notes"
        transparent 0, transparent 7px
    "input target startup crush recv notes"
    );
    "name range startup crush recv notes"
    "name range startup crush recv notes";
}
}


/* nr naid nuir same mobile syle */
.bg-green.pattern {
  background-image:
    repeating-radial-gradient(circle at 0 100%,
        var(--white), var(--white) 1px,
        transparent 0, transparent 8px
    );
}


@media (max-width: 600px) {
.bg-orange.pattern {
  .movelist-naid .movedata,
   background-image:
   .movelist-nuir .movedata,
    repeating-radial-gradient(circle at 50% -25%,
  .movelist-nr .movedata {
        var(--white), var(--white) 2px,
    grid-template-areas:
        transparent 0, transparent 8px
      "input input input input"
    );
      "name name name name"
      "damage block hit ch"
      "damage block hit ch"
      "target block hit ch"
      "target startup crush recv"
      "range startup crush recv"
      "range startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(9, auto);
    grid-template-columns: 1fr repeat(3, 25%);
  }
 
  .movelist-nr .movedata-name,
  .movelist-nuir .movedata-name,
  .movelist-naid .movedata-name {
    margin-top: -0.5em;
  }
 
  .movelist-nr .movedata:before,
  .movelist-nuir .movedata:before,
  .movelist-naid .movedata:before {
    grid-row: 3 / 6;
  }
}
}
/**
* Definitions for gradient classes output by Module:G
*/
.gradient_diverging-red-blue_0 { background-color: #f0a5a5 }
.gradient_diverging-red-blue_1 { background-color: #f1b2b2 }
.gradient_diverging-red-blue_2 { background-color: #f3bfbf }
.gradient_diverging-red-blue_3 { background-color: #f5cccc }
.gradient_diverging-red-blue_4 { background-color: #f7d9d9 }
.gradient_diverging-red-blue_5 { background-color: #fae5e6 }
.gradient_diverging-red-blue_6 { background-color: #fcf2f2 }
.gradient_diverging-red-blue_8 { background-color: #f3f4fc }
.gradient_diverging-red-blue_9 { background-color: #e7e9f9 }
.gradient_diverging-red-blue_10 { background-color: #dbdff7 }
.gradient_diverging-red-blue_11 { background-color: #cfd4f5 }
.gradient_diverging-red-blue_12 { background-color: #c3caf2 }
.gradient_diverging-red-blue_13 { background-color: #b7c0f0 }
.gradient_diverging-red-blue_14 { background-color: #abb5ee }
.skin-citizen-dark .gradient_diverging-red-blue_0 { background-color: #72191a }
.skin-citizen-dark .gradient_diverging-red-blue_1 { background-color: #641515 }
.skin-citizen-dark .gradient_diverging-red-blue_2 { background-color: #571111 }
.skin-citizen-dark .gradient_diverging-red-blue_3 { background-color: #490d0d }
.skin-citizen-dark .gradient_diverging-red-blue_4 { background-color: #3d0909 }
.skin-citizen-dark .gradient_diverging-red-blue_5 { background-color: #300506 }
.skin-citizen-dark .gradient_diverging-red-blue_6 { background-color: #210203 }
.skin-citizen-dark .gradient_diverging-red-blue_8 { background-color: #040b22 }
.skin-citizen-dark .gradient_diverging-red-blue_9 { background-color: #091332 }
.skin-citizen-dark .gradient_diverging-red-blue_10 { background-color: #0e1a3f }
.skin-citizen-dark .gradient_diverging-red-blue_11 { background-color: #13214d }
.skin-citizen-dark .gradient_diverging-red-blue_12 { background-color: #18285a }
.skin-citizen-dark .gradient_diverging-red-blue_13 { background-color: #1d2f68 }
.skin-citizen-dark .gradient_diverging-red-blue_14 { background-color: #223777 }

Latest revision as of 05:06, 3 March 2024

/**
 * CSS placed here will be applied to all skins
 */
 
.plainlist ul {
	list-style: none;
	margin: 0;
}

.dotlist ul {
  list-style-type: none;
  margin-left: 0;
}

.dotlist ul > li {
  display: inline;
}

.dotlist ul > li::after {
  font-weight: bold;
  content: ' · ';
  white-space: nowrap;
}

.dotlist ul > li:last-of-type::after {
  display: none;
}

[class^="infobox"] .dotlist ul {
  margin: 0;
}

.skin-vector-2022 .floatright,
.skin-vector-2022 .floatleft {
    margin: 0;
}

.skin-vector-2022 .mw-page-container {
	min-width: auto;
}

@media ( min-width: 800px ) {
	.skin-vector-2022 .floatright {
		float: right;
		clear: right;
		margin-left: 1em;
	}
	
	.skin-vector-2022 .floatleft {
		float: left;
		clear: left;
		margin-right: 1em;
	}
}
 
.client-js table.mw-collapsible:not(.mw-made-collapsible) > caption:first-child::after {
   /**
    * Dunno why this is set to `display: block` elsewhere; it causes a flash
    * of reflowed content once the .mw-made-collapsible gets added.
    */
   display: inline;
}

.skin-citizen-dark .mw-highlight {
   background: var(--background-color-framed);
}
 
.mw-logo-icon,
.mw-wiki-logo {
   /** 
    * Chrome downscaling makes the logo blurry. This makes it use a 3D
    * accelerated downscaling algorithm which seems to do better.
    */
   transform: translateZ(0);
}

.wavu-logo {
   background-image: url(/w/skins/Tekken/wavu-logo-v3.svg);
   background-size: contain;
}

sup,
sub {
   line-height: 1;
}

* + .mediaContainer {
   margin-top: 0.5em;
}

.skin-citizen #footer-icons a { transition: filter 0.2s; }
.skin-citizen #footer-icons a:hover { filter: brightness(140%); }

.mw-gallery-nolines .gallerytext {
   text-align: start !important;
   padding-right: 5px !important;
}

.toc ul {
   scrollbar-width: thin;
}
.toc ul::-webkit-scrollbar {
   width: 0.5em;
}
.toc ul::-webkit-scrollbar-thumb {
   background-color: #ccc;
}
.skin-citizen-dark
.toc ul::-webkit-scrollbar-thumb {
   background-color: #777;
}

/**
 * SVG background-image for templates since this doesn't pass the css-sanitizer
 */ 

/* Template:Combolist */
.combolist > dl > dd::before {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1240 2480' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='translate(-180 2080)'%3E%3Cpath stroke='%23111' fill='%23111' stroke-opacity='0.45' stroke-width='2' d=' M 365,-813 Q 365,-702 393,-623 Q 422,-545 477,-495 Q 533,-446 615,-423 Q 697,-401 803,-401 L 1155,-401 L 1032,-520 L 1032,-668 L 1352,-336 L 1352,-332 L 1032,0 L 1032,-147 L 1157,-268 L 799,-268 Q 690,-268 587,-294 Q 485,-320 406,-382 Q 327,-445 279,-549 Q 231,-654 231,-811 L 231,-1120 L 365,-1120 L 365,-813 Z '/%3E%3C/g%3E%3C/svg%3E%0A");
}
.skin-citizen-dark .combolist > dl > dd::before {
   filter: invert(100%);
}
.combolist > dl,
.changelist > dl,
.binlist > dl,
.combolist > dl > dd,
.changelist > dl > dd,
.binlist > dl > dd {
   display: inline-block;
   /** 
    * prefixed width values that don't pass the sanitizer
    *
    * This is the only way to ensure that the deflists don't span multiple
    * columns, as break-inside: avoid isn't super strict.
    *
    * Applying to the <dd> also because the svg icons need a new block context
    * to be absolutely positioned. Because their parent is inline-block, they
    * can't be a regular block I guess?
    **/
   width: -moz-available;
   width: -webkit-fill-available;
}

.fill-available {
   width: -moz-available;
   width: -webkit-fill-available;
}

/* Template::Tt */

.tooltip-label {
	text-decoration: underline dotted;
	cursor: pointer;
	display: inline;
}

.tooltip-hr {
	display: block;
	height: 1px;
	width: 100%;
	background-color: var(--border-color-base--darker);
	margin: var(--space-xs) 0;
}

.tippy-box {
	background-color: var(--color-surface-1);
	border: 1px solid #777;
	border-radius: var(--border-radius--small);
	color: var(--color-base);
	outline: 0;
	padding: var(--space-xs);
	text-align: start;
	text-indent: 0;
}

/* svg icons for patch notes */

.buff,
.nerf,
.unclear,
.new-move {
   display: inline-block;
   width: 1.15em;
   height: 1.15em;
   vertical-align: text-bottom;
   mask-size: contain;
   mask-position: center;
   mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
}

.nerf {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   background-color: var(--red);
}

.buff {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3Crect x='44' y='20' width='12' height='60' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Crect x='20' y='44' width='60' height='12' fill='black'/%3E%3Crect x='44' y='20' width='12' height='60' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   background-color: var(--blue);
}

.unclear {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpath d='M20,40 Q35,30 50,40 65,50 80,40' stroke='black' stroke-width='10px'/%3E%3Cpath d='M20,60 Q35,50 50,60 65,70 80,60' stroke='black' stroke-width='10px'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpath d='M20,40 Q35,30 50,40 65,50 80,40' stroke='black' stroke-width='10px'/%3E%3Cpath d='M20,60 Q35,50 50,60 65,70 80,60' stroke='black' stroke-width='10px'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   background-color: var(--grey);
}

.new-move {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpolygon points='41 20, 59 20, 56 60, 44 60' fill='black'/%3E%3Ccircle cx='50' cy='75' r='9' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3Cmask id='inner-circle'%3E%3Crect x='0' y='0' width='100' height='100' fill='white'/%3E%3Cpolygon points='41 20, 59 20, 56 60, 44 60' fill='black'/%3E%3Ccircle cx='50' cy='75' r='9' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='currentColor' mask='url(%23inner-circle)'/%3E%3C/svg%3E%0A");
   background-color: var(--purple);
}

/* clip-path not allowed elsewhere */

.char-select-t8-img a {
   background-image: linear-gradient( to right, var(--color-link) 0, var(--color-link) 100% );
   clip-path: path('M 0 87 L 5,15 L 20,1 L 72,1 L 67,73 L 53,87 Z');
}

/* helper classes to change alignment of columns in table */

.valign-middle td,
.valign-middle th {
   vertical-align: middle;
}

.col-1-start tr > :nth-child(1) { text-align: start; }
.col-2-start tr > :nth-child(2) { text-align: start; }
.col-3-start tr > :nth-child(3) { text-align: start; }
.col-4-start tr > :nth-child(4) { text-align: start; }
.col-5-start tr > :nth-child(5) { text-align: start; }
.col-6-start tr > :nth-child(6) { text-align: start; }
.col-7-start tr > :nth-child(7) { text-align: start; }
.col-8-start tr > :nth-child(8) { text-align: start; }
.col-9-start tr > :nth-child(9) { text-align: start; }

.col-1-center tr > :nth-child(1) { text-align: center; }
.col-2-center tr > :nth-child(2) { text-align: center; }
.col-3-center tr > :nth-child(3) { text-align: center; }
.col-4-center tr > :nth-child(4) { text-align: center; }
.col-5-center tr > :nth-child(5) { text-align: center; }
.col-6-center tr > :nth-child(6) { text-align: center; }
.col-7-center tr > :nth-child(7) { text-align: center; }
.col-8-center tr > :nth-child(8) { text-align: center; }
.col-9-center tr > :nth-child(9) { text-align: center; }

.col-1-end tr > :nth-child(1) { text-align: end; }
.col-2-end tr > :nth-child(2) { text-align: end; }
.col-3-end tr > :nth-child(3) { text-align: end; }
.col-4-end tr > :nth-child(4) { text-align: end; }
.col-5-end tr > :nth-child(5) { text-align: end; }
.col-6-end tr > :nth-child(6) { text-align: end; }
.col-7-end tr > :nth-child(7) { text-align: end; }
.col-8-end tr > :nth-child(8) { text-align: end; }
.col-9-end tr > :nth-child(9) { text-align: end; }

/**
 * overwrite some .wikitable rules
 *
 * .punishers is basically the same except center-aligned
 * and the heading has a blue border instead of grey
 * and the cell borders are on top instead of bottom,
 * so the last row doesn't have a border on the bottom
 */

table.wikitable tr:hover {
   background-color: inherit;
}

.punishers {
   border-collapse: collapse;
   text-align: center;
}

.punishers td,
.punishers th,
table.wikitable tr td,
table.wikitable tr th {
   padding: 0.2em 0.4em;
}

.punishers th,
.punishers td {
   border-color: var(--border-color-base);
   border-style: solid;
   border-width: 1px 0 0 0;
}

.wikitable-heading,
.table-cat {
   width:100vw;
   text-align:center;
   font-size:1.15em;
}

table.wikitable .wikitable-heading,
table.wikitable .table-cat {
   border-color: var(--grey);
}

.punishers .wikitable-heading,
.punishers .table-cat {
   border-color: var(--blue-30);
   border-width: 0 0 1px 0;
}

tr:not(:first-child) .table-cat,
tr:not(:first-child) .wikitable-heading {
   padding-top: 0.5em;
}

/* font based on in-game Tekken symbols */

@font-face {
   font-family: IronFist;
   src: url('/w/skins/Tekken/Iron-Fist.woff');
   font-weight: normal;
   font-style: normal;
   font-display: block;
}

.ironfist {
  font-family: IronFist;
}

/**
 * Colors intended for figures use HSV color space, as it's more vibrant, and
 * uniform perceived lightness isn't essential since the lightness is fixed and
 * values of S and V are chosen such that contrast remains good.
 *
 * == hues ==
 * red 0
 * orange 30
 * yellow 60
 * green 120
 * teal 160
 * blue 200
 * purple 290
 *
 * Colors with a number use https://www.hsluv.org/ color space
 * 
 * Light mode bg: hsluv(0, 0, 100)
 * Dark mode bg: hsluv(0, 0, 5)
 *
 * == hue
 * blue 250
 * purple 270
 *
 * == saturation
 * 100
 * grey 0
 *
 * == lightness
 * 100 - {n}
 * 
 * == lightness (dark mode)
 * 5 + {n}
 */
 
:root {
   --p0: #1f7303;
   --p1: #0664b3;
   --p2: #a83652;
   --black-border: black;
   
   --white: white;
   
   --grey-03: #f3f3f3;
   --blue-05: #eaf1ff;
   --blue-15: #bfd5ff;
   --blue-30: #71adff;
   --purple-30: #ac9fff;
   
   /* HSV S=30 V=100 */
   --red: #ffb3b3;
   --orange: #ffd9b3;
   --yellow: #ffffb3;
   --green: #b3ffb3;
   --teal: #b3ffe6;
   --blue: #b3e5ff;
   --purple: #d9b3ff;
   
   --grey: #888;
}

.skin-citizen-dark:root {
   --p0: #3cc50a;
   --p1: #7faefe;
   --p2: #f88a9d;
   --black-border: #aaa;
   
   --white: var(--color-surface-0);
  
   --grey-03: #1d2028; /* color-mix(in lab, var(--color-surface-0), var(--color-base) 6%) */
   --blue-05: #001c37;
   --blue-15: #00325a;
   --blue-30: #005493;
   --purple-30: #5500f5;
  
   /* HSV S=100 V=45 */
   --red: #730000;
   --orange: #733900;
   --yellow: #8b7600; /* HSLuv 70, 100, 50 */
   --green: #007300;
   --blue: #004c73;
   --teal: #00734d;
   --purple: #600073;
   --grey: #555;
}

.fg-p0 { color: var(--p0); }
.fg-p1 { color: var(--p1); }
.fg-p2 { color: var(--p2); }
.fg-error { color: var(--p2); }
.fg-link { color: var(--color-link); }
   
.bg-blue { background-color: var(--blue); }
.bg-green { background-color: var(--green); }
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }
.bg-purple { background-color: var(--purple); }
.bg-teal { background-color: var(--teal); }
.bg-orange { background-color: var(--orange); }
.bg-white { background-color: var(--white); }

.border-blue { border-color: var(--blue); }
.border-green { border-color: var(--green); }
.border-red { border-color: var(--red); }
.border-yellow { border-color: var(--yellow); }
.border-purple { border-color: var(--purple); }
.border-teal { border-color: var(--teal); }
.border-orange { border-color: var(--orange); }

.bg-grey-03 { background-color: var(--grey-03); }
.bg-blue-05 { background-color: var(--blue-05); }
.bg-blue-30 { background-color: var(--blue-30); }
.bg-purple-30 { background-color: var(--purple-30); }
.border-blue-15 { border-color: var(--blue-15); }
.border-blue-30 { border-color: var(--blue-30); }
.border-purple-30 { border-color: var(--purple-30); }
.border-black { border-color: var(--black-border); }
.hover-bg-grey-03:hover { background-color: var(--grey-03); }

.filter-grey-03 {
   filter: brightness(0%) opacity(0.04);
}

.skin-citizen-dark .filter-grey-03 {
   filter: brightness(0%) invert(100%) opacity(0.04);
}

/* Patterns for color blind assistance */

.bg-blue.pattern {
   background-image: repeating-linear-gradient(135deg,
      var(--white), var(--white) 1px,
      transparent 0, transparent 6px
   );
}

.bg-red.pattern {
   background:
     repeating-linear-gradient(135deg,
        var(--red) 0, var(--red) 6px,
        transparent 6px, transparent 8px
     ),
     repeating-linear-gradient(45deg,
        var(--red) 0, var(--red) 6px,
        transparent 6px, transparent 8px
     );
}

.bg-teal.pattern {
   background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      var(--white) 10px,
      var(--white) 11px
   );
}

.bg-purple.pattern {
   background-image:
     repeating-radial-gradient(circle at center,
        var(--white), var(--white) 1px,
        transparent 0, transparent 7px
     );
}

.bg-green.pattern {
  background-image:
     repeating-radial-gradient(circle at 0 100%,
        var(--white), var(--white) 1px,
        transparent 0, transparent 8px
     );
}

.bg-orange.pattern {
  background-image:
     repeating-radial-gradient(circle at 50% -25%,
        var(--white), var(--white) 2px,
        transparent 0, transparent 8px
     );
}

/**
 * Definitions for gradient classes output by Module:G
 */
.gradient_diverging-red-blue_0 { background-color: #f0a5a5 }
.gradient_diverging-red-blue_1 { background-color: #f1b2b2 }
.gradient_diverging-red-blue_2 { background-color: #f3bfbf }
.gradient_diverging-red-blue_3 { background-color: #f5cccc }
.gradient_diverging-red-blue_4 { background-color: #f7d9d9 }
.gradient_diverging-red-blue_5 { background-color: #fae5e6 }
.gradient_diverging-red-blue_6 { background-color: #fcf2f2 }
.gradient_diverging-red-blue_8 { background-color: #f3f4fc }
.gradient_diverging-red-blue_9 { background-color: #e7e9f9 }
.gradient_diverging-red-blue_10 { background-color: #dbdff7 }
.gradient_diverging-red-blue_11 { background-color: #cfd4f5 }
.gradient_diverging-red-blue_12 { background-color: #c3caf2 }
.gradient_diverging-red-blue_13 { background-color: #b7c0f0 }
.gradient_diverging-red-blue_14 { background-color: #abb5ee }
.skin-citizen-dark .gradient_diverging-red-blue_0 { background-color: #72191a }
.skin-citizen-dark .gradient_diverging-red-blue_1 { background-color: #641515 }
.skin-citizen-dark .gradient_diverging-red-blue_2 { background-color: #571111 }
.skin-citizen-dark .gradient_diverging-red-blue_3 { background-color: #490d0d }
.skin-citizen-dark .gradient_diverging-red-blue_4 { background-color: #3d0909 }
.skin-citizen-dark .gradient_diverging-red-blue_5 { background-color: #300506 }
.skin-citizen-dark .gradient_diverging-red-blue_6 { background-color: #210203 }
.skin-citizen-dark .gradient_diverging-red-blue_8 { background-color: #040b22 }
.skin-citizen-dark .gradient_diverging-red-blue_9 { background-color: #091332 }
.skin-citizen-dark .gradient_diverging-red-blue_10 { background-color: #0e1a3f }
.skin-citizen-dark .gradient_diverging-red-blue_11 { background-color: #13214d }
.skin-citizen-dark .gradient_diverging-red-blue_12 { background-color: #18285a }
.skin-citizen-dark .gradient_diverging-red-blue_13 { background-color: #1d2f68 }
.skin-citizen-dark .gradient_diverging-red-blue_14 { background-color: #223777 }
Retrieved from "https://wavu.wiki/w/index.php?title=MediaWiki:Common.css&oldid=23886"
Last modified
This page was last edited on 3 March 2024, at 05:06.
Copyright
All game content, materials, and recordings are copyright and owned by Bandai Namco Entertainment Inc. TEKKEN® is a registered trademark by Bandai Namco Entertainment Inc.. All rights reserved. All other content is available under Creative Commons Zero (Public Domain) unless otherwise noted.