MediaWiki:Common.css: Difference between revisions

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


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


/* first movedata style */
.dotlist ul > li {
.movedata {
   display: inline;
   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 {
.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;
   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;
}
}


.movedata + .movedata {
.fill-available {
  margin-top: -1px;
  width: -moz-available;
  width: -webkit-fill-available;
}
}


.movedata:hover {
/* Template::Tt */
  background-color: hsla(200, 50%, 96%, 1);
 
.tooltip-label {
text-decoration: underline dotted;
cursor: pointer;
display: inline;
}
}


.movedata-input-ctn { grid-area: input; }
.tooltip-hr {
.movedata-name { grid-area: name; }
display: block;
.movedata-startup-ctn { grid-area: startup; }
height: 1px;
.movedata-damage-ctn { grid-area: damage; }
width: 100%;
.movedata-target-ctn {  grid-area: target; }
background-color: var(--border-color-base--darker);
.movedata-block { grid-area: block; }
margin: var(--space-xs) 0;
.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 {
.tippy-box {
  font-size: 1.7em;
background-color: var(--color-surface-1);
  padding-left: 0.2em;
border: 1px solid #777;
  text-align: start;
border-radius: var(--border-radius--small);
color: var(--color-base);
outline: 0;
padding: var(--space-xs);
text-align: start;
text-indent: 0;
}
}


.movedata-damage-ctn { align-self: end; }
/* svg icons for patch notes */
.movedata-target-ctn { align-self: start; }


.movedata-startup-ctn,
.buff,
.movedata-crush,
.nerf,
.movedata-recv {
.unclear,
  align-self: start;
.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-hit,
.nerf {
.movedata-block,
  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-ch {
  -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");
  align-self: end;
  background-color: var(--red);
}
}


.movedata-damageLead,
.buff {
.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%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-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%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");
  opacity: .3;
  background-color: var(--blue);
}
}


.movedata-clean,
.unclear {
.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%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");
.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%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");
.movedata-startupLead {
  background-color: var(--grey);
  display: none;
}
 
.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);
}
}


.movedata:before {
/* clip-path not allowed elsewhere */
  content: " ";
 
  display: block;
.char-select-t8-img a {
  height: 0px;
  background-image: linear-gradient( to right, var(--color-link) 0, var(--color-link) 100% );
  width: 100%;
  clip-path: path('M 0 87 L 5,15 L 20,1 L 72,1 L 67,73 L 53,87 Z');
  grid-column: 3 / span 3;
  grid-row: 1;
  align-self: end;
  border-bottom: 1px dotted grey;
}
}


.movedata-notes {
/* helper classes to change alignment of columns in table */
  align-self: stretch;
 
  line-height: initial;
.valign-middle td,
  text-align: start;
.valign-middle th {
  border-left: 1px solid #888;
  vertical-align: middle;
  padding: 0 0.2em;
}
}


.movedata-input-ctn  {
.col-1-start tr > :nth-child(1) { text-align: start; }
  display: flex;
.col-2-start tr > :nth-child(2) { text-align: start; }
  flex-flow: row nowrap;
.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;
}
}


.movedata-input-ctn,
.punishers {
.movedata-target-ctn,
  border-collapse: collapse;
.movedata-damage-ctn {
  text-align: center;
  word-break: break-word;
}
}


.movedata-input-ctn:after {
.punishers td,
  content: "";
.punishers th,
  align-self: center;
table.wikitable tr td,
  flex-basis: 0px;
table.wikitable tr th {
  flex-grow: 1;
  padding: 0.2em 0.4em;
  margin-left: 0.2em;
  border-top: 1px solid #888;
}
}


@media (max-width: 600px) {
.punishers th,
  .movedata {
.punishers td {
    grid-template-areas:
  border-color: var(--border-color-base);
      "input input input input"
  border-style: solid;
      "damage block hit ch"
  border-width: 1px 0 0 0;
      "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 {
.wikitable-heading,
  content: "N/A";
.table-cat {
  visibility: hidden;
  width:100vw;
  text-align:center;
  font-size:1.15em;
}
}


.movedata-name {
table.wikitable .wikitable-heading,
  text-align: start;
table.wikitable .table-cat {
  font-size: 0.75em;
  border-color: var(--grey);
}
}


/* add name and range to movedata */
.punishers .wikitable-heading,
.movelist-nr .movedata-range,
.punishers .table-cat {
.movelist-nr .movedata-name {
  border-color: var(--blue-30);
  display: initial;
  border-width: 0 0 1px 0;
}
}


.movelist-nr .movedata {
tr:not(:first-child) .table-cat,
  grid-template-areas:
tr:not(:first-child) .wikitable-heading {
    "name name name name name notes"
  padding-top: 0.5em;
    "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; }
/* font based on in-game Tekken symbols */
.movelist-nr .movedata-range { align-self: start; }


.movelist-nr .movedata:before {
@font-face {
  grid-row: 2 / 5;
  font-family: IronFist;
  src: url('/w/skins/Tekken/Iron-Fist.woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
}


@media (max-width: 600px) {
.ironfist {
  .movelist-nr .movedata {
  font-family: IronFist;
    grid-template-areas:
}
      "input input input input"
 
      "name name name name"
/**
      "damage block hit ch"
* Colors intended for figures use HSV color space, as it's more vibrant, and
      "damage block hit ch"
* uniform perceived lightness isn't essential since the lightness is fixed and
      "target block hit ch"
* values of S and V are chosen such that contrast remains good.
      "target startup crush recv"
*
      "range startup crush recv"
* == hues ==
      "range startup crush recv"
* red 0
      "notes notes notes notes";
* orange 30
    grid-template-rows: repeat(9, auto);
* yellow 60
    grid-template-columns: 1fr repeat(3, 25%);
* 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);
    
    
  .movelist-nr .movedata-name {
  --grey-03: #1d2028; /* color-mix(in lab, var(--color-surface-0), var(--color-base) 6%) */
    margin-top: -0.5em;
  --blue-05: #001c37;
  }
  --blue-15: #00325a;
  --blue-30: #005493;
  --purple-30: #5500f5;
    
    
  .movelist-nr .movedata:before {
  /* HSV S=100 V=45 */
    grid-row: 3 / 6;
  --red: #730000;
  }
  --orange: #733900;
  --yellow: #8b7600; /* HSLuv 70, 100, 50 */
  --green: #007300;
  --blue: #004c73;
  --teal: #00734d;
  --purple: #600073;
  --grey: #555;
}
}


/* add name and range, name above frame data */
.fg-p0 { color: var(--p0); }
.movelist-nuf .movedata {
.fg-p1 { color: var(--p1); }
  grid-template-rows: repeat(3, auto);
.fg-p2 { color: var(--p2); }
  grid-template-areas:
.fg-error { color: var(--p2); }
    "input damage name name name notes"
.fg-link { color: var(--color-link); }
    "input target block hit ch notes"
 
    "input range startup crush recv notes";
.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);
}
}


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


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


.movelist-nuf .movedata-target-ctn { align-self: center; }
.bg-red.pattern {
.movelist-nuf .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
    );
}


@media (max-width: 600px) {
.bg-teal.pattern {
  .movelist-nuf .movedata {
  background-image: repeating-linear-gradient(45deg,
    grid-template-areas:
       transparent,
       "input input input input"
       transparent 10px,
       "damage name name name"
       var(--white) 10px,
       "target block hit ch"
       var(--white) 11px
       "range startup crush recv"
  );
      "notes notes notes notes";
}
    grid-template-rows: repeat(5, auto);
 
    grid-template-columns: 1fr repeat(3, 25%);
.bg-purple.pattern {
  }
  background-image:
 
    repeating-radial-gradient(circle at center,
  .movelist-nuf .movedata:before {
        var(--white), var(--white) 1px,
    grid-row: 3 / 4;
        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 }

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.