Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
:root {
--maroon: #cf0000;
--maroon-darker: #a80101;
--red: #f90101;
--green: #009f15;
--blue: #1475bb;
--black: #2d2e30;
--black-darker: #1d1f21;
--grey: #d7d7d7;
--standard-border: #c2c2c2;
/* Pokemon Types */
--bug: #A6B91A;
--dark: #705746;
--dragon: #6F35FC;
--electric: #F7D02C;
--fairy: #D685AD;
--fighting: #C22E28;
--fire: #EE8130;
--flying: #A98FF3;
--ghost: #735797;
--grass: #7AC74C;
--ground: #E2BF65;
--ice: #96D9D6;
--normal: #A8A77A;
--poison: #A33EA1;
--psychic: #F95587;
--rock: #B6A136;
--steel: #B7B7CE;
--unknown: #68A090;
--water: #6390F0;
/* Etc */
--male: #4DA3FF;
--female: #FF4D6D;
--genderless: #6E6E6E;
}
* { font-family: Verdana,Arial,Helvetica,sans-serif; }
/* Table for navigational menu on drop page */
td.nav { opacity: 1; filter: alpha(opacity=100); }
td.nav:hover { opacity: 0.5; filter: alpha(opacity=50); }
table.dex tr td a { color: #ffffff !important; }
table.dex {
color: #fff;
text-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a;
box-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a;
background-color: var(--maroon);
border: 2px solid var(--maroon-darker);
border-radius: 10px;
padding: 0 10px 0 10px;
}
/* Info panel, float right */
info-panel-right { float: right; }
/* Type background-colors */
.container-bug, .bug-dex, .bug-header { background-color: var(--bug); }
.container-electric, .electric-dex, .electric-header { background-color: var(--electric); }
.container-dark, .dark-dex, .dark-header { background-color: var(--dark); color: #fff; }
.container-psychic,.psychic-dex,.psychic-header { background-color: var(--psychic); }
.container-normal, .normal-dex, .normal-header { background-color: var(--normal); }
.container-fighting, .fighting-dex, .fighting-header { background-color: var(--fighting); color: #fff; }
.container-flying, .flying-dex, .flying-header { background-color: var(--flying); }
.container-poison, .poison-dex, .poison-header { background-color: var(--poison); color: #fff; }
.container-ground, .ground-dex, .ground-header { background-color: var(--ground); }
.container-rock, .rock-dex, .rock-header { background-color: var(--rock); }
.container-ghost, .ghost-dex, .ghost-header { background-color: var(--ghost); color: #fff; }
.container-dragon, .dragon-dex, .dragon-header { background-color: var(--dragon); color: #fff; }
.container-fairy, .fairy-dex, .fairy-header { background-color: var(--fairy); }
.container-grass, .grass-dex, .grass-header { background-color: var(--grass); }
.container-steel, .steel-dex, .steel-header { background-color: var(--steel); }
.container-ice, .ice-dex, .ice-header { background-color: var(--ice); }
.container-fire, .fire-dex, .fire-header { background-color: var(--fire); }
.container-water, .water-dex, .water-header { background-color: var(--water); }
.container-unknown, .unknown-dex, .unknown-header { background-color: var(--unknown); }
.container-attacks, .container-pkmn { background-color: var(--maroon) }
.container-sidequests { background-color: #DA9919 }
.container-sidequestsub { background-color: #FFC966 }
.container-sidequestsub, .container-sidequests, .container-bug, .container-electric, .container-dark, .container-psychic, .container-normal, .container-fighting, .container-flying, .container-poison, .container-ground, .container-rock, .container-ghost, .container-dragon, .container-fairy, .container-grass, .container-steel, .container-ice, .container-fire, .container-water, .container-unknown, .container-attacks, .bug-dex, .electric-dex, .dark-dex, .psychic-dex, .normal-dex, .fighting-dex, .flying-dex, .poison-dex, .ground-dex, .rock-dex, .ghost-dex, .dragon-dex, .fairy-dex, .grass-dex, .steel-dex, .ice-dex, .fire-dex, .water-dex, .unknown-dex {
border: 3px solid rgba(0,0,0,0.1);
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.bug, .electric, .dark, .psychic, .normal, .fighting, .flying, .poison, .ground, .rock, .ghost, .dragon, .fairy, .grass, .steel, .ice, .fire, .water, .unknown, .attacks, .pkmn {
color: rgba(0,0,0,0.7);
background-color: #fff;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 10px;
padding: 10px;
background: rgba(255,255,255,0.5);
}
/* General type bar for use with type effectiveness sections */
.type {
width: 100px;
border-radius: 20px;
border: 1px solid black;
text-align: center;
margin: 5px;
float: left;
}
/*
* StatBar
* Anything where you need to display something in a small bar
* For example, gender ratio or HP - This can be used
*/
.statbarLeft {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
color: #FFF;
height: 10px;
overflow: hidden;
}
.statbarRight {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color: #000;
height: 10px;
overflow: hidden;
}
/* Gender ratio bars */
.male { color: var(--male); }
.female { color: var(--female); }
.maleOnly, .male87, .male75, .male50, .male25 { background: var(--male); }
.femaleOnly, .female75, .female50, .female25, .female12 { background: var(--female); }
.genderless { background: var(--genderless); }
.male87, .male75, .male50, .male25, .female12, .female25, .female50, .female75 { float: left; }
.male87 { width: 86.5%; }
.male75 { width: 74%; }
.male50 { width: 49%; }
.male25 { width: 24%; }
.female12 { width: 11.5%; }
.female25 { width: 24%; }
.female50 { width: 49%; }
.female75 { width: 74%; }
.genderless, .femaleOnly, .maleOnly {
width: 100%;
border-radius: 20px;
color: #FFF;
height: 10px;
overflow: hidden;
}
.dragon-dex a, .dragon-dex a:visited, .dragon-dex a:active, .poison-dex a, .poison-dex a:visited, .poison-dex a:active, .ghost-dex a, .ghost-dex a:visited, .ghost-dex a:active, .dark-dex a, .dark-dex a:visited, .dark-dex a:active { color: #ffffff; }
/* Various global classes */
.width-100 { width: 100%; }
.width-50 { width: 50%; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.float-left { float: left; }
.float-right { float: right; }
.margin-right-10 { margin-right: 10px; }
.margin-right-3 { margin-right: 3px; }
.margin-left-10 { margin-left: 10px; }
.margin-left-3 { margin-left: 3px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-10 { margin-top: 10px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-10 { margin-bottom: 10px; }
.border-rad-10 { border-radius: 10px; }
/* Map selection */
.mapSelection {
height: 150px;
width: 150px;
box-shadow: 15px 15px 15px 0px rgba(0,0,0,0.5);
}
.mapHover {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.mapHover:hover, .mapHover:focus, .mapHover:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}