MediaWiki:Common.css: Difference between revisions
colors for dark mode |
Merge RPI theme (Geist/Source Serif 4, red accents, thick red page-title rule) into site CSS |
||
| Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Source+Serif+4:wght@500;600;700&display=swap'); | |||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
| Line 484: | Line 486: | ||
flex-direction:column; | flex-direction:column; | ||
} | } | ||
} | |||
/* --- RPI theme (Vector 2022 desktop) --- */ | |||
:root { | |||
--rpi-red: #d6001c; | |||
--rpi-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |||
--rpi-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; | |||
--rpi-serif: "Source Serif 4", Georgia, "Times New Roman", serif; | |||
} | |||
.skin-vector-2022, | |||
.skin-vector-2022 .mw-body, | |||
.skin-vector-2022 .mw-body-content, | |||
.skin-vector-2022 .vector-menu, | |||
.skin-vector-2022 .vector-header-container, | |||
.skin-vector-2022 .mw-footer { | |||
font-family: var(--rpi-font); | |||
} | |||
.skin-vector-2022 .mw-body h1, | |||
.skin-vector-2022 .mw-body h2, | |||
.skin-vector-2022 .mw-body h3, | |||
.skin-vector-2022 .mw-body h4, | |||
.skin-vector-2022 .mw-body h5, | |||
.skin-vector-2022 .mw-body h6, | |||
.skin-vector-2022 .mw-first-heading { | |||
font-family: var(--rpi-serif); | |||
} | |||
.skin-vector-2022 code, | |||
.skin-vector-2022 pre, | |||
.skin-vector-2022 kbd, | |||
.skin-vector-2022 samp, | |||
.skin-vector-2022 tt, | |||
.skin-vector-2022 .mw-code, | |||
.skin-vector-2022 .infobox td { | |||
font-family: var(--rpi-font); | |||
} | |||
.skin-vector-2022 .mw-logo-wordmark { | |||
color: var(--rpi-red); | |||
} | |||
/* Page title: thick red rule */ | |||
.skin-vector-2022 .mw-body .mw-first-heading { | |||
border-bottom: 3px solid var(--rpi-red); | |||
padding-bottom: 0.25em; | |||
} | |||
/* Section headings: full-width grey rule with a red segment the width of the text */ | |||
.skin-vector-2022 .mw-heading.mw-heading2 { | |||
position: relative; | |||
align-items: flex-end; | |||
border-bottom: 1px solid #c8ccd1; | |||
padding-bottom: 0.25em; | |||
} | |||
.skin-vector-2022 .mw-heading.mw-heading2 h2 { | |||
position: relative; | |||
} | |||
.skin-vector-2022 .mw-heading.mw-heading2 h2::after { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
right: 0; | |||
bottom: -0.29em; | |||
height: 2px; | |||
background-color: var(--rpi-red); | |||
} | |||
.skin-vector-2022 .infobox { | |||
border-top: 3px solid var(--rpi-red); | |||
} | |||
.skin-vector-2022 .infobox-title, | |||
.skin-vector-2022 .infobox > tbody > tr:first-child > th[colspan] { | |||
color: var(--rpi-red); | |||
} | } | ||