16,945
edits
Cleaned up repetitive & outdated CSS - variables added - WIP
m (Make text readable on dark backgrounds) |
(Cleaned up repetitive & outdated CSS - variables added - WIP) |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* 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 */ | /* Table for navigational menu on drop page */ | ||
table.dex tr td a { | td.nav { opacity: 1; filter: alpha(opacity=100); } | ||
color: #ffffff !important; | td.nav:hover { opacity: 0.5; filter: alpha(opacity=50); } | ||
} | table.dex tr td a { color: #ffffff !important; } | ||
table.dex { | table.dex { | ||
color: #fff; | color: #fff; | ||
text-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a; | text-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a; | ||
box-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a; | box-shadow: 0 0 3px #0f0f0f, 0 0 5px #1a1a1a; | ||
background-color: | background-color: var(--maroon); | ||
border: 2px solid | border: 2px solid var(--maroon-darker); | ||
border-radius: 10px; | |||
padding: 0 10px 0 10px; | |||
padding: 0 10px 0 10px; | |||
} | } | ||
/* Info panel, float right */ | /* Info panel, float right */ | ||
info-panel-right { | info-panel-right { float: right; } | ||
float: right; | |||
} | |||
/* Type background-colors */ | /* Type background-colors */ | ||
.container-bug,.bug-dex,.bug-header { background-color: | .container-bug, .bug-dex, .bug-header { background-color: var(--bug); } | ||
.container-electric,.electric-dex,.electric-header { background-color: | .container-electric, .electric-dex, .electric-header { background-color: var(--electric); } | ||
.container-dark,.dark-dex,.dark-header{ background-color: | .container-dark, .dark-dex, .dark-header { background-color: var(--dark); color: #fff; } | ||
.container-psychic,.psychic-dex,.psychic-header { background-color: | .container-psychic,.psychic-dex,.psychic-header { background-color: var(--psychic); } | ||
.container-normal,.normal-dex,.normal-header { background-color: | .container-normal, .normal-dex, .normal-header { background-color: var(--normal); } | ||
.container-fighting,.fighting-dex,.fighting-header { background-color: | .container-fighting, .fighting-dex, .fighting-header { background-color: var(--fighting); color: #fff; } | ||
.container-flying,.flying-dex,.flying-header { background-color: | .container-flying, .flying-dex, .flying-header { background-color: var(--flying); } | ||
.container-poison,.poison-dex,.poison-header { background-color: | .container-poison, .poison-dex, .poison-header { background-color: var(--poison); color: #fff; } | ||
.container-ground,.ground-dex,.ground-header { background-color: | .container-ground, .ground-dex, .ground-header { background-color: var(--ground); } | ||
.container-rock,.rock-dex,.rock-header { background-color: | .container-rock, .rock-dex, .rock-header { background-color: var(--rock); } | ||
.container-ghost,.ghost-dex,.ghost-header { background-color: | .container-ghost, .ghost-dex, .ghost-header { background-color: var(--ghost); color: #fff; } | ||
.container-dragon,.dragon-dex,.dragon-header { background-color: | .container-dragon, .dragon-dex, .dragon-header { background-color: var(--dragon); color: #fff; } | ||
.container-fairy,.fairy-dex,.fairy-header { background-color: | .container-fairy, .fairy-dex, .fairy-header { background-color: var(--fairy); } | ||
.container-grass,.grass-dex,.grass-header { background-color: | .container-grass, .grass-dex, .grass-header { background-color: var(--grass); } | ||
.container-steel,.steel-dex,.steel-header { background-color: | .container-steel, .steel-dex, .steel-header { background-color: var(--steel); } | ||
.container-ice,.ice-dex,.ice-header { background-color: | .container-ice, .ice-dex, .ice-header { background-color: var(--ice); } | ||
.container-fire,.fire-dex,.fire-header { background-color: | .container-fire, .fire-dex, .fire-header { background-color: var(--fire); } | ||
.container-water,.water-dex,.water-header { background-color: | .container-water, .water-dex, .water-header { background-color: var(--water); } | ||
.container-unknown,.unknown-dex,.unknown-header { background-color: | .container-unknown, .unknown-dex, .unknown-header { background-color: var(--unknown); } | ||
.container-attacks,.container-pkmn { background-color: | .container-attacks, .container-pkmn { background-color: var(--maroon) } | ||
.container-sidequests { background-color: #DA9919 } | .container-sidequests { background-color: #DA9919 } | ||
.container-sidequestsub { background-color: #FFC966 } | .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 { | .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: 3px solid rgba(0,0,0,0.1); | ||
border | border-radius: 10px; | ||
padding: 10px; | |||
margin: 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 { | .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); | color: rgba(0,0,0,0.7); | ||
background-color: #fff; | background-color: #fff; | ||
border: 3px solid rgba(0,0,0,0.1); | border: 3px solid rgba(0,0,0,0.1); | ||
border | border-radius: 10px; | ||
padding: 10px; | |||
background: rgba(255,255,255,0.5); | |||
padding: 10px; | |||
background: rgba(255,255,255,0.5); | |||
} | } | ||
| Line 147: | Line 105: | ||
.type { | .type { | ||
width: 100px; | width: 100px; | ||
border-radius: 20px; | border-radius: 20px; | ||
border: 1px solid black; | |||
text-align: center; | |||
margin: 5px; | |||
float: left; | |||
border: 1px solid black; | |||
text-align: center; | |||
margin: 5px; | |||
float: left; | |||
} | } | ||
| Line 168: | Line 121: | ||
.statbarLeft { | .statbarLeft { | ||
border-top-left-radius: 20px; | |||
border-bottom-left-radius: 20px; | |||
color: #FFF; | |||
height: 10px; | |||
overflow: hidden; | |||
} | } | ||
.statbarRight { | .statbarRight { | ||
border-top-right-radius: 20px; | |||
border-bottom-right-radius: 20px; | |||
color: #000; | |||
height: 10px; | |||
overflow: hidden; | |||
} | } | ||
| Line 207: | Line 138: | ||
/* Gender ratio bars */ | /* Gender ratio bars */ | ||
.male { | .male { color: var(--male); } | ||
color: | .female { color: var(--female); } | ||
} | .maleOnly, .male87, .male75, .male50, .male25 { background: var(--male); } | ||
.female { | .femaleOnly, .female75, .female50, .female25, .female12 { background: var(--female); } | ||
color: | .genderless { background: var(--genderless); } | ||
} | .male87, .male75, .male50, .male25, .female12, .female25, .female50, .female75 { float: left; } | ||
.maleOnly { | .male87 { width: 86.5%; } | ||
.male75 { width: 74%; } | |||
} | .male50 { width: 49%; } | ||
.femaleOnly { | .male25 { width: 24%; } | ||
.female12 { width: 11.5%; } | |||
} | .female25 { width: 24%; } | ||
.genderless { | .female50 { width: 49%; } | ||
.female75 { width: 74%; } | |||
} | |||
.male87 { | |||
} | |||
.male75 { | |||
} | |||
.male50 { | |||
} | |||
.male25 { | |||
} | |||
.female12 { | |||
} | |||
.female25 { | |||
} | |||
.female50 { | |||
} | |||
.female75 { | |||
} | |||
.genderless, .femaleOnly, .maleOnly { | .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 */ | /* Various global classes */ | ||
| Line 313: | Line 186: | ||
.margin-bottom-10 { margin-bottom: 10px; } | .margin-bottom-10 { margin-bottom: 10px; } | ||
.border-rad-10 { | .border-rad-10 { border-radius: 10px; } | ||
border-radius: 10px; | |||
} | |||
/* Map selection */ | /* Map selection */ | ||
.mapSelection { | .mapSelection { | ||
height: 150px; | height: 150px; | ||
width: 150px; | width: 150px; | ||
box-shadow: 15px 15px 15px 0px rgba(0,0,0,0.5); | box-shadow: 15px 15px 15px 0px rgba(0,0,0,0.5); | ||
} | } | ||
.mapHover { | .mapHover { | ||
display: inline-block; | display: inline-block; | ||
vertical-align: middle; | vertical-align: middle; | ||
-webkit-transform: perspective(1px) translateZ(0); | -webkit-transform: perspective(1px) translateZ(0); | ||
transform: perspective(1px) translateZ(0); | transform: perspective(1px) translateZ(0); | ||
box-shadow: 0 0 1px transparent; | box-shadow: 0 0 1px transparent; | ||
-webkit-transition-duration: 0.3s; | -webkit-transition-duration: 0.3s; | ||
transition-duration: 0.3s; | transition-duration: 0.3s; | ||
-webkit-transition-property: transform; | -webkit-transition-property: transform; | ||
transition-property: transform; | transition-property: transform; | ||
-webkit-transition-timing-function: ease-out; | -webkit-transition-timing-function: ease-out; | ||
transition-timing-function: ease-out; | transition-timing-function: ease-out; | ||
} | } | ||
.mapHover:hover, .mapHover:focus, .mapHover:active { | .mapHover:hover, .mapHover:focus, .mapHover:active { | ||
-webkit-transform: translateY(-8px); | -webkit-transform: translateY(-8px); | ||
transform: translateY(-8px) | transform: translateY(-8px); | ||
} | } | ||