Main Page/styles.css: Difference between revisions
From AlternateWiki
Content deleted Content added
Created page with "→{{pp|small=yes}}: .mp-box { border: 1px solid #aaa; →all border colors overriden on specific elements: padding: 0 0.5em 0.5em; margin-top: 4px; } .mp-h2, body.skin-timeless .mp-h2 { →Timeless needs a higher specificity: border: 1px solid #aaa; →all border colors overriden on specific elements: margin: 0.5em 0; padding: 0.2em 0.4em; font-size: 120%; font-weight: bold; font-family: inherit; } .mp-later { font-size: 85%; font-weight: normal; }..." |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
.mainpage-body { |
|||
/* {{pp|small=yes}} */ |
|||
margin:auto; |
|||
.mp-box { |
|||
border: 1px solid #aaa; /* all border colors overriden on specific elements */ |
|||
padding: 0 0.5em 0.5em; |
|||
margin-top: 4px; |
|||
} |
} |
||
#mainpage-banner span |
|||
.mp-h2, |
|||
{ |
|||
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */ |
|||
display: inline-block; |
|||
border: 1px solid #aaa; /* all border colors overriden on specific elements */ |
|||
width: 100%; |
|||
border-radius:12px; |
|||
padding: 0.2em 0.4em; |
|||
font-size: 120%; |
|||
font-weight: bold; |
|||
font-family: inherit; |
|||
} |
} |
||
.mainpage-banner-overlay { |
|||
position: absolute; |
|||
.mp-later { |
|||
top: 65px; |
|||
width: 100%; |
|||
font-weight: normal; |
|||
} |
} |
||
.mainpage-header { |
|||
#mp-topbanner { |
|||
display: flex; |
|||
background: #f9f9f9; |
|||
margin: 2em 5em; |
|||
border-color: #ddd; |
|||
align-items:baseline; |
|||
} |
} |
||
.header-intro { |
|||
#mp-welcomecount { |
|||
flex: 2; |
|||
text-align: center; |
|||
margin: 0.4em; |
|||
} |
} |
||
.header-intro h1 { |
|||
#mp-welcome { |
|||
font-size: 2.5em; |
|||
border: none; |
|||
padding: 0.1em; |
|||
margin: 0 0 .15em; |
|||
} |
} |
||
.header-intro p { |
|||
#mp-welcome h1 { |
|||
font-size: 1.1em; |
|||
line-height: 1.7em; |
|||
font-family: inherit; |
|||
display: inline; |
|||
border: none; |
|||
} |
} |
||
.header-stats { |
|||
#mp-free { |
|||
display: flex; |
|||
font-size: 95%; |
|||
align-items: center; |
|||
margin:auto; |
|||
} |
} |
||
.header-stats ul { |
|||
list-style: none; |
|||
#articlecount { |
|||
font-size: 85%; |
|||
} |
} |
||
@media screen and (max-width: 800px) { |
|||
/* clear fix */ |
|||
.mainpage-header { |
|||
.mp-contains-float::after { |
|||
flex-direction: column; |
|||
content: ""; |
|||
margin:2em; |
|||
display: block; |
|||
} |
|||
clear: both; |
|||
} |
} |
||
.mainpage-frame { |
|||
#mp-banner { |
|||
box-shadow: 0 0 .3em #999; |
|||
background: #fffaf5; |
|||
border- |
border-radius: 1em; |
||
width:100%; |
|||
} |
} |
||
.mainpage-frame:after { |
|||
display: block; |
|||
#mp-left { |
|||
content: ""; |
|||
background: #f5fffa; |
|||
clear: both; |
|||
border-color: #cef2e0; |
|||
} |
} |
||
.separator { |
|||
width:5%; |
|||
#mp-left .mp-h2 { |
|||
margin:1em auto; |
|||
background: #cef2e0; |
|||
border-color: #a3bfb1; |
|||
} |
} |
||
.frame-header { |
|||
background-color:#b50014; |
|||
#mp-right { |
|||
border-radius: 1em 1em 0.25em 0.25em; |
|||
background: #f5faff; |
|||
color: #fff; |
|||
padding: .4em .8em .5em; |
|||
font-weight: bold; |
|||
} |
} |
||
.frame-header:before { |
|||
display: inline-block; |
|||
#mp-right .mp-h2 { |
|||
/* Add some content in order to get normal line height, then make it transparent */ |
|||
background: #cedff2; |
|||
content: "x"; |
|||
border-color: #a3b0bf; |
|||
color: transparent; |
|||
width: 40px; |
|||
opacity: .7; |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
background-position: left center; |
|||
} |
} |
||
.frame-body { |
|||
padding: 1em; |
|||
#mp-middle { |
|||
background: #fff5fa; |
|||
border-color: #f2cedd; |
|||
} |
|||
#mp-middle .mp-h2 { |
|||
background: #f2cedd; |
|||
border-color: #bfa3af; |
|||
} |
|||
#mp-lower { |
|||
background: #faf5ff; |
|||
border-color: #ddcef2; |
|||
} |
|||
#mp-lower .mp-h2 { |
|||
background: #ddcef2; |
|||
border-color: #afa3bf; |
|||
} |
|||
#mp-bottom { |
|||
/* no background */ |
|||
border-color: #e2e2e2; |
|||
} |
|||
#mp-bottom .mp-h2 { |
|||
background: #eee; |
|||
border-color: #ddd; |
|||
} |
|||
@media (max-width: 875px) { |
|||
/* We need to improve Template:POTD as used on the main page so that these |
|||
* hacks aren't necessary */ |
|||
#mp-tfp table, |
|||
#mp-tfp tr, |
|||
#mp-tfp td, |
|||
#mp-tfp tbody { |
|||
display: block !important; |
|||
width: 100% !important; |
|||
box-sizing: border-box; |
|||
} |
|||
#mp-tfp tr:first-child td:first-child a { |
|||
text-align: center; |
|||
display: table; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
@media (min-width: 875px) { |
|||
#mp-upper { |
|||
display: flex; |
|||
} |
|||
#mp-left { |
|||
flex: 1 1 55%; |
|||
margin-right: 2px; |
|||
} |
|||
#mp-right { |
|||
flex: 1 1 45%; |
|||
margin-left: 2px; |
|||
} |
|||
} |
} |