MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins. */

/*
 * Forlorn Wiki theme
 *
 * Everything visual is driven by the `--fw-*` variables below. Change a color
 * or a font here and the whole wiki follows. Skin-specific wiring lives in
 * MediaWiki:Citizen.css.
 */

/* Fonts: EB Garamond for headings, Lora for body text */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/* Metric-compatible local fallbacks, to avoid layout shift while fonts load */
@font-face {
	font-family: 'EB Garamond-fallback';
	size-adjust: 94.3%;
	ascent-override: 101%;
	descent-override: 36.4%;
	src: local('Times New Roman');
}

@font-face {
	font-family: 'Lora-fallback';
	size-adjust: 105.2%;
	ascent-override: 92%;
	descent-override: 32.6%;
	src: local('Georgia');
}

:root {
	/* Borders */
	--fw-border-color-base: rgba(0, 0, 0, 0.08);
	--fw-border-color-subtle: rgba(0, 0, 0, 0.05);
	--fw-border-color-interactive: rgba(0, 0, 0, 0.11);

	/* Text colors */
	--fw-color-emphasized: #1a1f15;
	--fw-color-base: #2a3025;
	--fw-color-subtle: #4e5a42;
	--fw-color-inverted-progressive: #fff7ef;

	/* Background colors, from page background (0) to the most raised surface (4) */
	--fw-color-surface-0: #f9f4ee;
	--fw-color-surface-1: #fffbf6;
	--fw-color-surface-2: #f6ede0;
	--fw-color-surface-3: #f0e3cf;
	--fw-color-surface-4: #e6d9c5;
	--fw-color-surface-5: #e3d2b8;

	/* Accent color: links, buttons, active states */
	--fw-color-progressive: #a6010e;
	--fw-color-progressive--hover: #c21724;
	--fw-color-progressive--active: #85010b;
	--fw-background-color-progressive: #a6010e;
	--fw-background-color-progressive--hover: #c21724;
	--fw-background-color-progressive--active: #85010b;
	--fw-color-content-link: #a6010e;
	--fw-color-content-link--hover: #85010b;
	--fw-color-content-link--active: #700109;
	--fw-color-content-link-missing: #9d5059;
	--fw-color-content-link-missing--hover: #914650;
	--fw-color-content-link-missing--active: #843c46;

	/* Fonts */
	--fw-font-family-heading: 'EB Garamond', 'EB Garamond-fallback', serif;
	--fw-font-family-body: 'Lora', 'Lora-fallback', serif;
	--fw-font-size-x-small: 0.8125rem;

	/* Opacity of the decorative background patterns */
	--fw-opacity-pattern: 0.08;

	/* Wordmark: a soft lift off the page (a glow in dark mode, see MediaWiki:Citizen.css) */
	--fw-filter-wordmark: drop-shadow(0 1px 1px rgba(58, 4, 10, 0.4)) drop-shadow(0 2px 6px rgba(58, 4, 10, 0.18));
}

html {
	/* Keep numerals on the baseline in serif fonts */
	font-variant-numeric: lining-nums;
}

/* Quotes */
blockquote {
	padding-left: 1rem;
	border-left: 2px solid var(--fw-border-color-base);
	font-style: italic;
	text-wrap: balance;
	text-wrap: pretty;
}

blockquote cite {
	color: var(--fw-color-subtle);
	font-size: var(--fw-font-size-x-small);
	font-style: normal;
}

blockquote cite::before {
	content: '―';
	margin-right: 0.5em;
}

blockquote > p:first-child::before {
	content: open-quote;
}

blockquote:has(cite) > p:nth-last-child(2)::after,
blockquote:not(:has(cite)) > p:last-child::after {
	content: close-quote;
}

/* References */
ol.references {
	font-size: var(--fw-font-size-x-small);
	margin-top: 0;
	padding-top: 0;
}

.references-small {
	font-size: 0.75rem;
}

ol.references > li:target,
sup.reference:target {
	background-color: var(--fw-color-surface-3);
}

/* Print */
@media print {
	:root {
		--fw-border-color-base: #aaa !important;
		--fw-border-color-subtle: #ddd !important;
		--fw-border-color-interactive: #000 !important;
		--fw-color-emphasized: #000 !important;
		--fw-color-base: #222 !important;
		--fw-color-subtle: #444 !important;
		--fw-color-surface-0: #fff !important;
		--fw-color-surface-1: #fff !important;
		--fw-color-surface-2: #fff !important;
		--fw-color-surface-3: #fff !important;
		--fw-color-surface-4: #fff !important;
		--fw-color-surface-5: #fff !important;
		--fw-color-progressive: #000 !important;
		--fw-filter-wordmark: none !important;
	}
}