gallery/style/shiny/pkmn.css

151 lines
2.7 KiB
CSS
Raw Normal View History

2021-03-12 23:28:43 -05:00
.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: '+'; }
2021-03-12 23:28:43 -05:00
.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');
}