User:Krishj4/common.css: Difference between revisions
Heading accent: short red bar over a subtle grey rule |
Experiment: slightly rounded infobox corners (border-radius 6px) |
||
| (20 intermediate revisions by the same user not shown) | |||
| Line 41: | Line 41: | ||
} | } | ||
/* | /* Full-width grey rule under headings, with a red segment the width of the text */ | ||
.skin-vector-2022 .mw-body .mw-first-heading, | .skin-vector-2022 .mw-body .mw-first-heading, | ||
.skin-vector-2022 .mw-heading.mw-heading2 { | .skin-vector-2022 .mw-heading.mw-heading2 { | ||
| Line 50: | Line 49: | ||
} | } | ||
.skin-vector-2022 .mw-body | /* Keep the heading text and its edit links bottom-aligned so the bar lands true */ | ||
.skin-vector-2022 .mw-body .mw-first-heading::after, | .skin-vector-2022 .mw-heading.mw-heading2 { | ||
.skin-vector-2022 .mw-heading.mw-heading2::after { | align-items: flex-end; | ||
} | |||
/* Anchor the red bar to each text element so it spans only the text width */ | |||
.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main, | |||
.skin-vector-2022 .mw-heading.mw-heading2 h2 { | |||
position: relative; | |||
} | |||
.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main::after, | |||
.skin-vector-2022 .mw-heading.mw-heading2 h2::after { | |||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
left: 0; | left: 0; | ||
right: 0; | |||
bottom: -0.29em; /* drop down onto the grey rule */ | |||
height: 2px; | height: 2px; | ||
background-color: var(--rpi-red); | background-color: var(--rpi-red); | ||
| Line 64: | Line 73: | ||
.skin-vector-2022 .infobox { | .skin-vector-2022 .infobox { | ||
border-top: 3px solid var(--rpi-red); | border-top: 3px solid var(--rpi-red); | ||
border-radius: 6px; | |||
} | } | ||
Latest revision as of 18:28, 1 July 2026
@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');
: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);
}
/* Full-width grey rule under headings, with a red segment the width of the text */
.skin-vector-2022 .mw-body .mw-first-heading,
.skin-vector-2022 .mw-heading.mw-heading2 {
position: relative;
border-bottom: 1px solid #c8ccd1;
padding-bottom: 0.25em;
}
/* Keep the heading text and its edit links bottom-aligned so the bar lands true */
.skin-vector-2022 .mw-heading.mw-heading2 {
align-items: flex-end;
}
/* Anchor the red bar to each text element so it spans only the text width */
.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main,
.skin-vector-2022 .mw-heading.mw-heading2 h2 {
position: relative;
}
.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main::after,
.skin-vector-2022 .mw-heading.mw-heading2 h2::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.29em; /* drop down onto the grey rule */
height: 2px;
background-color: var(--rpi-red);
}
.skin-vector-2022 .infobox {
border-top: 3px solid var(--rpi-red);
border-radius: 6px;
}
.skin-vector-2022 .infobox-title,
.skin-vector-2022 .infobox > tbody > tr:first-child > th[colspan] {
color: var(--rpi-red);
}