MediaWiki:Common.css: Difference between revisions

Revision as of 10:17, 11 July 2022

/**
 * CSS placed here will be applied to all skins
 */
 
.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;
}

/**
 * Hack to make the sort icons match FG color. Because the icons share the header
 * element with the text, need to invert the text color so it stays the same.
 */
.skin-citizen-dark .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.skin-citizen-dark .jquery-tablesorter th.headerSort {
   color: rgba(0,0,0,0.7);
   filter: invert(100%);
}
 
.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);
}

.mw-wiki-logo,
.mw-logo-icon {
   background-image: url(/w/skins/Tekken/wavu-logo-v2-borderless.svg);
   /* hide the replaced elem so that the bg can go on top */
   background-size: contain;
   object-position: 100vw; 
}

.skin-citizen-dark .mw-wiki-logo,
.skin-citizen-dark .mw-logo-icon {
   background-image: url(/w/skins/Tekken/wavu-logo-v2.svg);
}

sup,
sub {
   line-height: 1;
}

#footer-icons a { transition: filter 0.2s; }
#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;
}

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

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

/* table class for listing punishers, see [[Lee punishers]] for example usage */

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

.punishers td, th {
  padding: 0.2em 0.5em;
}

.punishers .table-cat {
  border-bottom: 1px solid var(--blue-30);
  border-top: 0;
  width: 100vw;
  text-align: center;
  font-size: 1.15em;
}

.punishers td {
  border-top: 1px solid var(--background-color-quiet--active);
}

/* 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: var(--background-color-dp-00);
   
   --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;
  
   --blue-05: #001c37;
   --blue-15: #00325a;
   --blue-30: #005493;
   --purple-30: #5500f5;
  
   /* HSV S=100 V=45 */
   --red: #730000;
   --orange: #733900;
   --yellow: #737300;
   --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); }
   
.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(--background-color-quiet--hover); }
.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(--background-color-quiet--hover); }

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