MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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 ===== */