MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(97 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;
}


.plainlist > ul {
.dotlist ul > li::after {
list-style-type: none;
  font-weight: bold;
padding-left: 0;
  content: ' · ';
  white-space: nowrap;
}
}


/* first movedata style */
.dotlist ul > li:last-of-type::after {
.movedata {
   display: none;
  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 {
[class^="infobox"] .dotlist ul {
   margin: 0;
   margin: 0;
}
}


.movedata {
.skin-vector-2022 .floatright,
  margin-top: 1em;
.skin-vector-2022 .floatleft {
  text-align: center;
    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;
}
}


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


.movedata:hover {
.tippy-box {
  background-color: hsla(200, 50%, 96%, 1);
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;
}
}


.movedata-input-ctn { grid-area: input; }
.nerf {
.movedata-name { grid-area: 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%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-startup-ctn { grid-area: startup; }
  -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");
.movedata-damage-ctn { grid-area: damage; }
  background-color: var(--red);
.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 {
.buff {
  font-size: 1.7em;
  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");
  padding-left: 0.2em;
  -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");
  text-align: start;
  background-color: var(--blue);
}
}


.movedata-damage-ctn { align-self: end; }
.unclear {
.movedata-target-ctn { align-self: start; }
  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);
}


.movedata-startup-ctn,
.new-move {
.movedata-crush,
  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");
.movedata-recv {
  -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");
  align-self: start;
  background-color: var(--purple);
}
}


.movedata-hit,
/* clip-path not allowed elsewhere */
.movedata-block,
 
.movedata-ch {
.char-select-t8-img a {
  align-self: end;
  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-damageLead,
/* helper classes to change alignment of columns in table */
.movedata-targetLead,
 
.movedata-inputLead {
.valign-middle td,
  opacity: .3;
.valign-middle th {
  vertical-align: middle;
}
}


.movedata-clean,
.col-1-start tr > :nth-child(1) { text-align: start; }
.movedata-name,
.col-2-start tr > :nth-child(2) { text-align: start; }
.movedata-range,
.col-3-start tr > :nth-child(3) { text-align: start; }
.movedata-startupLead {
.col-4-start tr > :nth-child(4) { text-align: start; }
  display: none;
.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;
}
}


.movedata:before {
.wikitable-heading,
  content: " ";
.table-cat {
  display: block;
  width:100vw;
  height: 0px;
  text-align:center;
  width: 100%;
  font-size:1.15em;
  grid-column: 3 / span 3;
  grid-row: 1;
  align-self: end;
  border-bottom: 1px dotted grey;
}
}


.movedata-notes {
table.wikitable .wikitable-heading,
  align-self: stretch;
table.wikitable .table-cat {
  line-height: initial;
  border-color: var(--grey);
  text-align: start;
  border-left: 1px solid #888;
  padding: 0 0.2em;
}
}


.movedata-input-ctn  {
.punishers .wikitable-heading,
  display: flex;
.punishers .table-cat {
  flex-flow: row nowrap;
  border-color: var(--blue-30);
  border-width: 0 0 1px 0;
}
}


.movedata-input-ctn,
tr:not(:first-child) .table-cat,
.movedata-target-ctn,
tr:not(:first-child) .wikitable-heading {
.movedata-damage-ctn {
  padding-top: 0.5em;
  word-break: break-word;
}
}


.movedata-input-ctn:after {
/* font based on in-game Tekken symbols */
  content: "";
 
  align-self: center;
@font-face {
  flex-basis: 0px;
  font-family: IronFist;
  flex-grow: 1;
  src: url('/w/skins/Tekken/Iron-Fist.woff');
  margin-left: 0.2em;
  font-weight: normal;
  border-top: 1px solid #888;
  font-style: normal;
  font-display: block;
}
}


@media (max-width: 600px) {
.ironfist {
  .movedata {
  font-family: IronFist;
    grid-template-areas:
}
      "input input input input"
 
      "damage block hit ch"
/**
      "target startup crush recv"
* Colors intended for figures use HSV color space, as it's more vibrant, and
      "notes notes notes notes";
* uniform perceived lightness isn't essential since the lightness is fixed and
    grid-template-rows: repeat(4, auto);
* values of S and V are chosen such that contrast remains good.
    grid-template-columns: 1fr repeat(3, 25%);
*
    border: none;
* == 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);
    
    
  .movedata:before {
  --grey-03: #1d2028; /* color-mix(in lab, var(--color-surface-0), var(--color-base) 6%) */
    grid-row: 2;
  --blue-05: #001c37;
    grid-column: 2 / -1;
  --blue-15: #00325a;
  }
  --blue-30: #005493;
  --purple-30: #5500f5;
    
    
  .movedata-notes {
  /* HSV S=100 V=45 */
    text-align: end;
  --red: #730000;
    border: none;
  --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);
}
}


/* add name and range to movedata */
.skin-citizen-dark .filter-grey-03 {
.movelist-nr .movedata-range,
  filter: brightness(0%) invert(100%) opacity(0.04);
.movelist-nr .movedata-name {
  display: initial;
}
}


.movelist-nr .movedata {
/* Patterns for color blind assistance */
  grid-template-areas:
 
    "name name name name name notes"
.bg-blue.pattern {
    "input damage block hit ch notes"
  background-image: repeating-linear-gradient(135deg,
    "input damage block hit ch notes"
      var(--white), var(--white) 1px,
    "input target block hit ch notes"
      transparent 0, transparent 6px
    "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-name {
.bg-red.pattern {
  text-align: start;
  background:
  font-size: 0.75em;
    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
    );
}
}


.movelist-nr .movedata-target-ctn { align-self: center; }
.bg-teal.pattern {
.movelist-nr .movedata-range { align-self: start; }
  background-image: repeating-linear-gradient(45deg,
      transparent,
.movelist-nr .movedata-range:empty:after {
      transparent 10px,
  content: "N/A";
      var(--white) 10px,
  visibility: hidden;
      var(--white) 11px
  );
}
 
.bg-purple.pattern {
  background-image:
    repeating-radial-gradient(circle at center,
        var(--white), var(--white) 1px,
        transparent 0, transparent 7px
    );
}
}


.movelist-nr .movedata:before {
.bg-green.pattern {
   grid-row: 2 / 5;
   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-nr .movedata {
  background-image:
    grid-template-areas:
    repeating-radial-gradient(circle at 50% -25%,
      "input input input input"
        var(--white), var(--white) 2px,
      "name name name name"
        transparent 0, transparent 8px
      "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 {
    margin-top: -0.5em;
  }
 
  .movelist-nr .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.