150 lines
2.7 KiB
CSS
150 lines
2.7 KiB
CSS
.pkmn-type, .pkmn-move {
|
||
--icon-size: 20px;
|
||
}
|
||
|
||
.pkmn-type {
|
||
text-transform: uppercase;
|
||
font-size: 80%;
|
||
font-weight: 600;
|
||
text-shadow: none;
|
||
padding: 3px 4px 2px calc(var(--offset) + 0.4ex);
|
||
background:
|
||
var(--type-sym) left center no-repeat,
|
||
linear-gradient(105deg,
|
||
var(--type-col) 0,
|
||
var(--type-col) var(--offset),
|
||
#5d4e5d calc(var(--offset) + 1px)
|
||
);
|
||
--offset: calc(var(--icon-size) * 1.5);
|
||
}
|
||
|
||
.pkmn-move::before {
|
||
content: var(--type-sym);
|
||
display: inline-block;
|
||
height: var(--icon-size);
|
||
width: var(--icon-size);
|
||
vertical-align: -15%;
|
||
margin-right: 0.4ex;
|
||
}
|
||
|
||
.pkmn-type + .pkmn-type {
|
||
margin-left: 0.25ex;
|
||
}
|
||
|
||
.pkmn-species {
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
font-size: 75%;
|
||
}
|
||
|
||
.pkmn-stats dt {
|
||
font-size: 100%;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.pkmn-stats table {
|
||
width: 80%;
|
||
text-align: center;
|
||
margin: 0;
|
||
}
|
||
|
||
|
||
.pkmn-nature-down {
|
||
color: hsl(200deg, 80%, 80%);
|
||
}
|
||
|
||
.pkmn-nature-up {
|
||
color: hsl(340deg, 100%, 87%);
|
||
}
|
||
|
||
th:is(.pkmn-nature-down,.pkmn-nature-up)::after {
|
||
vertical-align: super;
|
||
font-weight: 500;
|
||
}
|
||
|
||
th.pkmn-nature-down::after { content: '−'; }
|
||
th.pkmn-nature-up::after { content: '+'; }
|
||
|
||
|
||
.bug {
|
||
--type-col: #83c300;
|
||
--type-sym: url('pkmn-types/bug.svg');
|
||
}
|
||
.dark {
|
||
--type-col: #5b5466;
|
||
--type-sym: url('pkmn-types/dark.svg');
|
||
}
|
||
.dragon {
|
||
--type-col: #0a6cc2;
|
||
--type-sym: url('pkmn-types/dragon.svg');
|
||
}
|
||
.electric {
|
||
--type-col: #fbd100;
|
||
--type-sym: url('pkmn-types/electric.svg');
|
||
}
|
||
.fairy {
|
||
--type-col: #ed9be8;
|
||
--type-sym: url('pkmn-types/fairy.svg');
|
||
}
|
||
.fighting {
|
||
--type-col: #e0306a;
|
||
--type-sym: url('pkmn-types/fighting.svg');
|
||
}
|
||
.fire {
|
||
--type-col: #ff9741;
|
||
--type-sym: url('pkmn-types/fire.svg');
|
||
}
|
||
.flying {
|
||
--type-col: #89aae3;
|
||
--type-sym: url('pkmn-types/flying.svg');
|
||
}
|
||
.ghost {
|
||
--type-col: #4c6ab2;
|
||
--type-sym: url('pkmn-types/ghost.svg');
|
||
}
|
||
.grass {
|
||
--type-col: #38bf4b;
|
||
--type-sym: url('pkmn-types/grass.svg');
|
||
}
|
||
.ground {
|
||
--type-col: #e87236;
|
||
--type-sym: url('pkmn-types/ground.svg');
|
||
}
|
||
.ice {
|
||
--type-col: #4cd1c0;
|
||
--type-sym: url('pkmn-types/ice.svg');
|
||
}
|
||
.normal {
|
||
--type-col: #919aa2;
|
||
--type-sym: url('pkmn-types/normal.svg');
|
||
}
|
||
.poison {
|
||
--type-col: #b567ce;
|
||
--type-sym: url('pkmn-types/poison.svg');
|
||
}
|
||
.psychic {
|
||
--type-col: #ff6675;
|
||
--type-sym: url('pkmn-types/psychic.svg');
|
||
}
|
||
.rock {
|
||
--type-col: #c8b686;
|
||
--type-sym: url('pkmn-types/rock.svg');
|
||
}
|
||
.steel {
|
||
--type-col: #5a8ea2;
|
||
--type-sym: url('pkmn-types/steel.svg');
|
||
}
|
||
.water {
|
||
--type-col: #5090d6;
|
||
--type-sym: url('pkmn-types/water.svg');
|
||
}
|
||
|
||
.bed {
|
||
/* inkscape notes:
|
||
* 340 ÷ 360 × 255 ≃ 241
|
||
* 0.83 × 255 ≃ 212
|
||
* 0.68 × 255 ≃ 173
|
||
*/
|
||
--type-col: hsl(340deg, 83%, 68%);
|
||
--type-sym: url('pkmn-types/bed.svg');
|
||
}
|