135 lines
2.4 KiB
CSS
135 lines
2.4 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.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');
|
|||
|
|
}
|