Worldpedia

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

← Older edit
remove spurious extra top margin due to changes in layout in recent weeks. this makes it so that there is the same amount of margin to the left as to the top of the content area (already ensured by the skin)
m 62 revisions imported
Tags: Mobile edit Mobile web edit
 
(34 intermediate revisions by 5 users not shown)
Line 1: Line 1:
/* {{pp|small=yes}} */
/* {{pp|small=yes}} */
#mp-topbanner {
.mp-box {
clear: both;
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
position: relative;
padding: 0 0.5em 0.5em;
box-sizing: border-box;
margin-top: 4px;
width: 100%;
margin-top: 0;
min-width: 47em;
border-color: #ddd;
background-color: #f9f9f9;
white-space: nowrap;
}
}


.mp-bordered,
.mp-h2,
.mp-h2,
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
border-width: 1px;
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
border-style: solid;
margin: 0.5em 0;
padding: 0.2em 0.4em;
font-size: 120%;
font-weight: bold;
font-family: inherit;
}
}


#mp-topbanner,
.mp-later {
.mp-h2,
font-size: 85%;
#mp-left {
font-weight: normal;
color: #000;
}
}


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


Line 34: Line 29:
font-size: 162%;
font-size: 162%;
padding: 0.1em;
padding: 0.1em;
}
#mp-welcome h1,
#mp-welcome .mw-heading1 {
font-size: inherit;
font-family: inherit;
display: inline;
border: none;
}
}


Line 44: Line 47:
}
}


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


#mp-portals li {
#articlecount > ul > li {
position: absolute;
margin: 0;  
left: 0;
display: inline;
top: 0;
}
}


#mp-portals .portal-hmid {
#articlecount > ul > li::after {
left: 33%;
content: " · ";
}
 
#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;
font-weight: bold;
}
}


#mp-banner {
#articlecount > ul > li:last-child::after {
margin-top: 4px;
content: "";
padding: 0.5em;
background-color: #fffaf5;
border-color: #f2e0ce;
}
 
.mp-h2,
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
margin: 0.5em;
padding: 0.2em 0.4em;
font-size: 120%;
font-weight: bold;
font-family: inherit;
}
}


h2.mp-h2::after { /* Remove borders in Timeless */
border: none;
}


.mp-later {
/* clear fix */
font-size: 85%;
.mp-contains-float::after {
font-weight: normal;
content: "";
}
display: block;
 
#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;
clear: both;
}
}


#mp-middle {
@media (max-width: 875px) {
margin-top: 4px;
/* We need to improve Template:POTD as used on the main page so that these
border-color: #f2cedd;
* hacks aren't necessary */
background: #fff5fa;
#mp-tfp table,
}
#mp-tfp tr,
#mp-tfp td,
#mp-tfp tbody {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}


#mp-middle,
#mp-tfp tr:first-child td:first-child a.mw-file-description {
#mp-lower,
text-align: center;
#mp-other-lower {
display: table;
overflow: auto;
margin: 0 auto;
}
#articlecount > ul > li::after {
content: "";
font-weight: normal;
}
#articlecount > ul > li {
display: block;
}
}
}


#mp-tfl-h2 {
@media (min-width: 875px) {
background: #f2cedd;
#mp-upper {
border-color: #bfa3af;
display: flex;
}
#mp-left {
flex: 1 1 55%;
margin-right: 2px;
}
#mp-right {
flex: 1 1 45%;
margin-left: 2px;
}
}
}


#mp-tfl {
@media screen {
padding: 0.3em 0.7em;
#mp-topbanner {
}
background-color: #f9f9f9;
border-color: #ddd;
}
#mp-banner {
background-color: #fffaf5;
border-color: #f2e0ce;
}
#mp-left {
background-color: #f5fffa;
border-color: #cef2e0;
}
#mp-left .mp-h2 {
background-color: #cef2e0;
border-color: #a3bfb1;
}
#mp-right {
background-color: #f5faff;
border-color: #cedff2;
}
#mp-right .mp-h2 {
background-color: #cedff2;
border-color: #a3b0bf;
}
#mp-middle {
background-color: #fff5fa;
border-color: #f2cedd;
}
#mp-middle .mp-h2 {
background-color: #f2cedd;
border-color: #bfa3af;
}
#mp-lower {
background-color: #faf5ff;
border-color: #ddcef2;
}
#mp-lower .mp-h2 {
background-color: #ddcef2;
border-color: #afa3bf;
}
#mp-bottom {
/* no background */
border-color: #e2e2e2;
}
#mp-bottom .mp-h2 {
background-color: #eee;
border-color: #ddd;
}


#mp-lower {
/* night mode */
margin-top: 4px;
html.skin-theme-clientpref-night #mp-topbanner {
border-color: #ddcef2;
background-color: #171a1d;
background: #faf5ff;
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-banner {
background-color: #431107;
border-color: #663428;
}
html.skin-theme-clientpref-night #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
html.skin-theme-clientpref-night #mp-left .mp-h2 {
background-color: #104437;
border-color: #2f4d41;
}
html.skin-theme-clientpref-night #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
html.skin-theme-clientpref-night #mp-right .mp-h2 {
background-color: #082849;
border-color: #a3b0bf;
}
html.skin-theme-clientpref-night #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
html.skin-theme-clientpref-night #mp-middle .mp-h2 {
background-color: #882c43;
border-color: #926c80;
}
html.skin-theme-clientpref-night #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
html.skin-theme-clientpref-night #mp-lower .mp-h2 {
background-color: #7545ab;
border-color: #afa3bf;
}
html.skin-theme-clientpref-night #mp-bottom {
/* no background */
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-bottom .mp-h2 {
background-color: #3d3d3d;
border-color: #676767;
}
}
}


#mp-tfp-h2 {
/* OS night mode */
background: #ddcef2;
@media screen and ( prefers-color-scheme: dark ) {
border-color: #afa3bf;
html.skin-theme-clientpref-os #mp-topbanner {
}
background-color: #171a1d;
 
border-color: #676767;
#mp-tfp {
}
margin: 0.1em 0.4em 0.6em;
}
html.skin-theme-clientpref-os #mp-banner {
 
background-color: #431107;
#mp-other-lower {
border-color: #663428;
padding: 0;
}
border-color: #e2e2e2;
margin-top: 4px;
html.skin-theme-clientpref-os #mp-left {
}
background-color: #0b1e1c;
 
border-color: #104437;
#mp-dyk,
}
#mp-otd,
#mp-other-lower {
html.skin-theme-clientpref-os #mp-left .mp-h2 {
padding-bottom: 0.5em;
background-color: #104437;
}
border-color: #2f4d41;
 
}
#mp-other-lower .mp-h2 {
background: #eee;
html.skin-theme-clientpref-os #mp-right {
border-color: #ddd;
background-color: #0d1a27;
color: #222;
border-color: #082849;
}
}
 
@media (max-width: 875px) {
body.skin--responsive #mp-welcomecount {
html.skin-theme-clientpref-os #mp-right .mp-h2 {
width: auto;
background-color: #082849;
border-color: #a3b0bf;
}
}
 
body.skin--responsive #mp-topbanner {
html.skin-theme-clientpref-os #mp-middle {
min-width: 0;
background-color: #270e1a;
white-space: normal;
border-color: #882c43;
}
}
body.skin--responsive #mp-portals {
html.skin-theme-clientpref-os #mp-middle .mp-h2 {
display: block;
background-color: #882c43;
position: static;
border-color: #926c80;
width: auto;
min-width: 0;
text-align: center;
border-top: 1px solid #ddd;
padding: 0.4em 0;
margin: 0 0.4em;
}
}
body.skin--responsive #mp-portals li {
html.skin-theme-clientpref-os #mp-lower {
position: static;
background-color: #130e20;
display: inline;
border-color: #7545ab;
padding: 0 5px;
}
}
body.skin--responsive #mp-topbanner .portal-hright {
html.skin-theme-clientpref-os #mp-lower .mp-h2 {
white-space: nowrap;
background-color: #7545ab;
border-color: #afa3bf;
}
}
body.skin--responsive table,
html.skin-theme-clientpref-os #mp-bottom {
body.skin--responsive tr,
/* no background */
body.skin--responsive td,
border-color: #676767;
body.skin--responsive tbody {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
}
 
body.skin--responsive #mp-tfp tr:first-child td:first-child a {
html.skin-theme-clientpref-os #mp-bottom .mp-h2 {
text-align: center;
background-color: #3d3d3d;
display: table;
border-color: #676767;
margin: 0 auto;
}
}
}
}
Retrieved from "https://en.worldpedia.org/wiki/Worldpedia:Main_Page/styles.css"