MediaWiki:Common.css

/**
 * CSS placed here will be applied to all skins
 */

@media (prefers-color-scheme: dark) {
   .mw-wiki-logo {
      background-image: url(/w/skins/Tekken/wavu-logo-glow-420w.png);
   }
   
   .mw-parser-output img {
      filter: grayscale(30%);
   }
}

/**
 * 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");
}
@media (prefers-color-scheme: dark) {
   .combolist > dl > dd::before {
      filter: invert(100%);
   }
}

/* less table padding, and not wasting space in cells without a sort button */

.skin-citizen table.wikitable tr td,
.skin-citizen table.wikitable tr th {
   padding: 5px;
}

.skin-citizen table.wikitable tr th.headerSort {
  padding-right: 21px;
}

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

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

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

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

/* 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 {
   --white: #fff;
   
   --blue-05: #eaf1ff;
   --blue-15: #bfd5ff;
   --blue-30: #71adff;
   --grey-03: #f6f6f6;
   --purple-30: #ac9fff;
   
   /* HSV S=30 V=100 */
   --red: #ffb3b3;
   --orange: #ffd9b3;
   --yellow: #ffffb3;
   --green: #b3ffb3;
   --teal: #b3ffe6;
   --blue: #b3e5ff;
   --purple: #d9b3ff;
}

@media (prefers-color-scheme: dark) {
   :root {
   	  --white: #111111;
   	  
      --blue-05: #001c37;
      --blue-15: #00325a;
      --blue-30: #005493;
      --grey-03: #181818;
      --purple-30: #5500f5;
      
      /* HSV S=100 V=30 */
	  --red: #4d0000;
	  --orange: #4d2600;
	  --yellow: #4d4d00;
	  --green: #004d00;
	  --blue: #00334d;
	  --teal: #004d40;
	  --purple: #40004d;
   }
}

body.skin-citizen {
  background-color: var(--white);
}
   
.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-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); }
.hover-bg-grey-03:hover { background-color: var(--grey-03); }

/* 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
     );
}