User:Fen/MainPage.css
Appearance
/* Light mode styles */ .header-box { background: #e3f2fd; border: 1px solid #ccc; border-radius: 8px; padding: 0.5em; color: #000; text-align: center; } .crw-button { 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 { background: #626fd5; border-color: #444; color: #d0d8ff; } html.skin-theme-clientpref-night .content-section { background: #2b2f3a; border-color: #444; 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-night .header-box { background: #626fd5; border-color: #444; color: #d0d8ff; } html.skin-theme-clientpref-night .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; } }