MediaWiki:Common.css: Difference between revisions
making bottom buttons larger |
fixing some sizing Tags: Mobile edit Mobile web edit |
||
| (87 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap'); | |||
/* light mode */ | |||
:root, .skin-theme-clientpref-day { | |||
--vw-bg-page: #f8f9fa; | |||
--vw-bg-surface: #ffffff; | |||
--vw-bg-subtle: #f8f9fa; | |||
--vw-bg-heading: #EAECF0; | |||
--vw-text-subtle: #555555; | |||
--vw-border: #91a8c2; | |||
--vw-accent: #c61c44; | |||
--vw-accent-subtle: #f9d9df; | |||
--vw-gold: #cfad3c; | |||
--vw-gold-subtle: #f9f3d7; | |||
--vw-green: #5ecf3c; | |||
--vw-green-subtle: #ddf9d7; | |||
--vw-teal: #209d80; | |||
--vw-teal-subtle: #d7f9f3; | |||
--vw-blue: #3c5ecf; | |||
--vw-blue-subtle: #d7ddf9; | |||
--vw-violet: #80209d; | |||
--vw-violet-subtle: #f5e0f9; | |||
} | |||
/* dark mode */ | |||
.skin-theme-clientpref-night { | |||
--vw-bg-page: #101418; | |||
--vw-bg-surface: #1e2227; | |||
--vw-bg-subtle: #2a2f36; | |||
--vw-bg-heading: #27292D; | |||
--vw-text-subtle: #BBBBBB; | |||
--vw-border: #5a7595; | |||
--vw-accent: #c54963; | |||
--vw-accent-subtle: #461522; | |||
--vw-gold: #c5a949; | |||
--vw-gold-subtle: #473915; | |||
--vw-green: #68c549; | |||
--vw-green-subtle: #214715; | |||
--vw-teal: #49c5a8; | |||
--vw-teal-subtle: #154739; | |||
--vw-blue: #4963c5; | |||
--vw-blue-subtle: #152147; | |||
--vw-violet: #a949c5; | |||
--vw-violet-subtle: #391547; | |||
} | |||
@media ( prefers-color-scheme: dark ) { .skin-theme-clientpref-os { | |||
--vw-bg-page: #101418; | |||
--vw-bg-surface: #1e2227; | |||
--vw-bg-subtle: #2a2f36; | |||
--vw-bg-heading: #27292D; | |||
--vw-text-subtle: #BBBBBB; | |||
--vw-border: #5a7595; | |||
--vw-accent: #c54963; | |||
--vw-accent-subtle: #461522; | |||
--vw-gold: #c5a949; | |||
--vw-gold-subtle: #473915; | |||
--vw-green: #68c549; | |||
--vw-green-subtle: #214715; | |||
--vw-teal: #49c5a8; | |||
--vw-teal-subtle: #154739; | |||
--vw-blue: #4963c5; | |||
--vw-blue-subtle: #152147; | |||
--vw-violet: #a949c5; | |||
--vw-violet-subtle: #391547; | |||
}} | |||
.skin-theme-clientpref-night .mw-logo-icon { | |||
filter: invert(1); | |||
} | |||
@media ( prefers-color-scheme: dark ) { | |||
.skin-theme-clientpref-os .mw-logo-icon { | |||
filter: invert(1); | |||
} | |||
} | |||
#footer-info li, #footer-places li { | #footer-info li, #footer-places li { | ||
font-size: 1. | font-size: 14px; | ||
} | |||
.mw-logo-wordmark { | |||
font-family: 'Lora', serif; | |||
font-weight: 800; | |||
font-size: 1.5rem; | |||
color: var(--vw-accent); | |||
} | |||
.mw-logo-wordmark:hover, .mw-wordmark:hover, .mw-logo:hover { | |||
text-decoration: none; | |||
} | |||
body { | |||
font-family: 'Public Sans', sans-serif; | |||
} | |||
h1, h2 { | |||
font-family: 'Lora', serif !important; | |||
font-weight: 500 !important; | |||
} | |||
/* Main Page */ | |||
.page-Main_Page .firstHeading { | |||
display: none; | |||
} | |||
#welcome-box h1 { | |||
border-bottom-color: var(--vw-accent); | |||
width: min(100%, 400px); | |||
} | |||
@media (max-width: 600px) { | |||
#vw-main-title { text-align: center; font-size: 0.9em; } | |||
#vw-main-subtitle { margin-top: 0.5em; text-align: center; font-size: 0.85em; } | |||
#vw-main-list { margin-top: 0.5em; justify-content: center; } | |||
} | |||
@media (min-width: 601px) { | |||
#vw-main-title { text-align: left; } | |||
#vw-main-subtitle { margin-top: -0.5em; text-align: left; } | |||
#vw-main-list { justify-content:flex-end;} | |||
} | |||
/* Templates */ | |||
.documentation .mw-editsection:not(.documentation-edit) { | |||
display: none; | |||
} | |||
.poster-container { | |||
display:flex; flex-wrap:wrap; gap:0.4em; | |||
} | |||
.hatnote { | |||
font-style: italic; | |||
padding-left: 1.5em; | |||
margin-bottom: 0.5em; | |||
} | |||
.infobox { | |||
float: right; | |||
margin: 0 0 1em 1em; | |||
} | |||
@media (max-width: 600px) { | |||
.infobox { | |||
width: 100% !important; | |||
float: none !important; | |||
margin: 0 0 1em 0; | |||
box-sizing: border-box; | |||
} | |||
.infobox img { | |||
max-width: 100% !important; | |||
overflow: hidden; | |||
} | |||
} | |||
@media (min-width: 601px){ | |||
.infobox{ | |||
max-width: 300px !important; | |||
} | |||
} | } | ||