Jump to content

Worldpedia:Main Page/styles.css: Difference between revisions

From Worldpedia, the free encyclopedia
per tper
and lo, they said, we return portals to thee (and minerva gets main page columns from 875 to 1100px)
Line 10: Line 10:
background-color: #f9f9f9;
background-color: #f9f9f9;
white-space: nowrap;
white-space: nowrap;
}
body.skin-minerva #mp-topbanner {
min-width: 0;
white-space: normal;
}
}


Line 34: Line 29:
width: 22em;
width: 22em;
text-align: center;
text-align: center;
}
body.skin-minerva #mp-welcomecount {
width: auto;
}
}


Line 61: Line 52:
min-width: 25em;
min-width: 25em;
font-size: 95%;
font-size: 95%;
}
body.skin-minerva #mp-portals {
display: none;
}
}


Line 121: Line 108:
width: 100%;
width: 100%;
margin-top: 4px;
margin-top: 4px;
margin-bottom: 0;
border-spacing: 0;
border-spacing: 0;
border-collapse: separate;
}
}


Line 162: Line 151:
#mp-other-lower > div {
#mp-other-lower > div {
padding: 0.1em 0.6em;
padding: 0.1em 0.6em;
}
#mp-dyk,
#mp-otd {
padding-bottom: 0.5em;
}
}


Line 208: Line 192:
#mp-tfp {
#mp-tfp {
margin: 0.1em 0.4em 0.6em;
margin: 0.1em 0.4em 0.6em;
}
body.skin-minerva #mp-tfp tr:first-child td:first-child a {
text-align: center;
display: block;
}
}


#mp-other-lower {
#mp-other-lower {
padding-top: 4px;
padding: 0;
padding-bottom: 2px;
border-color: #e2e2e2;
border-color: #e2e2e2;
margin-top: 4px;
margin-top: 4px;
}
}


#mp-dyk,
#mp-otd,
#mp-other-lower {
padding-bottom: 0.5em;
}


#mp-other-lower .mp-h2 {
#mp-other-lower .mp-h2 {
Line 229: Line 212:
}
}


/* SKIN-MINERVA */
@media (max-width: 875px) {
body.skin-minerva table,
body.skin-minerva tr,
body.skin-minerva #mp-welcomecount,
body.skin-minerva td,
body.skin-timeless #mp-welcomecount {
body.skin-minerva tbody {
width: auto;
display: block !important;
}
width: 100% !important;
 
box-sizing: border-box;
body.skin-minerva #mp-topbanner,
body.skin-timeless #mp-topbanner {
min-width: 0;
white-space: normal;
}
body.skin-minerva #mp-portals,
body.skin-timeless #mp-portals {
display: block;
position: static;
width: auto;
min-width: 0;
text-align: center;
margin: 0 auto;
border-top: 1px solid #ddd;
padding: 0.4em 0;
margin: 0 0.4em;
}
body.skin-minerva #mp-portals li,
body.skin-timeless #mp-portals li {
position: static;
display: inline;
padding: 0 5px;
}
body.skin-minerva #mp-topbanner .portal-hright,
body.skin-timeless #mp-topbanner .portal-hright {
white-space: nowrap;
}
body.skin-minerva table,
body.skin-minerva tr,
body.skin-minerva td,
body.skin-minerva tbody,
body.skin-timeless table,
body.skin-timeless tr,
body.skin-timeless td,
body.skin-timeless tbody {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
 
body.skin-minerva #mp-tfp tr:first-child td:first-child a,
body.skin-timeless #mp-tfp tr:first-child td:first-child a {
text-align: center;
display: table;
margin: 0 auto;
}
}
}

Revision as of 02:56, 29 May 2020

/* {{pp|small=yes}} */
#mp-topbanner {
	clear: both;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1.2em 0 6px;
	min-width: 47em;
	border-color: #ddd;
	background-color: #f9f9f9;
	white-space: nowrap;
}

.mp-bordered,
.mp-h2,
body.skin-timeless .mp-h2 {
	border-width: 1px;
	border-style: solid;
}

#mp-topbanner,
.mp-h2,
#mp-left {
	color: #000;
}

#mp-welcomecount {
	margin: 0.4em;
	width: 22em;
	text-align: center;
}

#mp-welcome {
	font-size: 162%;
	padding: 0.1em;
}

#mp-free {
	font-size: 95%;
}

#articlecount {
	font-size: 85%;
}

#mp-portals {
	position: absolute;
	right: -1em;
	top: 50%;
	margin-top: -2.4em;
	width: 38%;
	min-width: 25em;
	font-size: 95%;
}

#mp-portals li {
	position: absolute;
	left: 0;
	top: 0;
}

#mp-portals .portal-hmid {
	left: 33%;
}

#mp-portals .portal-hright {
	left: 66%;
}

#mp-portals .portal-vmid {
	top: 1.6em;
}

#mp-portals .portal-vbot {
	top: 3.2em;
}

.portal-hright.portal-vbot {
	font-weight: bold;
}

#mp-banner {
	margin-top: 4px;
	padding: 0.5em;
	background-color: #fffaf5;
	border-color: #f2e0ce;
}

.mp-h2,
body.skin-timeless .mp-h2 {
	margin: 0.5em;
	padding: 0.2em 0.4em;
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
}

body.skin-timeless .mp-h2::after {
	border: none;
}

.mp-later {
	font-size: 85%;
	font-weight: normal;
}

#mp-upper {
	width: 100%;
	margin-top: 4px;
	margin-bottom: 0;
	border-spacing: 0;
	border-collapse: separate;
}

#mp-upper .mid-table {
	border-color: transparent;
}

#mp-left {
	width: 55%;
	border-color: #cef2e0;
	background: #f5fffa;
}

#mp-right {
	 width: 45%;
	 border-color: #cedff2;
	 background: #f5faff;
}

#mp-left,
#mp-right {
	 padding: 0;
	 vertical-align: top;
}

#mp-left .mp-h2 {
	background: #cef2e0;
	border-color: #a3bfb1;
}

#mp-right .mp-h2 {
	background: #cedff2;
	border-color: #a3b0bf;
}

#mp-tfa,
#mp-dyk,
#mp-itn,
#mp-otd,
#mp-other-lower > div {
	padding: 0.1em 0.6em;
}

#mp-dyk-h2,
#mp-otd-h2 {
	clear: both;
}

#mp-middle {
	margin-top: 4px;
	border-color: #f2cedd;
	background: #fff5fa;
}

#mp-middle,
#mp-lower,
#mp-other-lower {
	overflow: auto;
}

#mp-tfl-h2 {
	background: #f2cedd;
	border-color: #bfa3af;
}

#mp-tfl {
	padding: 0.3em 0.7em;
}

#mp-lower {
	margin-top: 4px;
	border-color: #ddcef2;
	background: #faf5ff;
}

#mp-tfp-h2 {
	background: #ddcef2;
	border-color: #afa3bf;
}

#mp-tfp {
	 margin: 0.1em 0.4em 0.6em;
}

#mp-other-lower {
	padding: 0;
	border-color: #e2e2e2;
	margin-top: 4px;
}

#mp-dyk,
#mp-otd,
#mp-other-lower {
	padding-bottom: 0.5em;
}

#mp-other-lower .mp-h2 {
	background: #eee;
	border-color: #ddd;
	color: #222;
}

@media (max-width: 875px) {
	
	body.skin-minerva #mp-welcomecount,
	body.skin-timeless #mp-welcomecount {
		width: auto;
	}

	body.skin-minerva #mp-topbanner,
	body.skin-timeless #mp-topbanner {
		min-width: 0;
		white-space: normal;
	}
	
	body.skin-minerva #mp-portals,
	body.skin-timeless #mp-portals {
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		text-align: center;
		margin: 0 auto;
		border-top: 1px solid #ddd;
		padding: 0.4em 0;
		margin: 0 0.4em;
	}
	
	body.skin-minerva #mp-portals li,
	body.skin-timeless #mp-portals li {
		position: static;
		display: inline;
		padding: 0 5px;
	}
	
	body.skin-minerva #mp-topbanner .portal-hright,
	body.skin-timeless #mp-topbanner .portal-hright {
		white-space: nowrap;
	}
	
	body.skin-minerva table,
	body.skin-minerva tr,
	body.skin-minerva td,
	body.skin-minerva tbody,
	body.skin-timeless table,
	body.skin-timeless tr,
	body.skin-timeless td,
	body.skin-timeless tbody {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	body.skin-minerva #mp-tfp tr:first-child td:first-child a,
	body.skin-timeless #mp-tfp tr:first-child td:first-child a {
		text-align: center;
		display: table;
		margin: 0 auto;
	}
}