Join our new Discord server!

Difference between revisions of "MediaWiki:Common.css"

From Etrian Odyssey Wiki
m (Plainlist css from https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=880043218)
m (Slight hax to make the text outline look not terrible in non-Firefox browsers)
Line 135: Line 135:
 
font-family: Neuton, serif;
 
font-family: Neuton, serif;
 
font-style: normal;
 
font-style: normal;
-webkit-text-stroke: 0.4px black;
+
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 
}
 
}
  
Line 148: Line 148:
 
-webkit-text-stroke: 5px black;
 
-webkit-text-stroke: 5px black;
 
paint-order: stroke fill;
 
paint-order: stroke fill;
 +
text-shadow: none;
 
}
 
}
 
}
 
}

Revision as of 20:33, 6 February 2019

/* CSS placed here will be applied to all skins */
/* If CodeEditor complains about lines being "overqualified", ignore it,
   it's probably necessary to make it work because of how the skin is coded
*/

/* Neuton font, as used in EO4/EOU/EO2U */
@import url('https://fonts.googleapis.com/css?family=Neuton:400,400i,700&subset=latin-ext');

/* Tabs
borrows from https://fireemblemwiki.org/w/index.php?title=MediaWiki:Common.css&oldid=223358
*/
.tab_tab {
	background-color: #265;
	border: 2px solid #e0e0e0;
	padding: 3px 5px;
	margin: 0;
	cursor: pointer;
}

.tabcontainer {
	text-align: center;
	padding-bottom: 1px;
}

.tabselected {
	background-color: #222;
	color: #e0e0e0;
	border-bottom-color: #222;
}

.tabcontents {
	padding-top: 3px;
}

/* Main page */
.mp-header {
	border: 2px solid #e0e0e0;
	border-radius: 20px / 50%;
	background-color: #043;
	font-family: Neuton, serif;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.mp-header a, .mp-footer a {
	color: #09f;
}

.mp-header-1 {
	text-align: center;
	font-size: 90%;
	flex-basis: 100%;
}

.mp-header-2 {
	flex-basis: 100%;
}

.mp-header-2 ul {
	font-size: 120%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.mp-header-2 li {
	flex-basis: 30%;
}

.mp-footer {
	border: 2px solid #e0e0e0;
	display: flex;
	flex-wrap: wrap;
}

.mp-footer-section {
	margin: 5px;
	padding: 5px;
	border: 2px solid #e0e0e0;
	box-sizing: border-box; /*shut up CodeEditor this is 2019 nobody cares about IE6/7 any more*/
	background-color: #043;
	flex-basis: 100%;
}

.mp-section-heading {
	font-family: Neuton, serif;
	font-size: 150%;
	text-align: center;
}

@media (min-width: 768px) {
	.mp-header-1, .mp-header-2 {
		flex-basis: 45%;
	}
	
	.mp-footer-section {
		flex: 1 1 30%;
	}
}

@media (max-width: 500px) {
	.mp-header {
		border-radius: 10px;
	}
}

/* Main page game grid */
.mp-game-grid {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mp-game-box {
	border: 2px solid #e0e0e0;
	height: 150px;
	width: 250px;
	flex: 0 0 auto;
	margin: 5px;
}

.mp-game-box a {
	color: #e0e0e0;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 180%;
	height: 150px;
	width: 250px;
	background: rgba(0, 0, 0, 0.5);
	font-family: Neuton, serif;
	font-style: normal;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.mp-game-box a:visited, .mp-game-box a.new:visited {
	color: #e0e0e0;
}

/* CodeEditor doesn't recognise this and will yell at you when saving, but it does work;
   makes this appear in Firefox only, until more browsers support it */
@supports (-moz-appearance: none) {
	.mp-game-box a {
		-webkit-text-stroke: 5px black;
		paint-order: stroke fill;
		text-shadow: none;
	}
}

.mp-game-box a:hover {
	background: transparent;
	color: #E0E0E0;
	text-decoration: none !important;
}

.mp-game-eo1 {
	background-image: url(/w/skins/EOWiki/mainpage/EO1-mainpage.png);
}

.mp-game-eo2 {
	background-image: url(/w/skins/EOWiki/mainpage/EO2-mainpage.png);
}

.mp-game-eo3 {
	background-image: url(/w/skins/EOWiki/mainpage/EO3-mainpage.png);
}

.mp-game-eo4 {
	background-image: url(/w/skins/EOWiki/mainpage/EO4-mainpage.png);
}

.mp-game-eou {
	background-image: url(/w/skins/EOWiki/mainpage/EOU-mainpage.png);
}

.mp-game-eo2u {
	background-image: url(/w/skins/EOWiki/mainpage/EO2U-mainpage.png);
}

.mp-game-eo5 {
	background-image: url(/w/skins/EOWiki/mainpage/EO5-mainpage.png);
}

.mp-game-eox {
	background-image: url(/w/skins/EOWiki/mainpage/EOX-mainpage.png);
}

.mp-game-emd {
	background-image: url(/w/skins/EOWiki/mainpage/EMD-mainpage.png);
}

.mp-game-emd2 {
	background-image: url(/w/skins/EOWiki/mainpage/EMD2-mainpage.png);
}

.mp-game-pq1 {
	background-image: url(/w/skins/EOWiki/mainpage/PQ1-mainpage.png);
}

.mp-game-pq2 {
	background-image: url(/w/skins/EOWiki/mainpage/PQ2-mainpage.png);
}

.mp-game-tabs .tab_tab {
	border: 3px solid #396;
	border-radius: 10px / 50%;
	font-size: 150%;
	font-family: Neuton, serif;
}

.mp-game-tabs .tabcontent {
	margin-top: 10px;
}

/* Plain lists */
.plainlist ol, .plainlist ul {
	line-height: inherit;
	list-style: none none;
	margin: 0;
}

.plainlust ol li, .plainlist ul li {
	margin-bottom: 0;
}