User:Fen/MainPage.css: Difference between revisions
header with dark theme support test |
full css with darkmode support, still need some tweaking |
||
| Line 1: | Line 1: | ||
/* Light mode styles */ | |||
.header-box { | .header-box { | ||
background: #e3f2fd; | background: #e3f2fd; | ||
| Line 5: | Line 6: | ||
padding: 0.5em; | padding: 0.5em; | ||
color: #000; | color: #000; | ||
text-align: center; | |||
} | } | ||
.crw-button { | |||
.header-box | background: #004080; | ||
color: #fff; | |||
padding: 0.4em 0.8em; | |||
border-radius: 4px; | |||
font-weight: bold; | |||
text-decoration: none; | |||
display: inline-block; | |||
} | |||
.crw-button.secondary { | |||
background: #e0e0e0; | |||
color: #000; | |||
} | |||
.content-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |||
gap: 1rem; | |||
margin-top: 1em; | |||
font-family: sans-serif; | |||
color: #000; | |||
} | |||
.content-section { | |||
background: #f9f9f9; | |||
border: 1px solid #ccc; | |||
border-radius: 6px; | |||
padding: 1em; | |||
} | |||
.content-section > div:first-child { | |||
font-size: 1.5em; | |||
font-weight: bold; | |||
color: #2f4770; | |||
border-bottom: 2px solid #9bb9df; | |||
padding-bottom: 0.2em; | |||
margin-top: 1em; | |||
} | |||
/* Forced dark mode */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .header-box, | |||
html.skin-theme-clientpref-night .content-section { | |||
background: #2b2f3a; | background: #2b2f3a; | ||
border: | border-color: #444; | ||
color: #e0e0e0; | color: #e0e0e0; | ||
} | |||
html.skin-theme-clientpref-night .crw-button { | |||
background: #517bc0; | |||
color: #fff; | |||
} | |||
html.skin-theme-clientpref-night .crw-button.secondary { | |||
background: #333; | |||
color: #ccc; | |||
} | |||
html.skin-theme-clientpref-night .content-section > div:first-child { | |||
color: #8ba4d4; | |||
border-color: #536d9d; | |||
} | |||
} | |||
/* OS dark mode */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .header-box, | |||
html.skin-theme-clientpref-os .content-section { | |||
background: #2b2f3a; | |||
border-color: #444; | |||
color: #e0e0e0; | |||
} | |||
html.skin-theme-clientpref-os .crw-button { | |||
background: #517bc0; | |||
color: #fff; | |||
} | |||
html.skin-theme-clientpref-os .crw-button.secondary { | |||
background: #333; | |||
color: #ccc; | |||
} | |||
html.skin-theme-clientpref-os .content-section > div:first-child { | |||
color: #8ba4d4; | |||
border-color: #536d9d; | |||
} | } | ||
} | } | ||