MediaWiki:Common.css: Difference between revisions

Latest revision as of 19:18, 17 October 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  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: #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,.bug-header { background-color: #A8B820; }
.container-electric,.electric-dex,.electric-header { background-color: #F8D030; }
.container-dark,.dark-dex,.dark-header{ background-color: #705848; }
.container-psychic,.psychic-dex,.psychic-header { background-color: #F85888; }
.container-normal,.normal-dex,.normal-header { background-color: #A8A878; }
.container-fighting,.fighting-dex,.fighting-header { background-color: #C03028; }
.container-flying,.flying-dex,.flying-header { background-color: #A890F0; }
.container-poison,.poison-dex,.poison-header { background-color: #A040A0; }
.container-ground,.ground-dex,.ground-header { background-color: #E0C068; }
.container-rock,.rock-dex,.rock-header { background-color: #B8A038; }
.container-ghost,.ghost-dex,.ghost-header { background-color: #705898; }
.container-dragon,.dragon-dex,.dragon-header { background-color: #7038F8; }
.container-fairy,.fairy-dex,.fairy-header { background-color: #EE99AC; }
.container-grass,.grass-dex,.grass-header { background-color: #78C850; }
.container-steel,.steel-dex,.steel-header { background-color: #B8B8D0; }
.container-ice,.ice-dex,.ice-header { background-color: #98D8D8; }
.container-fire,.fire-dex,.fire-header { background-color: #F08030; }
.container-water,.water-dex,.water-header { background-color: #6890F0; }
.container-unknown,.unknown-dex,.unknown-header { 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 */

.male {
color: #3355FF;
}
.female {
color: #FF77DD;
}
.maleOnly {
    background: #3355FF;
}
.femaleOnly {
    background: #FF77DD;
}
.genderless {
	background: #6E6E6E;
}
.male87 {
    float: left;
    background: #3355FF;
    width: 86.5%;
    border-right-width: 0px;
}
.male75 {
    float: left;
    background: #3355FF;
    width: 74%;
    border-right-width: 0px;
}
.male50 {
    float: left;
    background: #3355FF;
    width: 49%;
    border-right-width: 0px;
}
.male25 {
    float: left;
    background: #3355FF;
    width: 24%;
    border-right-width: 0px;
}
.female12 {
    float: left;
    background: #FF77DD;
    width: 11.5%;
    border-left-width: 0px;
}
.female25 {
    float: left;
    background: #FF77DD;
    width: 24%;
    border-left-width: 0px;
}
.female50 {
    float: left;
    background: #FF77DD;
    width: 49%;
    border-left-width: 0px;
}
.female75 {
    float: left;
    background: #FF77DD;
    width: 74%;
    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;
}


/* 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 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
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);
}
.pokeFont {
font-family: 'Pokemon DP', sans-serif;
}