RogerDodger (talk | contribs) No edit summary |
RogerDodger (talk | contribs) (change base color lightness from 80/25 to 90/15 to enhance contrast) |
||
| Line 64: | Line 64: | ||
* == hue | * == hue | ||
* red 12 | * red 12 | ||
* yellow | * yellow 75 | ||
* green 120 | * green 120 | ||
* teal 160 | * teal 160 | ||
| Line 75: | Line 75: | ||
* | * | ||
* == lightness | * == lightness | ||
* base | * base 90 | ||
* {n} 100 - {n} | * {n} 100 - {n} | ||
* | * | ||
* == lightness (dark mode) | * == lightness (dark mode) | ||
* base | * base 15 | ||
* {n} 5 + {n} | * {n} 5 + {n} | ||
*/ | */ | ||
| Line 87: | Line 87: | ||
--blue-15: #b2d8ff; | --blue-15: #b2d8ff; | ||
--blue-muddy-05: #ecf1f8; | --blue-muddy-05: #ecf1f8; | ||
--blue: # | --blue: #cde5ff; | ||
--yellow: # | --yellow: #fee300; | ||
--green: # | --green: #81ff26; | ||
--red: # | --red: #ffdada; | ||
--purple: # | --purple: #f8d8ff; | ||
--teal: # | --teal: #28ffcb; | ||
} | } | ||
| Line 100: | Line 100: | ||
--blue-15: #00344e; | --blue-15: #00344e; | ||
--blue-muddy-05: #121d26; | --blue-muddy-05: #121d26; | ||
--blue: # | --blue: #00293f; | ||
--yellow: # | --yellow: #2c2600; | ||
--green: # | --green: #102c00; | ||
--red: # | --red: #540001; | ||
--purple: # | --purple: #47004f; | ||
--teal: # | --teal: #002c21; | ||
} | } | ||
Revision as of 13:15, 21 December 2020
/*
* CSS placed here will be applied to all skins
*/
/* for Template:CharSelect, since this doesn't pass the css-sanitizer */
.char-select-img img {
background-image: url('/w/skins/Tekken/character-select-spritesheet-v2-602w.webp');
}
/* less table padding, and not wasting space in cells without a sort button */
.skin-citizen table.wikitable tr td,
.skin-citizen table.wikitable tr th {
padding: 5px;
}
.skin-citizen table.wikitable tr th.headerSort {
padding-right: 21px;
}
/* helper classes to change alignment of columns in table */
.col-1-center td:nth-child(1) { text-align: center; }
.col-2-center td:nth-child(2) { text-align: center; }
.col-3-center td:nth-child(3) { text-align: center; }
.col-4-center td:nth-child(4) { text-align: center; }
.col-5-center td:nth-child(5) { text-align: center; }
.col-6-center td:nth-child(6) { text-align: center; }
.col-7-center td:nth-child(7) { text-align: center; }
.col-8-center td:nth-child(8) { text-align: center; }
.col-9-center td:nth-child(9) { text-align: center; }
.col-1-end td:nth-child(1) { text-align: end; }
.col-2-end td:nth-child(2) { text-align: end; }
.col-3-end td:nth-child(3) { text-align: end; }
.col-4-end td:nth-child(4) { text-align: end; }
.col-5-end td:nth-child(5) { text-align: end; }
.col-6-end td:nth-child(6) { text-align: end; }
.col-7-end td:nth-child(7) { text-align: end; }
.col-8-end td:nth-child(8) { text-align: end; }
.col-9-end td:nth-child(9) { text-align: end; }
/* font based on in-game Tekken symbols */
@font-face {
font-family: IronFist;
src: url('/w/skins/Tekken/Iron-Fist.woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
.ironfist {
font-family: IronFist;
}
/*
* Colors are from https://www.hsluv.org/ color space
*
* Light mode bg: hsluv(0, 0, 100)
* Dark mode bg: hsluv(0, 0, 5)
*
* == hue
* red 12
* yellow 75
* green 120
* teal 160
* blue 240
* purple 300
*
* == saturation
* base 100
* muddy 50
*
* == lightness
* base 90
* {n} 100 - {n}
*
* == lightness (dark mode)
* base 15
* {n} 5 + {n}
*/
:root {
--blue-05: #e7f2ff;
--blue-15: #b2d8ff;
--blue-muddy-05: #ecf1f8;
--blue: #cde5ff;
--yellow: #fee300;
--green: #81ff26;
--red: #ffdada;
--purple: #f8d8ff;
--teal: #28ffcb;
}
@media (prefers-color-scheme: dark) {
:root {
--blue-05: #001e2f;
--blue-15: #00344e;
--blue-muddy-05: #121d26;
--blue: #00293f;
--yellow: #2c2600;
--green: #102c00;
--red: #540001;
--purple: #47004f;
--teal: #002c21;
}
body.skin-citizen {
background-color: #111111;
}
}
.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-blue-05 { background-color: var(--blue-05); }
.border-left-blue-15 { border-left-color: var(--blue-15); }
.hover-bg-blue-muddy-05:hover {
background-color: var(--blue-muddy-05);
}