MediaWiki:Common.css: Difference between revisions

Latest revision as of 22:51, 28 October 2025

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