Template:Main Page/styles.css: Difference between revisions
| [checked revision] | [checked revision] |
Aurelianus (talk | contribs) Created page with "→{{pp|small=yes}}: .mp-box { border: 1px solid #aaa; →all colors overriden on specific elements in @media screen: 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 colors overriden on specific elements in @media screen: margin: 0.5em 0; padding: 0.2em 0.4em; font-size: 120%; font-weight: bold; font-family: inherit; } .mp-later { font-size: 85%; fon..." |
Aurelianus (talk | contribs) No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* {{pp|small=yes}} */ | /* {{pp|small=yes}} */ | ||
/* ===================== | |||
ORIGINAL WIKIPEDIA CSS | |||
===================== */ | |||
.mp-box { | .mp-box { | ||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
padding: 0 0.5em 0.5em; | padding: 0 0.5em 0.5em; | ||
margin-top: 4px; | margin-top: 4px; | ||
| Line 7: | Line 12: | ||
.mp-h2, | .mp-h2, | ||
body.skin-timeless .mp-h2 { | body.skin-timeless .mp-h2 { | ||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
margin: 0.5em 0; | margin: 0.5em 0; | ||
padding: 0.2em 0.4em; | padding: 0.2em 0.4em; | ||
| Line 53: | Line 58: | ||
#articlecount > ul > li { | #articlecount > ul > li { | ||
margin: 0; | margin: 0; | ||
display: inline; | display: inline; | ||
} | } | ||
| Line 71: | Line 76: | ||
} | } | ||
.mp-contains-float::after { | .mp-contains-float::after { | ||
content: ""; | content: ""; | ||
| Line 79: | Line 83: | ||
@media (max-width: 875px) { | @media (max-width: 875px) { | ||
#mp-tfp table, | #mp-tfp table, | ||
#mp-tfp tr, | #mp-tfp tr, | ||
| Line 95: | Line 97: | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
#articlecount > ul > li { | #articlecount > ul > li { | ||
display: block; | display: block; | ||
| Line 110: | Line 107: | ||
display: flex; | display: flex; | ||
} | } | ||
#mp-left { | #mp-left { | ||
flex: 1 1 55%; | flex: 1 1 55%; | ||
margin-right: 2px; | margin-right: 2px; | ||
} | } | ||
#mp-right { | #mp-right { | ||
flex: 1 1 45%; | flex: 1 1 45%; | ||
| Line 123: | Line 120: | ||
@media screen { | @media screen { | ||
#mp- | #mp-left { background-color: #f5fffa; border-color: #cef2e0; } | ||
#mp-right { background-color: #f5faff; border-color: #cedff2; } | |||
#mp-middle { background-color: #fff5fa; border-color: #f2cedd; } | |||
#mp-lower { background-color: #faf5ff; border-color: #ddcef2; } | |||
} | |||
#mp- | |||
/* ===================== | |||
HERO + MODERN OVERRIDES | |||
===================== */ | |||
#mp- | /* HERO SECTION */ | ||
#hero { | |||
min-height: 65vh; | |||
display: flex; | |||
align-items: center; | |||
#mp- | justify-content: center; | ||
} | |||
.hero-inner { | |||
text-align: center; | |||
max-width: 900px; | |||
padding: 2rem; | |||
} | |||
} | |||
.hero-logo img { | |||
max-width: 280px; | |||
margin-bottom: 1.5rem; | |||
} | |||
} | |||
.hero-title { | |||
# | font-size: 3rem; | ||
font-weight: 600; | |||
margin: 0; | |||
} | } | ||
.hero-title span { | |||
color: #c40000; | |||
} | |||
.hero-tagline { | |||
font-size: 1.1rem; | |||
opacity: 0.75; | |||
margin: 0.6rem 0 2rem; | |||
} | |||
.hero-search { | |||
max-width: 600px; | |||
margin: 0 auto 1.5rem; | |||
} | } | ||
.hero-stats { | |||
font-size: 0.9rem; | |||
opacity: 0.6; | |||
} | |||
/* SOFTEN WIKIPEDIA BOX LOOK */ | |||
.mp-box { | |||
border: none; | |||
background: transparent; | |||
padding: 0.5rem 0; | |||
} | |||
.mp-h2 { | |||
border: none; | |||
background: none; | |||
font-size: 1.4rem; | |||
padding: 0; | |||
} | |||
/* PUSH CLASSIC CONTENT DOWN */ | |||
#mp-upper, | |||
#mp-middle, | |||
#mp-lower, | |||
#mp-bottom { | |||
max-width: 1200px; | |||
margin: 3rem auto; | |||
} | |||
/* DISABLE OLD WELCOME BOX */ | |||
#mp-topbanner { | |||
display: none; | |||
} | |||
/* NIGHT MODE */ | |||
html.skin-theme-clientpref-night #hero { | |||
background-color: #0f1115; | |||
} | |||
html.skin-theme-clientpref-night .hero-title { | |||
color: #f5f5f5; | |||
} | } | ||
html.skin-theme-clientpref-night .hero-tagline, | |||
html.skin-theme-clientpref-night .hero-stats { | |||
opacity: 0.7; | |||
} | } | ||