User:Krishj4/common.css: Difference between revisions

Revision as of 16:02, 30 June 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);
}

/* Red underline that matches the width of the heading text */
/* Drop Vector's full-width grey rule under section headings */
.skin-vector-2022 .mw-heading.mw-heading2 {
	border-bottom: none;
}

/* Underline the text element itself so the rule = text width */
.skin-vector-2022 .mw-body .mw-first-heading,
.skin-vector-2022 .mw-heading.mw-heading2 h2 {
	width: fit-content;
	border-bottom: 2px solid var(--rpi-red);
	padding-bottom: 0.15em;
}

.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);
}

@@ Line 41: / Line 41: @@
 }
-/* Subtle full-width grey rule + a short red brand bar at the left */
+/* Red underline that matches the width of the heading text */
-.skin-vector-2022 .mw-body h1.firstHeading,
+/* Drop Vector's full-width grey rule under section headings */
-.skin-vector-2022 .mw-body .mw-first-heading,
 .skin-vector-2022 .mw-heading.mw-heading2 {
-	position: relative;
+	border-bottom: none;
-	border-bottom: 1px solid #c8ccd1;
-	padding-bottom: 0.25em;
 }
-.skin-vector-2022 .mw-body h1.firstHeading::after,
+/* Underline the text element itself so the rule = text width */
-.skin-vector-2022 .mw-body .mw-first-heading::after,
+.skin-vector-2022 .mw-body .mw-first-heading,
-.skin-vector-2022 .mw-heading.mw-heading2::after {
+.skin-vector-2022 .mw-heading.mw-heading2 h2 {
-	content: "";
+	width: fit-content;
-	position: absolute;
+	border-bottom: 2px solid var(--rpi-red);
-	left: 0;
+	padding-bottom: 0.15em;
-	bottom: -1px;
-	width: 2.5em;
-	height: 2px;
-	background-color: var(--rpi-red);
 }