MediaWiki:Common.css: Difference between revisions
Add the board sidebox and side-image rules for Child Worships Buddha (canonical copy ships in config/SiteSettings.php) |
Style responsive biography infoboxes |
||
| Line 387: | Line 387: | ||
} | } | ||
/* ===== Xiangqipedia front page: end managed block ===== */ | /* ===== 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; | |||
} | |||
} | |||
Revision as of 14:58, 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;
}
}
/* 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;
}
}