RogerDodger (talk | contribs) No edit summary |
RogerDodger (talk | contribs) No edit summary |
||
(32 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
* 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; | |||
} | |||
.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 { | .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 | * 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; | display: inline; | ||
} | } | ||
.skin-citizen-dark .mw-highlight { | .skin-citizen-dark .mw-highlight { | ||
background: var(--background-color-framed); | |||
} | } | ||
Line 24: | Line 75: | ||
} | } | ||
. | .wavu-logo { | ||
background-image: url(/w/skins/Tekken/wavu-logo-v3.svg); | |||
background-size: contain; | background-size: contain; | ||
} | } | ||
sup, | |||
sub { | |||
line-height: 1; | |||
} | } | ||
. | * + .mediaContainer { | ||
margin-top: 0.5em; | |||
} | } | ||
#footer-icons a { transition: filter 0.2s; } | .skin-citizen #footer-icons a { transition: filter 0.2s; } | ||
#footer-icons a:hover { filter: brightness(140%); } | .skin-citizen #footer-icons a:hover { filter: brightness(140%); } | ||
.mw-gallery-nolines .gallerytext { | .mw-gallery-nolines .gallerytext { | ||
Line 74: | Line 123: | ||
} | } | ||
.combolist > dl, | .combolist > dl, | ||
.changelist > dl { | .changelist > dl, | ||
.binlist > dl, | |||
.combolist > dl > dd, | |||
.changelist > dl > dd, | |||
.binlist > dl > dd { | |||
display: inline-block; | display: inline-block; | ||
/** | /** | ||
Line 80: | Line 133: | ||
* | * | ||
* This is the only way to ensure that the deflists don't span multiple | * This is the only way to ensure that the deflists don't span multiple | ||
* columns, as break-inside: avoid isn't super strict | * 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: -moz-available; | ||
Line 89: | Line 146: | ||
width: -moz-available; | width: -moz-available; | ||
width: -webkit-fill-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; | |||
} | } | ||
Line 131: | Line 215: | ||
-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"); | -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); | 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'); | |||
} | } | ||
Line 137: | Line 228: | ||
.valign-middle td, | .valign-middle td, | ||
.valign-middle th { | .valign-middle th { | ||
vertical-align: middle; | |||
} | } | ||
Line 169: | Line 260: | ||
.col-8-end tr > :nth-child(8) { text-align: end; } | .col-8-end tr > :nth-child(8) { text-align: end; } | ||
.col-9-end tr > :nth-child(9) { 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 based on in-game Tekken symbols */ | ||
Line 219: | Line 365: | ||
:root { | :root { | ||
-- | --p0: #1f7303; | ||
--p1: #0664b3; | |||
--p2: #a83652; | |||
--black-border: black; | |||
--white: white; | |||
--grey-03: #f3f3f3; | |||
--blue-05: #eaf1ff; | --blue-05: #eaf1ff; | ||
--blue-15: #bfd5ff; | --blue-15: #bfd5ff; | ||
Line 239: | Line 391: | ||
.skin-citizen-dark:root { | .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-05: #001c37; | ||
--blue-15: #00325a; | --blue-15: #00325a; | ||
Line 247: | Line 407: | ||
--red: #730000; | --red: #730000; | ||
--orange: #733900; | --orange: #733900; | ||
--yellow: # | --yellow: #8b7600; /* HSLuv 70, 100, 50 */ | ||
--green: #007300; | --green: #007300; | ||
--blue: #004c73; | --blue: #004c73; | ||
Line 254: | Line 414: | ||
--grey: #555; | --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-blue { background-color: var(--blue); } | ||
Line 264: | Line 430: | ||
.bg-white { background-color: var(--white); } | .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-05 { background-color: var(--blue-05); } | ||
.bg-blue-30 { background-color: var(--blue-30); } | .bg-blue-30 { background-color: var(--blue-30); } | ||
Line 271: | Line 445: | ||
.border-blue-30 { border-color: var(--blue-30); } | .border-blue-30 { border-color: var(--blue-30); } | ||
.border-purple-30 { border-color: var(--purple-30); } | .border-purple-30 { border-color: var(--purple-30); } | ||
.hover-bg-grey-03:hover { background-color: var(-- | .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 */ | /* Patterns for color blind assistance */ | ||
Line 326: | Line 509: | ||
); | ); | ||
} | } | ||
/** | |||
* 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 }