MediaWiki:Common.css: Difference between revisions

Latest revision as of 23:41, 29 August 2025

/* <pre><nowiki> */

/* Hogwarts Gateway theme */

/* Import fonts from Google Fonts: Cinzel (elegant, magical headings) and Crimson Text (readable body text with old-world charm) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/*
 * Use customized system fonts as fallback for font stack
 * Needed to avoid layout shift
 */
@font-face {
	font-family: 'Cinzel-fallback';
	size-adjust: 98%;
	ascent-override: 105%;
	descent-override: 28%;
	src: local('Times New Roman');
}

@font-face {
	font-family: 'Crimson Text-fallback';
	size-adjust: 102%;
	ascent-override: 95%;
	descent-override: 30%;
	src: local('Georgia');
}

/* CSS variables */
:root {
	/* Border */
	/* Border color */
	--hg-border-color-base: rgba(139, 69, 19, 0.15);
	--hg-border-color-subtle: rgba(139, 69, 19, 0.08);
	--hg-border-color-interactive: rgba(178, 34, 34, 0.25);
	/* Border radius */
	--hg-border-radius-sharp: 0;
	--hg-border-radius-small: 4px;
	--hg-border-radius-medium: 8px;
	--hg-border-radius-large: 12px;
	--hg-border-radius-pill: 9999px;
	--hg-border-radius-circle: 50%;
	/* Shorthand */
	--hg-border-base: 1px solid var(--hg-border-color-base);

	/* Color */
	/* Text color */
	--hg-color-emphasized: #1a0f0a;
	--hg-color-base: #2c1810;
	--hg-color-subtle: #5d4037;
	--hg-color-inverted-progressive: #fff8dc;
	--hg-color-link: #8b1538;
	/* Background color - Parchment and warm tones */
	--hg-color-surface-0: #fff8dc;
	--hg-color-surface-1: #faf0e6;
	--hg-color-surface-2: #f5deb3;
	--hg-color-surface-3: #f0e68c;
	--hg-color-surface-4: #eee8aa;
	--hg-color-surface-5: #daa520;
	/* Progressive color - Gryffindor crimson */
	--hg-color-progressive: #b22222;
	--hg-color-progressive--hover: #dc143c;
	--hg-color-progressive--active: #8b1538;

	/* Font */
	/* Font family */
	--hg-font-family-heading: 'Cinzel', 'Cinzel-fallback', serif;
	--hg-font-family-body: 'Crimson Text', 'Crimson Text-fallback', serif;
	/* Font size */
	--hg-font-size-x-small: 0.8125rem;
	--hg-font-size-small: 0.875rem;
	--hg-font-size-medium: 1rem;
	--hg-font-size-large: 1.125rem;
	--hg-font-size-x-large: 1.25rem;
	--hg-font-size-xx-large: 1.5rem;
	--hg-font-size-xxx-large: 2rem;
	/* Font weight */
	--hg-font-weight-regular: 400;
	--hg-font-weight-medium: 500;
	--hg-font-weight-semibold: 600;
	/* Line height */
	--hg-line-height-xxx-small: 1.25;
	--hg-line-height-xx-small: 1.375;
	--hg-line-height: 1.6;

	/* Opacity */
	--hg-opacity-pattern: 0.06;

	/* Codex token backport */
	/* Quiet color */
	--background-color-button-quiet--hover: rgba(139, 69, 19, 0.1);
	--background-color-button-quiet--active: rgba(139, 69, 19, 0.15);
}

/* Dark theme variables (Great Hall atmosphere) */
:root.skin-theme-clientpref-night {
	/* Border */
	--hg-border-color-base: rgba(218, 165, 32, 0.25);
	--hg-border-color-subtle: rgba(218, 165, 32, 0.12);
	--hg-border-color-interactive: rgba(218, 165, 32, 0.35);

	/* Color */
	/* Text color */
	--hg-color-emphasized: #f4e4bc;
	--hg-color-base: #e6daa6;
	--hg-color-subtle: #d4af8c;
	--hg-color-inverted-progressive: #2c1810;
	--hg-color-link: #daa520;
	/* Background color - Castle stone and warm wood */
	--hg-color-surface-0: #1a0f0a;
	--hg-color-surface-1: #2c1810;
	--hg-color-surface-2: #3d2317;
	--hg-color-surface-3: #4a2c1a;
	--hg-color-surface-4: #5c3317;
	--hg-color-surface-5: #6b3d1f;
	/* Progressive color - Golden candlelight */
	--hg-color-progressive: #daa520;
	--hg-color-progressive--hover: #ffd700;
	--hg-color-progressive--active: #b8860b;

	/* Opacity */
	--hg-opacity-pattern: 0.08;

	/* Codex token backport */
	--background-color-button-quiet--hover: rgba(218, 165, 32, 0.12);
	--background-color-button-quiet--active: rgba(218, 165, 32, 0.18);
}

/* Auto theme (follows system preference) */
@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		/* Border */
		--hg-border-color-base: rgba(218, 165, 32, 0.25);
		--hg-border-color-subtle: rgba(218, 165, 32, 0.12);
		--hg-border-color-interactive: rgba(218, 165, 32, 0.35);

		/* Color */
		/* Text color */
		--hg-color-emphasized: #f4e4bc;
		--hg-color-base: #e6daa6;
		--hg-color-subtle: #d4af8c;
		--hg-color-inverted-progressive: #2c1810;
		--hg-color-link: #daa520;
		/* Background color */
		--hg-color-surface-0: #1a0f0a;
		--hg-color-surface-1: #2c1810;
		--hg-color-surface-2: #3d2317;
		--hg-color-surface-3: #4a2c1a;
		--hg-color-surface-4: #5c3317;
		--hg-color-surface-5: #6b3d1f;
		/* Progressive color */
		--hg-color-progressive: #daa520;
		--hg-color-progressive--hover: #ffd700;
		--hg-color-progressive--active: #b8860b;

		/* Opacity */
		--hg-opacity-pattern: 0.08;

		/* Codex token backport */
		--background-color-button-quiet--hover: rgba(218, 165, 32, 0.12);
		--background-color-button-quiet--active: rgba(218, 165, 32, 0.18);
	}
}

html {
	/* Force serif fonts to format number on the same line */
	font-variant-numeric: lining-nums;
}

/* Blockquote */
blockquote {
	padding-left: 1rem;
	border-left: 2px solid var(--hg-border-color-base);
	font-style: italic;
	/* Fallback for non-Chromium browsers */
	text-wrap: balance;
	/* Only works on Chromium browsers */
	text-wrap: pretty;
}

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

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

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

/* <cite> is wrapped in the last <p> */
blockquote:has(cite) > p:nth-last-child(2)::after,
blockquote:not(:has(cite)) > p:last-child::after {
	content: close-quote;
}

/* LINKS */
a {
	/*color: var(--hg-color-link);*/
}

.underlinelink a {
	text-decoration: underline !important;
}
.nounderlinelink a {
	text-decoration: none !important;
}
.nounderlinelink a:hover {
	text-decoration: underline !important;
}

/* SEQUENCE TEMPLATE - Adjusted for Hogwarts house colors */

td.seqwhite a {
	color: #ffffff !important;
}
td.seqwhite div span a {
	color: #ffffff !important;
}
td.seqcream a {
	color: #fff8dc !important;
}
td.seqcream div span a {
	color: #fff8dc !important;
}
td.seqgrey a {
	color: #2c1810 !important;
}
td.seqgrey div span a {
	color: #2c1810 !important;
}

/* REFERENCES TEMPLATE */
ol.references {
	font-size: var(--hg-font-size-x-small);
	margin-top: 0px;
	padding-top: 0px;
}
.references-small {
	font-size: 0.75rem;
}
ol.references > li:target {
	background-color: rgba(218, 165, 32, 0.2);
}
sup.reference:target {
	background-color: rgba(218, 165, 32, 0.2);
}

/* Infobox customizations so they scale for desktop and mobile appropriately */
@media only screen and (max-width: 600px) {
	.tginfobox {
		min-width: 100%;
	}
}

@media only screen and (min-width: 601px) {
	.tginfobox {
		width: 275px;
	}
}

@media screen and (max-width: 600px) {
	.spotify,
	.template-month {
		float: center;
		margin-left: 10px;
	}
}

/* Updated infobox gradients with Hogwarts-inspired colors */
.pi-type-film .pi-secondary-background {
	background: rgb(255, 248, 220);
	background: linear-gradient(
		90deg,
		rgba(255, 248, 220, 1) 0%,
		rgba(218, 165, 32, 0.3) 35%,
		rgba(139, 69, 19, 0.5) 100%
	);
}

.pi-data {
	display: flex;
	align-items: center;
}

.spotify {
	float: right;
	width: 300px;
	height: 100px;
}

@media screen and (max-width: 850px) {
	#p-logo-text {
		/* Tighten the logo a bit more to the left on mobile devices to prevent overlapping */
		left: 3em;
	}
}

/* Print styles */
@media print {
	:root {
		/* Border */
		/* Border color */
		--hg-border-color-base: #8b4513 !important;
		--hg-border-color-subtle: #ddd !important;
		--hg-border-color-interactive: #000 !important;
		/* Color */
		/* Text color */
		--hg-color-emphasized: #000 !important;
		--hg-color-base: #2c1810 !important;
		--hg-color-subtle: #5d4037 !important;
		/* Background color */
		--hg-color-surface-0: #fff !important;
		--hg-color-surface-1: #fff !important;
		--hg-color-surface-2: #fff !important;
		--hg-color-surface-3: #fff !important;
		--hg-color-surface-4: #fff !important;
		--hg-color-surface-5: #fff !important;
		/* Progressive color */
		--hg-color-progressive: #000 !important;
	}
}

/* Limit FloatingUI content width */
.ext-floatingui-floating-content {
	max-width: 50ch;
	padding: 12px;
	background-color: var(--hg-color-surface-1);
	border: 1px solid var(--hg-border-color-base);
	border-radius: var(--hg-border-radius-medium);
	color: var(--hg-color-base);
}

/* </nowiki></pre> */