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

[checked revision][checked revision]
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..."
 
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; /* all colors overriden on specific elements in @media screen */
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 { /* Timeless needs a higher specificity */
body.skin-timeless .mp-h2 {
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
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:
}
}


/* clear fix */
.mp-contains-float::after {
.mp-contains-float::after {
content: "";
content: "";
Line 79: Line 83:


@media (max-width: 875px) {
@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 table,
#mp-tfp tr,
#mp-tfp tr,
Line 95: Line 97:
margin: 0 auto;
margin: 0 auto;
}
}
 
#articlecount > ul > li::after {
content: "";
font-weight: normal;
}
#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-topbanner {
#mp-left { background-color: #f5fffa; border-color: #cef2e0; }
background-color: #f9f9f9;
#mp-right { background-color: #f5faff; border-color: #cedff2; }
border-color: #ddd;
#mp-middle { background-color: #fff5fa; border-color: #f2cedd; }
}
#mp-lower { background-color: #faf5ff; border-color: #ddcef2; }
}
#mp-banner {
 
background-color: #fffaf5;
/* =====================
border-color: #f2e0ce;
  HERO + MODERN OVERRIDES
}
  ===================== */
 
#mp-left {
/* HERO SECTION */
background-color: #f5fffa;
#hero {
border-color: #cef2e0;
min-height: 65vh;
}
display: flex;
align-items: center;
#mp-left .mp-h2 {
justify-content: center;
background-color: #cef2e0;
}
border-color: #a3bfb1;
 
}
.hero-inner {
text-align: center;
#mp-right {
max-width: 900px;
background-color: #f5faff;
padding: 2rem;
border-color: #cedff2;
}
}
 
.hero-logo img {
#mp-right .mp-h2 {
max-width: 280px;
background-color: #cedff2;
margin-bottom: 1.5rem;
border-color: #a3b0bf;
}
}
 
.hero-title {
#mp-middle {
font-size: 3rem;
background-color: #fff5fa;
font-weight: 600;
border-color: #f2cedd;
margin: 0;
}
}
 
#mp-middle .mp-h2 {
.hero-title span {
background-color: #f2cedd;
color: #c40000;
border-color: #bfa3af;
}
}
 
.hero-tagline {
#mp-lower {
font-size: 1.1rem;
background-color: #faf5ff;
opacity: 0.75;
border-color: #ddcef2;
margin: 0.6rem 0 2rem;
}
}
 
#mp-lower .mp-h2 {
.hero-search {
background-color: #ddcef2;
max-width: 600px;
border-color: #afa3bf;
margin: 0 auto 1.5rem;
}
}
 
#mp-bottom {
.hero-stats {
/* no background */
font-size: 0.9rem;
border-color: #e2e2e2;
opacity: 0.6;
}
}
 
#mp-bottom .mp-h2 {
/* SOFTEN WIKIPEDIA BOX LOOK */
background-color: #eee;
.mp-box {
border-color: #ddd;
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;
}


/* night mode */
html.skin-theme-clientpref-night .hero-title {
html.skin-theme-clientpref-night #mp-topbanner {
color: #f5f5f5;
background-color: #171a1d;
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-banner {
background-color: #331a00;
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;
}
}
}


/* OS night mode */
html.skin-theme-clientpref-night .hero-tagline,
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-night .hero-stats {
html.skin-theme-clientpref-os #mp-topbanner {
opacity: 0.7;
background-color: #171a1d;
border-color: #676767;
}
html.skin-theme-clientpref-os #mp-banner {
background-color: #331a00;
border-color: #663428;
}
html.skin-theme-clientpref-os #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
html.skin-theme-clientpref-os #mp-left .mp-h2 {
background-color: #104437;
border-color: #2f4d41;
}
html.skin-theme-clientpref-os #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
html.skin-theme-clientpref-os #mp-right .mp-h2 {
background-color: #082849;
border-color: #a3b0bf;
}
html.skin-theme-clientpref-os #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
html.skin-theme-clientpref-os #mp-middle .mp-h2 {
background-color: #882c43;
border-color: #926c80;
}
html.skin-theme-clientpref-os #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
html.skin-theme-clientpref-os #mp-lower .mp-h2 {
background-color: #7545ab;
border-color: #afa3bf;
}
html.skin-theme-clientpref-os #mp-bottom {
/* no background */
border-color: #676767;
}
html.skin-theme-clientpref-os #mp-bottom .mp-h2 {
background-color: #3d3d3d;
border-color: #676767;
}
}
}