MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 11:45, 16 September 2020

/* 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;
width: 100% !important;
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; }
/* Background for attack table headers */
.container-attacks,.container-pkmn { background-color: #A80101 }
/*Background for Sidequests*/
.container-sidequests { background-color: #DA9919 }
.container-sidequestsub { background-color: #FFC966 }

.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-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;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
padding: 10px;
margin: 10px;
}

table.container-grass,table.container-electric,table.container-dark,table.container-psychic,table.container-normal,table.container-fighting,table.container-flying,table.container-poison,table.container-ground,table.container-rock,table.container-ghost,table.container-dragon,table.container-fairy,table.container-steel,table.container-ice,table.container-fire,table.container-water,table.container-unknown {
width: 100% !important;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-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;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-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;
-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 Div
 * 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;
}

/* 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;
}