MediaWiki:Common.css: Difference between revisions

Latest revision as of 15:47, 2 October 2026

/* On the Elbow horse page the opening placement diagram sits as a small
   right-hand box beside the lead paragraph instead of a full-width block.
   The canonical copy of this rule ships in config/SiteSettings.php; the
   MediaWiki:Common.css page applies it to a running wiki before the next
   deployment rebuilds the image. */
body.page-Elbow_horse .mw-parser-output > .xqp-player:first-child,
body.page-Elbow_horse .mw-parser-output > .xqp-player:first-of-type {
    float: right;
    display: flex;
    flex-direction: column;
    max-width: 20rem;
    margin: 0 0 1.25rem 1.5rem;
}

/* The viewer script inserts the caption before the frame; a figure reads
   better with the board first and its caption underneath. */
body.page-Elbow_horse .mw-parser-output > .xqp-player:first-child iframe,
body.page-Elbow_horse .mw-parser-output > .xqp-player:first-of-type iframe {
    order: 1;
}

body.page-Elbow_horse .mw-parser-output > .xqp-player:first-child .xqp-caption,
body.page-Elbow_horse .mw-parser-output > .xqp-player:first-of-type .xqp-caption {
    order: 2;
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}

@media ( max-width: 719px ) {
    body.page-Elbow_horse .mw-parser-output > .xqp-player:first-child,
    body.page-Elbow_horse .mw-parser-output > .xqp-player:first-of-type {
        float: none;
        max-width: none;
        margin: 1.5rem auto;
    }
}

/* The Child Worships Buddha article leads with the same kind of board figure as
   the Elbow horse page. This applies the sidebox to the running wiki before the
   next deployment ships the canonical copy from config/SiteSettings.php. */
body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-child,
body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-of-type {
	float: right;
	display: flex;
	flex-direction: column;
	max-width: 20rem;
	margin: 0 0 1.25rem 1.5rem;
}

/* The viewer script inserts the caption before the frame; a figure reads
   better with the board first and its caption underneath. */
body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-child iframe,
body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-of-type iframe {
	order: 1;
}

body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-child .xqp-caption,
body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-of-type .xqp-caption {
	order: 2;
	font-weight: normal;
	font-size: 0.9em;
	line-height: 1.45;
	margin: 0.5rem 0 0;
}

@media ( max-width: 719px ) {
	body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-child,
	body.page-Child_Worships_Buddha .mw-parser-output > .xqp-player:first-of-type {
		float: none;
		max-width: none;
		margin: 1.5rem auto;
	}
}

/* A board used as a side image rather than a full-width block: the 2024
   street-study diagram on the Child Worships Buddha page sits beside the
   paragraph that discusses it. Canonical copy: config/SiteSettings.php. */
body.page-Child_Worships_Buddha .mw-parser-output .xqp-side {
	float: right;
	max-width: 18rem;
	margin: 0 0 1rem 1.5rem;
}

body.page-Child_Worships_Buddha .mw-parser-output .xqp-side .xqp-player {
	max-width: none;
	margin: 0;
	display: flex;
	flex-direction: column;
}

body.page-Child_Worships_Buddha .mw-parser-output .xqp-side iframe {
	order: 1;
	height: auto;
	aspect-ratio: 7 / 8;
}

body.page-Child_Worships_Buddha .mw-parser-output .xqp-side .xqp-caption {
	order: 2;
	font-weight: normal;
	font-size: 0.85em;
	line-height: 1.4;
	margin: 0.5rem 0 0;
}

@media ( max-width: 719px ) {
	body.page-Child_Worships_Buddha .mw-parser-output .xqp-side {
		float: none;
		max-width: 22rem;
		margin: 1.5rem auto;
	}
}

/* ===== Xiangqipedia front page: start managed block ===== */
/*
 * Card grid for the main page. Scoped to .xqp-portal so no other page or
 * Vector chrome changes. The canonical copy of the Elbow horse rules above is
 * untouched; this block only styles the portal markup on the main page.
 */
.xqp-portal {
	--xqp-red: #9e0e0e;
	--xqp-ink: #202122;
	--xqp-muted: #54595d;
	--xqp-border: #c8ccd1;
	--xqp-panel: #f6f7f8;
}

/* The main page carries its own headline, so the page-title heading is not shown. */
body.page-Main_Page .mw-body .firstHeading {
	display: none;
}

.xqp-portal .xqp-hero {
	margin: 0 0 1rem;
	text-align: center;
}

.xqp-portal .xqp-hero-title {
	margin: .1em 0 .15em;
	padding: 0;
	border: 0;
	color: var(--xqp-ink);
	font-size: 2.15em;
	font-weight: 700;
	line-height: 1.15;
}

.xqp-portal .xqp-brand {
	color: var(--xqp-red);
}

.xqp-portal .xqp-hero-subtitle {
	margin: .2em 0 .9em;
	color: var(--xqp-muted);
	font-size: 1.02em;
}

.mw-parser-output .xqp-portal .xqp-quicknav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: .45rem 0;
	border-top: 1px solid var(--xqp-border);
	border-bottom: 1px solid var(--xqp-border);
	list-style: none;
}

.mw-parser-output .xqp-portal .xqp-quicknav > li {
	margin: 0;
	padding: 0 .95rem;
	border-right: 1px solid var(--xqp-border);
	line-height: 1.65;
}

.mw-parser-output .xqp-portal .xqp-quicknav > li:last-child {
	border-right: 0;
}

.xqp-portal .xqp-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1rem;
	margin: 1.4rem 0 0;
}

.xqp-portal .xqp-bottom {
	display: grid;
	grid-template-columns: 1.35fr minmax( 0, 1fr );
	gap: 1rem;
	margin: 1rem 0 0;
}

.xqp-portal .xqp-card {
	background: #fff;
	border: 1px solid var(--xqp-border);
	box-shadow: 0 1px 1px rgba( 0, 0, 0, .04 );
}

.xqp-portal .xqp-card-title {
	margin: 0;
	padding: .5rem .7rem .5rem 2.05rem;
	border-bottom: 1px solid #eaecf0;
	background-color: var(--xqp-panel);
	background-repeat: no-repeat;
	background-position: .5rem center;
	background-size: 1.1rem 1.1rem;
	color: var(--xqp-red);
	font-size: .9em;
	font-weight: 700;
	line-height: 1.5;
}

.xqp-portal .xqp-card-lead {
	margin: .75rem .9rem .3rem;
	color: var(--xqp-muted);
	font-size: .82em;
	line-height: 1.5;
}

.mw-parser-output .xqp-portal .xqp-card-links {
	margin: 0 .9rem .9rem;
	padding: 0;
	list-style: none;
	font-size: .82em;
	line-height: 1.8;
}

.mw-parser-output .xqp-portal .xqp-card-links > li {
	margin: 0;
}

.xqp-portal .xqp-card--rules .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Cpath%20d%3D%22M3.5%204.7%2011.4%206.3v12.9L3.5%2017.6z%22%2F%3E%3Cpath%20d%3D%22M20.5%204.7%2012.6%206.3v12.9l7.9-1.6z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--openings .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M6.2%203.2h9.9a2.6%202.6%200%200%201%202.6%202.6v12.4a2.6%202.6%200%200%201-2.6%202.6H6.2zM8.9%205.5v13h6.9a1.2%201.2%200%200%200%201.2-1.2V6.7a1.2%201.2%200%200%200-1.2-1.2z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--tactics .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.7%2018.3%2017%22%2F%3E%3Cpath%20d%3D%22M19%203.7%205.7%2017%22%2F%3E%3Cpath%20d%3D%22M3.3%2015.1%208.9%2020.7%22%2F%3E%3Cpath%20d%3D%22M20.7%2015.1%2015.1%2020.7%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--strategy .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.7%22%20fill%3D%22%239e0e0e%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--endgames .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Cpath%20d%3D%22M2.6%206.9%207%2011.1%2012%204.6l5%206.5%204.4-4.2-1.5%2010.3H4.1z%22%2F%3E%3Cpath%20d%3D%22M4.4%2018.3h15.2v2.5H4.4z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--games .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Cpath%20d%3D%22M6.6%203.3h10.8v4.4a5.4%205.4%200%200%201-10.8%200z%22%2F%3E%3Cpath%20d%3D%22M10.9%2012.4h2.2v4.3h-2.2z%22%2F%3E%3Cpath%20d%3D%22M7.3%2018.1h9.4v2.6H7.3z%22%2F%3E%3Cpath%20d%3D%22M6.6%204.9H3.9a2.9%202.9%200%200%200%202.9%202.9%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17.4%204.9h2.7a2.9%202.9%200%200%201-2.9%202.9%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--players .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.6%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4.3%2020.7a7.7%207.7%200%200%201%2015.4%200z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--history .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Cpath%20d%3D%22M12%202.5%202.3%208.1v1.7h19.4V8.1z%22%2F%3E%3Cpath%20d%3D%22M4.7%2011.2h2.6v6.5H4.7zM8.9%2011.2h2.6v6.5H8.9zM13.1%2011.2h2.6v6.5h-2.6zM17.3%2011.2h2.6v6.5h-2.6z%22%2F%3E%3Cpath%20d%3D%22M2.9%2018.7h18.2v2.5H2.9z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--books .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217.5%22%20r%3D%223.3%22%2F%3E%3Ccircle%20cx%3D%225.2%22%20cy%3D%226.1%22%20r%3D%222.7%22%2F%3E%3Ccircle%20cx%3D%2218.8%22%20cy%3D%226.1%22%20r%3D%222.7%22%2F%3E%3Cpath%20d%3D%22M6.7%208.4%2010.7%2015.1%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M17.3%208.4%2013.3%2015.1%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--variants .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%3E%3Cpath%20d%3D%22M3.2%203.2h7.2v7.2H3.2zM13.6%203.2h7.2v7.2h-7.2zM3.2%2013.6h7.2v7.2H3.2zM13.6%2013.6h7.2v7.2h-7.2z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--computer .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%224.2%22%20width%3D%2218%22%20height%3D%2212.4%22%20rx%3D%221.6%22%20fill%3D%22none%22%20stroke%3D%22%239e0e0e%22%20stroke-width%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M11.3%2016.6h1.4v3.2h-1.4z%22%20fill%3D%22%239e0e0e%22%2F%3E%3Cpath%20d%3D%22M7.7%2019.7h8.6v2.1H7.7z%22%20fill%3D%22%239e0e0e%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-card--terminology .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%239e0e0e%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.7%203h14.6v18H4.7zM8%207.8h8v1.9H8zM8%2011.7h8v1.9H8zM8%2015.6h5.2v1.9H8z%22%2F%3E%3C%2Fsvg%3E");
}

/* The two full-width boxes use the encyclopedia's ink headings, the way the design does. */
.xqp-portal .xqp-featured .xqp-card-title,
.xqp-portal .xqp-contribute .xqp-card-title {
	color: var(--xqp-ink);
}

.xqp-portal .xqp-featured .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23202122%22%3E%3Cpath%20d%3D%22M12%202.7l2.8%206%206.5.9-4.7%204.4%201.2%206.4-5.8-3.2-5.8%203.2%201.2-6.4L2.7%209.6l6.5-.9z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-contribute .xqp-card-title {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23202122%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226.8%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M7.2%2020.7a4.8%204.8%200%200%201%209.6%200z%22%2F%3E%3Ccircle%20cx%3D%224.6%22%20cy%3D%2210.6%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M.8%2020.7a4.3%204.3%200%200%201%205.6-3.7%208.6%208.6%200%200%200-1.6%203.7z%22%2F%3E%3Ccircle%20cx%3D%2219.4%22%20cy%3D%2210.6%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M23.2%2020.7a4.3%204.3%200%200%200-5.6-3.7%208.6%208.6%200%200%201%201.6%203.7z%22%2F%3E%3C%2Fsvg%3E");
}

.xqp-portal .xqp-featured-body {
	display: grid;
	grid-template-columns: 10.5rem minmax( 0, 1fr );
	gap: 1rem;
	padding: .85rem .9rem 1rem;
}

.xqp-portal .xqp-featured-figure .xqp-player {
	max-width: none;
	margin: 0;
}

.xqp-portal .xqp-featured-figure .xqp-caption {
	display: none;
}

.xqp-portal .xqp-featured-figure .xqp-player iframe {
	/* The viewer reports an exact height; this keeps the box the right shape first. */
	height: auto;
	aspect-ratio: 7 / 8;
	max-height: none;
}

.xqp-portal .xqp-featured-text h3 {
	margin: 0 0 .35rem;
	padding: 0;
	border: 0;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.4;
}

.xqp-portal .xqp-featured-text p {
	margin: 0 0 .5rem;
	font-size: .84em;
	line-height: 1.55;
}

.xqp-portal .xqp-featured-more {
	font-size: .84em;
	font-weight: 700;
}

.mw-parser-output .xqp-portal .xqp-contrib-list {
	margin: .8rem .9rem 1rem;
	padding: 0;
	list-style: none;
	font-size: .84em;
}

.mw-parser-output .xqp-portal .xqp-contrib-list > li {
	display: grid;
	grid-template-columns: 9.5rem minmax( 0, 1fr );
	gap: .6rem;
	margin: 0 0 .35rem;
	line-height: 1.45;
}

.xqp-portal .xqp-contrib-what {
	font-weight: 700;
}

.xqp-portal .xqp-contrib-how {
	color: var(--xqp-muted);
}

@media ( max-width: 1100px ) {
	.xqp-portal .xqp-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.xqp-portal .xqp-hero-title {
		font-size: 1.7em;
	}

	.xqp-portal .xqp-grid,
	.xqp-portal .xqp-bottom,
	.xqp-portal .xqp-featured-body {
		grid-template-columns: minmax( 0, 1fr );
	}

	.xqp-portal .xqp-featured-figure {
		max-width: 10.5rem;
	}

	.mw-parser-output .xqp-portal .xqp-quicknav > li {
		padding: 0 .6rem;
		border-right: 0;
	}
}
/* ===== Xiangqipedia front page: end managed block ===== */

/* Reusable biography infobox, published through MediaWiki:Common.css. */
.mw-parser-output .xqp-person-infobox {
    float: right;
    clear: right;
    width: 320px;
    max-width: 100%;
    margin: 0 0 1.5rem 1.5rem;
    border: 1px solid #a2a9b1;
    border-spacing: 0;
    background: #f8f9fa;
    color: #202122;
    font-family: sans-serif;
    font-size: 0.8em;
    line-height: 1.5;
}
.xqp-person-infobox caption {
    font-size: 1.35em;
    font-weight: bold;
    padding: 0.4em;
}
.xqp-person-infobox th, .xqp-person-infobox td {
    padding: 0.3em 0.55em;
    vertical-align: top;
}
.xqp-person-infobox th[scope="row"] { text-align: left; width: 39%; }
.xqp-person-infobox .xqp-person-section { text-align: center; background: #eaecf0; }
.xqp-person-infobox .xqp-person-photo,
.xqp-person-infobox .xqp-person-caption { text-align: center; }
.xqp-person-infobox .xqp-person-photo img { max-width: 100%; height: auto; }
.xqp-person-infobox .xqp-person-caption { font-size: 0.92em; padding-bottom: 0.7em; }
@media (max-width: 719px) {
    .mw-parser-output .xqp-person-infobox {
        float: none;
        margin: 0 auto 1.5rem;
    }
}
/* The Repatriation of the Buddha article leads with a board figure. This
   applies the same featured sidebox as the Elbow horse and Child Worships
   Buddha pages to the running wiki before the next deployment ships the
   canonical copy from config/SiteSettings.php. */
body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-child,
body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-of-type {
    float: right;
    display: flex;
    flex-direction: column;
    max-width: 20rem;
    margin: 0 0 1.25rem 1.5rem;
}

/* The viewer script inserts the caption before the frame; a figure reads
   better with the board first and its caption underneath. */
body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-child iframe,
body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-of-type iframe {
    order: 1;
}

body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-child .xqp-caption,
body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-of-type .xqp-caption {
    order: 2;
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}

@media ( max-width: 719px ) {
    body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-child,
    body.page-Repatriation_of_the_Buddha .mw-parser-output > .xqp-player:first-of-type {
        float: none;
        max-width: none;
        margin: 1.5rem auto;
    }
}