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.
/* Prevent Chrome auto-boost weirdness */
html { -webkit-text-size-adjust: 100%; }
/* ===== Infobox base (light theme default) ===== */
table.infobox{
width:22em; max-width:22em; box-sizing:border-box;
float:right; clear:right; margin:0 0 1em 1em;
border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
font-size:90%; line-height:1.5em;
/* use 'separate' so table padding works like enwiki */
border-collapse:separate; border-spacing:0; padding:.5em;
}
table.infobox th, table.infobox td{
padding:.5em .45em; /* enwiki-ish cell padding */
vertical-align:top;
}
table.infobox th{ text-align:left; }
/* Title — no background by default; 125% and centered */
table.infobox th.infobox-title{
text-align:center;
font-size:125%;
font-weight:bold;
background:transparent; /* default: none */
padding:.35em .45em .3em;
}
/* Only apply color when |color= was set (module adds class + CSS var) */
table.infobox th.infobox-title.has-title-color{
background:var(--ib-title-bg);
}
/* Image row: remove padding so image can touch the inner edges; make image 100% */
table.infobox td.infobox-image-cell{
padding:0;
}
table.infobox td.infobox-image-cell img{
display:block; width:100%; height:auto;
}
/* Prevent long strings from breaking layout */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }
/* Explicit Dark (already present, keep yours) */
html.skin-theme-clientpref-night table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
html.skin-theme-clientpref-night table.infobox th { background:transparent; color:#e8eaed; }
html.skin-theme-clientpref-night table.infobox td { background:transparent; color:#e8eaed; }
html.skin-theme-clientpref-night table.infobox a { color:#8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited { color:#c58af9; }
/* Automatic + OS is dark */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
html.skin-theme-clientpref-os table.infobox th { background:transparent; color:#e8eaed; }
html.skin-theme-clientpref-os table.infobox td { background:transparent; color:#e8eaed; }
html.skin-theme-clientpref-os table.infobox a { color:#8ab4f8; }
html.skin-theme-clientpref-os table.infobox a:visited { color:#c58af9; }
/* keep title readable; no special bg unless |color= was set */
html.skin-theme-clientpref-os table.infobox th.infobox-title { background: transparent; }
}
/* — Light mode: improve infobox label/value contrast; title stays transparent — */
table.infobox th:not(.infobox-title) {
background: #f2f2f2;
font-weight: 600;
}
/* ===================== QUICK FACTS (touch devices only) ===================== */
/* The block is scoped to coarse pointers so desktop is untouched */
@media (pointer: coarse) {
/* Default (light) tokens */
:root {
--qf-bg: #f8f9fa;
--qf-hdr-bg: #eaecf0;
--qf-fg: #202122;
--qf-border: #a2a9b1;
}
details.quickfacts {
margin: .5em 0 1em;
border: 1px solid var(--qf-border);
border-radius: 6px;
background: var(--qf-bg);
color: var(--qf-fg);
overflow: hidden;
}
/* Summary header + chevron affordance */
details.quickfacts > summary.quickfacts-summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-weight: 600;
padding: .6em .8em;
background: var(--qf-hdr-bg);
color: var(--qf-fg);
list-style: none;
}
details.quickfacts > summary.quickfacts-summary::-webkit-details-marker { display: none; }
details.quickfacts > summary.quickfacts-summary::after {
content: "▾"; /* closed state chevron */
font-size: 1.1em;
line-height: 1;
margin-left: .5em;
transition: transform .2s ease;
}
details.quickfacts[open] > summary.quickfacts-summary::after {
content: "▴"; /* open state chevron */
}
/* Optional polish */
details.quickfacts > summary.quickfacts-summary:hover { filter: brightness(.98); }
details.quickfacts > summary.quickfacts-summary:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 4px;
}
/* Make the infobox full width inside Quick facts */
details.quickfacts .infobox.infobox--in-quickfacts {
float: none;
width: 100%;
max-width: none;
margin: 0;
}
}
/* ===================== DARK / AUTO-DARK OVERRIDES ===================== */
/* Vector's explicit dark toggles */
html.skin-theme-clientpref-night details.quickfacts,
html.skin-theme-clientpref-dark details.quickfacts,
html[data-mw-color-scheme="dark"] details.quickfacts {
--qf-bg: #1f2327;
--qf-hdr-bg: #2a2e33;
--qf-fg: #e8eaed;
--qf-border: #3c4043;
}
/* “Automatic” (OS dark) */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os details.quickfacts {
--qf-bg: #1f2327;
--qf-hdr-bg: #2a2e33;
--qf-fg: #e8eaed;
--qf-border: #3c4043;
}
}
/* ======= Article hero from infobox image (touch devices only) ======= */
@media (pointer: coarse) {
.article-hero {
width: 100%;
aspect-ratio: 10 / 7; /* reserves height: no reflow jump */
overflow: hidden;
border-radius: 0 0 8px 8px;
margin: 0 0 1rem 0;
background: #111;
contain: layout paint size;
transform: translateZ(0);
/* gentle reveal to avoid flash while cloning */
opacity: 0;
transition: opacity .2s ease;
}
.article-hero.is-ready { opacity: 1; }
/* Make any wrapper we clone fill the crop frame */
.article-hero a,
.article-hero span,
.article-hero figure,
.article-hero picture { display: block; height: 100%; }
.article-hero img, .article-hero video {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
}
/* Dark/auto placeholder tint */
html.skin-theme-clientpref-night .article-hero,
html.skin-theme-clientpref-dark .article-hero,
html[data-mw-color-scheme="dark"] .article-hero { background: #0f1316; }
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .article-hero { background: #0f1316; }
}