Template:Main Page/styles.css: Difference between revisions
AZMindroma (talk | contribs) No edit summary Tag: Manual revert |
AZMindroma (talk | contribs) Modification in attempt to fix dark mode issues |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Main page responsive layout */ | |||
.main-page-row { | |||
display: flex; | |||
flex-wrap: wrap; | |||
margin-top: 7px; | |||
width: 100%; | |||
} | |||
.main-page-col { | |||
flex: 1; | |||
min-width: 0; | |||
padding: 5px 15px 15px 8px; | |||
vertical-align: top; | |||
} | |||
/* Specific column styles */ | |||
.main-page-about { | |||
border: 1px solid #cef2e0; | |||
background-color: #f5fffa; | |||
margin-right: 4px; | |||
} | |||
.main-page-news { | |||
border: 1px solid #cedff2; | |||
background-color: #f5faff; | |||
} | |||
.main-page-featured { | |||
border: 1px solid #cef2e0; | |||
background-color: #f5fffa; | |||
margin-right: 4px; | |||
} | |||
.main-page-dyk { | |||
border: 1px solid #cedff2; | |||
background-color: #f5faff; | |||
} | |||
.main-page-screenshot { | |||
border: 1px solid #ddcef2; | |||
background-color: #faf5ff; | |||
width: 100%; | |||
} | |||
/* Dark mode support for custom main page elements */ | |||
html.skin-theme-clientpref-night .main-page-about, | |||
html.skin-theme-clientpref-night .main-page-featured { | |||
background-color: #0b1e1c; | |||
border-color: #104437; | |||
} | |||
html.skin-theme-clientpref-night .main-page-news, | |||
html.skin-theme-clientpref-night .main-page-dyk { | |||
background-color: #0d1a27; | |||
border-color: #082849; | |||
} | |||
html.skin-theme-clientpref-night .main-page-screenshot { | |||
background-color: #130e20; | |||
border-color: #7545ab; | |||
} | |||
/* OS dark mode support */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .main-page-about, | |||
html.skin-theme-clientpref-os .main-page-featured { | |||
background-color: #0b1e1c; | |||
border-color: #104437; | |||
} | |||
html.skin-theme-clientpref-os .main-page-news, | |||
html.skin-theme-clientpref-os .main-page-dyk { | |||
background-color: #0d1a27; | |||
border-color: #082849; | |||
} | |||
html.skin-theme-clientpref-os .main-page-screenshot { | |||
background-color: #130e20; | |||
border-color: #7545ab; | |||
} | |||
} | |||
/* Mobile responsiveness */ | |||
@media (max-width: 768px) { | |||
.main-page-col { | |||
flex: 100%; | |||
margin-right: 0 !important; | |||
margin-bottom: 7px; | |||
} | |||
} | |||
#siteSub { | |||
display: none !important; | |||
} | |||
/* {{pp|small=yes}} */ | /* {{pp|small=yes}} */ | ||
.mp-box { | .mp-box { | ||