No edit summary |
m (Reworked gender bars to cut down on html in the articles and work needed.) |
||
Line 159: | Line 159: | ||
/* | /* | ||
* StatBar | * StatBar | ||
* Anything where you need to display something in a small bar | * Anything where you need to display something in a small bar | ||
* For example, gender ratio or HP - This can be used | * For example, gender ratio or HP - This can be used | ||
*/ | */ | ||
.statbarLeft{ | .statbarLeft { | ||
border-top-left-radius: 20px; | border-top-left-radius: 20px; | ||
-moz-border-radius-topleft: 20px; | -moz-border-radius-topleft: 20px; | ||
-webkit-border-top-left-radius: 20px; | -webkit-border-top-left-radius: 20px; | ||
-khtml-border-top-left-radius: 20px; | -khtml-border-top-left-radius: 20px; | ||
-icab-border-top-left-radius: 20px; | -icab-border-top-left-radius: 20px; | ||
-o-border-top-left-radius: 20px; | -o-border-top-left-radius: 20px; | ||
border-bottom-left-radius: 20px; | border-bottom-left-radius: 20px; | ||
-moz-border-radius-bottomleft: 20px; | -moz-border-radius-bottomleft: 20px; | ||
-webkit-border-bottom-left-radius: 20px; | -webkit-border-bottom-left-radius: 20px; | ||
-khtml-border-bottom-left-radius: 20px; | -khtml-border-bottom-left-radius: 20px; | ||
-icab-border-bottom-left-radius: 20px; | -icab-border-bottom-left-radius: 20px; | ||
-o-border-bottom-left-radius: 20px; | -o-border-bottom-left-radius: 20px; | ||
color: #FFF; | color: #FFF; | ||
height: 10px; | height: 10px; | ||
border: 0.5px solid black; | border: 0.5px solid black; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.statbarRight{ | .statbarRight { | ||
border-top-right-radius: 20px; | border-top-right-radius: 20px; | ||
-moz-border-radius-topright: 20px; | -moz-border-radius-topright: 20px; | ||
-webkit-border-top-right-radius: 20px; | -webkit-border-top-right-radius: 20px; | ||
-khtml-border-top-right-radius: 20px; | -khtml-border-top-right-radius: 20px; | ||
-icab-border-top-right-radius: 20px; | -icab-border-top-right-radius: 20px; | ||
-o-border-top-right-radius: 20px; | -o-border-top-right-radius: 20px; | ||
border-bottom-right-radius: 20px; | border-bottom-right-radius: 20px; | ||
-moz-border-radius-bottomright: 20px; | -moz-border-radius-bottomright: 20px; | ||
-webkit-border-bottom-right-radius: 20px; | -webkit-border-bottom-right-radius: 20px; | ||
-khtml-border-bottom-right-radius: 20px; | -khtml-border-bottom-right-radius: 20px; | ||
-icab-border-bottom-right-radius: 20px; | -icab-border-bottom-right-radius: 20px; | ||
-o-border-bottom-right-radius: 20px; | -o-border-bottom-right-radius: 20px; | ||
color: #000; | color: #000; | ||
height: 10px; | height: 10px; | ||
border: 0.5px solid black; | border: 0.5px solid black; | ||
overflow: hidden; | overflow: hidden; | ||
} | |||
/* Gender ratio bars */ | |||
.maleOnly { | |||
background: #3355FF; | |||
} | |||
.femaleOnly { | |||
background: #FF77DD; | |||
} | |||
.genderless { | |||
background: #6E6E6E; | |||
} | |||
.male87 { | |||
float: left; | |||
background: #3355FF; | |||
width: 87.5%; | |||
border-right-width: 0px; | |||
} | |||
.male75 { | |||
float: left; | |||
background: #3355FF; | |||
width: 75%; | |||
border-right-width: 0px; | |||
} | |||
.male50 { | |||
float: left; | |||
background: #3355FF; | |||
width: 50%; | |||
border-right-width: 0px; | |||
} | |||
.male25 { | |||
float: left; | |||
background: #3355FF; | |||
width: 25%; | |||
border-right-width: 0px; | |||
} | |||
.female12 { | |||
float: left; | |||
background: #FF77DD; | |||
width: 12.5%; | |||
border-left-width: 0px; | |||
} | |||
.female25 { | |||
float: left; | |||
background: #FF77DD; | |||
width: 25%; | |||
border-left-width: 0px; | |||
} | |||
.female50 { | |||
float: left; | |||
background: #FF77DD; | |||
width: 50%; | |||
border-left-width: 0px; | |||
} | |||
.female75 { | |||
float: left; | |||
background: #FF77DD; | |||
width: 75%; | |||
border-left-width: 0px; | |||
} | |||
.genderless, .femaleOnly, .maleOnly { | |||
width: 100%; | |||
float: left; | |||
-moz-border-radius: 20px; | |||
-webkit-border-radius: 20px; | |||
-khtml-border-radius: 20px; | |||
-icab-border-radius: 20px; | |||
-o-border-radius: 20px; | |||
color: #FFF; | |||
height: 10px; | |||
border: 0.5px solid black; | |||
overflow: hidden; | |||
} | } | ||
Revision as of 16:20, 13 July 2017
/* CSS placed here will be applied to all skins */ * { 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 { color: #fff; text-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a; box-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a; background-color: #a80101; border: 2px solid #a00101; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-top-left-radius: 10px; -moz-border-top-right-radius: 10px; -moz-border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -icab-border-top-left-radius: 10px; -icab-border-top-right-radius: 10px; -icab-border-bottom-left-radius: 10px; -icab-border-bottom-right-radius: 10px; -o-border-top-left-radius: 10px; -o-border-top-right-radius: 10px; -o-border-bottom-left-radius: 10px; -o-border-bottom-right-radius: 10px; padding: 0 10px 0 10px; } /* Info panel, float right */ info-panel-right { float: right; } /* Type background-colors */ .container-bug,.bug-dex { background-color: #A8B820; } .container-electric,.electric-dex { background-color: #F8D030; } .container-dark,.dark-dex{ background-color: #705848; } .container-psychic,.psychic-dex { background-color: #F85888; } .container-normal,.normal-dex { background-color: #A8A878; } .container-fighting,.fighting-dex { background-color: #C03028; } .container-flying,.flying-dex { background-color: #A890F0; } .container-poison,.poison-dex { background-color: #A040A0; } .container-ground,.ground-dex { background-color: #E0C068; } .container-rock,.rock-dex { background-color: #B8A038; } .container-ghost,.ghost-dex { background-color: #705898; } .container-dragon,.dragon-dex { background-color: #7038F8; } .container-fairy,.fairy-dex { background-color: #EE99AC; } .container-grass,.grass-dex { background-color: #78C850; } .container-steel,.steel-dex { background-color: #B8B8D0; } .container-ice,.ice-dex { background-color: #98D8D8; } .container-fire,.fire-dex { background-color: #F08030; } .container-water,.water-dex { background-color: #6890F0; } .container-unknown,.unknown-dex { background-color: #68A090; } .container-attacks,.container-pkmn { background-color: #A80101 } .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-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-top-left-radius: 10px; -moz-border-top-right-radius: 10px; -moz-border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -icab-border-top-left-radius: 10px; -icab-border-top-right-radius: 10px; -icab-border-bottom-left-radius: 10px; -icab-border-bottom-right-radius: 10px; -o-border-top-left-radius: 10px; -o-border-top-right-radius: 10px; -o-border-bottom-left-radius: 10px; -o-border-bottom-right-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-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-top-left-radius: 10px; -moz-border-top-right-radius: 10px; -moz-border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -icab-border-top-left-radius: 10px; -icab-border-top-right-radius: 10px; -icab-border-bottom-left-radius: 10px; -icab-border-bottom-right-radius: 10px; -o-border-top-left-radius: 10px; -o-border-top-right-radius: 10px; -o-border-bottom-left-radius: 10px; -o-border-bottom-right-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; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -icab-border-radius: 20px; -o-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; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-top-left-radius: 20px; -icab-border-top-left-radius: 20px; -o-border-top-left-radius: 20px; border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-bottom-left-radius: 20px; -icab-border-bottom-left-radius: 20px; -o-border-bottom-left-radius: 20px; color: #FFF; height: 10px; border: 0.5px solid black; overflow: hidden; } .statbarRight { border-top-right-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-right-radius: 20px; -icab-border-top-right-radius: 20px; -o-border-top-right-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-bottom-right-radius: 20px; -icab-border-bottom-right-radius: 20px; -o-border-bottom-right-radius: 20px; color: #000; height: 10px; border: 0.5px solid black; overflow: hidden; } /* Gender ratio bars */ .maleOnly { background: #3355FF; } .femaleOnly { background: #FF77DD; } .genderless { background: #6E6E6E; } .male87 { float: left; background: #3355FF; width: 87.5%; border-right-width: 0px; } .male75 { float: left; background: #3355FF; width: 75%; border-right-width: 0px; } .male50 { float: left; background: #3355FF; width: 50%; border-right-width: 0px; } .male25 { float: left; background: #3355FF; width: 25%; border-right-width: 0px; } .female12 { float: left; background: #FF77DD; width: 12.5%; border-left-width: 0px; } .female25 { float: left; background: #FF77DD; width: 25%; border-left-width: 0px; } .female50 { float: left; background: #FF77DD; width: 50%; border-left-width: 0px; } .female75 { float: left; background: #FF77DD; width: 75%; border-left-width: 0px; } .genderless, .femaleOnly, .maleOnly { width: 100%; float: left; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -icab-border-radius: 20px; -o-border-radius: 20px; color: #FFF; height: 10px; border: 0.5px solid black; 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; }