MediaWiki:Common.css: Difference between revisions
Created page with "→CSS placed here will be applied to all skins: →Hide edit links only on Main Page: body.page-Main_Page .mw-editsection, body.page-Main_Page .mw-editsection-like { display: none; }"  |
mNo edit summary  |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* {{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 */ | |||
   display: | 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; | |||
} | |||
 | |||
#mp-welcomecount { | |||
text-align: center; | |||
margin: 0.4em; | |||
} | |||
 | |||
#mp-welcome { | |||
font-size: 162%; | |||
padding: 0.1em; | |||
} | |||
 | |||
#mp-welcome h1, | |||
#mp-welcome .mw-heading1 { | |||
font-size: inherit; | |||
font-family: inherit; | |||
display: inline; | |||
border: none; | |||
} | |||
 | |||
#mp-free { | |||
font-size: 95%; | |||
} | |||
 | |||
#articlecount { | |||
font-size: 85%; | |||
} | |||
 | |||
#articlecount > ul { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
 | |||
#articlecount > ul > li { | |||
margin: 0; | |||
display: inline; | |||
} | |||
 | |||
#articlecount > ul > li::after { | |||
content: " · "; | |||
font-weight: bold; | |||
} | |||
 | |||
#articlecount > ul > li:last-child::after { | |||
content: ""; | |||
} | |||
 | |||
#mp-banner { | |||
text-align: center; | |||
padding-top: 0.5em; | |||
} | |||
 | |||
/* clear fix */ | |||
.mp-contains-float::after { | |||
content: ""; | |||
display: block; | |||
clear: both; | |||
} | |||
 | |||
/* Avoid floating at lower resolutions when there is just 2-3 words to the right of the image especially at 400px. Please test at 400px before removing/revising these rules. */ | |||
@media (max-width: 500px) { | |||
 .mp-contains-float > * { | |||
  float: none !important; | |||
  margin: auto !important; | |||
 } | |||
 .mp-contains-float .mp-thumb { | |||
  margin: auto; | |||
 } | |||
} | |||
 | |||
@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.mw-file-description { | |||
text-align: center; | |||
display: table; | |||
margin: 0 auto; | |||
} | |||
#articlecount > ul > li::after { | |||
content: ""; | |||
font-weight: normal; | |||
} | |||
#articlecount > ul > li { | |||
display: block; | |||
} | |||
} | |||
 | |||
@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; | |||
} | |||
} | |||
 | |||
@media screen { | |||
#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; | |||
} | |||
 | |||
/* night mode */ | |||
html.skin-theme-clientpref-night #mp-topbanner { | |||
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 */ | |||
@media screen and ( prefers-color-scheme: dark ) { | |||
html.skin-theme-clientpref-os #mp-topbanner { | |||
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; | |||
} | |||
} | |||
 | |||
 | |||
.infobox-modern { | |||
  width: 22em; | |||
  max-width: 100%; | |||
  margin: 10px; | |||
  border: 1px solid #aaa; | |||
  background: #f9f9f9; | |||
} | |||
 | |||
/* Desktop alignment */ | |||
@media screen and (min-width: 769px) { | |||
  .infobox-modern { | |||
    float: right; | |||
    clear: right; | |||
  } | |||
} | |||
 | |||
/* Mobile fix (IMPORTANT) */ | |||
@media screen and (max-width: 768px) { | |||
  .infobox-modern { | |||
    float: none !important; | |||
    width: 100% !important; | |||
    margin: 10px auto; | |||
    display: block; | |||
  } | |||
} | |||
 | |||
 | |||
@media (min-width: 720px) { | |||
 .mw-flex-responsive { | |||
  flex-direction: row !important; | |||
  justify-content: space-between; | |||
 } | |||
} | |||
 | |||
@media screen and (max-width: 768px) { | |||
  .infobox { | |||
    float: none !important; | |||
    width: 100% !important; | |||
    margin: 0 0 1em 0 !important; | |||
  } | |||
} | |||
 | |||
.pdfembed, | |||
.pdfembed iframe, | |||
.pdfembed object, | |||
.pdfembed embed { | |||
  width: 100% !important; | |||
  max-width: 100% !important; | |||
  min-height: 80vh; | |||
} | |||
 | |||
.pdfembed iframe { | |||
  width: 100% !important; | |||
  min-height: 80vh !important; | |||
  height: 80vh !important; | |||
  display: block !important; | |||
} | |||
 | |||
 | |||
.mw-parser-output iframe { | |||
  max-width: 100%; | |||
  min-height: 80vh; | |||
   display: block; | |||
} | |||
 | |||
.pdfembed { | |||
  width: 100%; | |||
  min-height: 80vh; | |||
} | } | ||