MediaWiki:Common.css: Difference between revisions

Revision as of 01:21, 1 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;
    }
}

/* ===== 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 ===== */