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