Jump to content

MediaWiki:Common.css: Difference between revisions

From Insurer Brain
Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 1: Line 1:
/* All JavaScript here will be loaded for users of the mobile site */
/* CSS placed here will be applied to all skins */
/*
/* Note, there is no corresponding User:Username/mobile.js; however users may use User:Username/minerva.js */
* This is the CSS common to all desktop skins on en.Wikipedia.
function addPortletLink() {
* Styling inside .mw-parser-output should generally use TemplateStyles.
mw.log.warn(
*/
'addPortletLink is deprecated on desktop and never implemented on mobile',
/* Reset italic styling set by user agent */
'More information on https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_(users)#addPortletLink'
cite,
);
dfn {
font-style: inherit;
}
}


/* Straight quote marks for <q> */
/* CapSach — Mobile TOC overlay (all skins; phone widths) */
q {
(function () {
quotes: '"' '"' "'" "'";
// Detect MobileFrontend site (works across mobile skins)
}
function isMobileSite() {
return document.body && document.body.classList.contains('mw-mf');
}


/* Avoid collision of blockquote with floating elements by swapping margin and padding */
function once(id) {
blockquote {
// Avoid duplicates across hook re-runs
overflow: hidden;
return !document.getElementById(id);
margin: 1em 0;
}
padding: 0 40px;
}


/* Consistent size for <small>, <sub> and <sup> */
function ready(fn) {
small {
if (document.readyState === 'loading') {
font-size: 85%;
document.addEventListener('DOMContentLoaded', fn);
}
} else {
fn();
}
}


.mw-body-content sub,
function runInit() {
.mw-body-content sup {
// Don’t run on very wide screens (tablet/desktop have native TOC)
font-size: 80%;
if (window.matchMedia('(min-width: 768px)').matches) return;
}


/* Same spacing for indented and unindented paragraphs on talk pages */
// Only on normal content pages
.ns-talk .mw-body-content dd {
if (window.mw && mw.config && mw.config.get) {
margin-top: 0.4em;
if (!mw.config.get('wgIsArticle')) return;
margin-bottom: 0.4em;
}
}


/* Reduce page jumps by hiding collapsed/dismissed content */
// Prevent duplicate UI
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
if (!once('cps-open-toc')) return;


/* Avoid FOUC/reflows on collapsed elements. */
// Find the content root; MobileFrontend restructures DOM, so be flexible
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
var root =
/* TODO: Use :is() selector at some reasonable future when support is good for Most Clients */
document.querySelector('#mw-content-text .mw-parser-output') ||
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
document.querySelector('.mw-parser-output') ||
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
document.getElementById('mw-content-text') ||
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
document.querySelector('#content') ||
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
document.body;
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content,


/* Hide charinsert base for those not using the gadget */
// Collect headings (H2–H6). Prefer spans with .mw-headline (stable anchor ids)
#editpage-specialchars {
var items = [];
display: none;
var indexById = Object.create(null);
}
var headingElById = Object.create(null);


/* Different margin on references */
var headings = root.querySelectorAll('h2, h3, h4, h5, h6');
.references {
headings.forEach(function (h) {
margin-bottom: 0.5em;
var level = parseInt(h.tagName.slice(1), 10);
}
if (level < 2 || level > 6) return;
var headline = h.querySelector('.mw-headline') || h;
var id = headline.id || h.id;
var text = (headline.textContent || h.textContent || '').trim();
if (!id || !text) return;


/* Cite customizations */
items.push({ id: id, text: text, level: level });
span[ rel="mw:referencedBy" ] {
indexById[id] = items.length - 1;
counter-reset: mw-ref-linkback 0;
headingElById[id] = h; // keep the <h2..h6> for collapse checks
}
});


span[ rel='mw:referencedBy' ] > a::before {
// Show only if there are enough headings to be useful (match core default)
content: counter( mw-ref-linkback, lower-alpha );
if (items.length < 3) return;
font-size: 80%;
font-weight: bold;
font-style: italic;
}


a[ rel="mw:referencedBy" ]::before {
// Create trigger button (bottom-left; avoids “Back to top” on bottom-right)
font-weight: bold;
var btn = document.createElement('button');
content: "^";
btn.id = 'cps-open-toc';
}
btn.type = 'button';
btn.setAttribute('aria-label', 'Open table of contents');
btn.innerHTML = '<span class="icon" aria-hidden="true">≡</span><span class="label">TOC</span>';
document.body.appendChild(btn);


span[ rel="mw:referencedBy" ]::before {
// Overlay + panel
content: "^ ";
var overlay = document.createElement('div');
}
overlay.id = 'cps-toc-overlay';
overlay.setAttribute('aria-hidden', 'true');


/* Styling for jQuery makeCollapsible, matching that of collapseButton */
var panel = document.createElement('div');
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
panel.id = 'cps-toc-panel';
font-weight: normal;
panel.setAttribute('role', 'dialog');
padding-right: 0.2em;
panel.setAttribute('aria-modal', 'true');
padding-left: 0.2em;
panel.setAttribute('aria-label', 'Table of contents');
}


.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
var header = document.createElement('div');
/* @noflip */
header.id = 'cps-toc-header';
float: left;
header.innerHTML =
}
'<h2 id="cps-toc-title">Contents</h2>' +
'<button id="cps-toc-close" type="button" aria-label="Close">×</button>';


/* Lists in wikitable data cells are always left-aligned */
var list = document.createElement('ul');
.wikitable td ul,
list.id = 'cps-toc-list';
.wikitable td ol,
.wikitable td dl {
/* @noflip */
text-align: left;
}


/* Change the external link icon to a PDF icon for all PDF files */
items.forEach(function (it) {
.mw-parser-output a[href$=".pdf"].external,
var li = document.createElement('li');
.mw-parser-output a[href*=".pdf?"].external,
li.setAttribute('data-level', String(it.level));
.mw-parser-output a[href*=".pdf#"].external,
var a = document.createElement('a');
.mw-parser-output a[href$=".PDF"].external,
a.href = '#' + it.id;
.mw-parser-output a[href*=".PDF?"].external,
a.textContent = it.text;
.mw-parser-output a[href*=".PDF#"].external {
li.appendChild(a);
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
list.appendChild(li);
/* @noflip */
});
padding: 8px 18px 8px 0;
}


/* System messages styled similarly to fmbox */
panel.appendChild(header);
/* for .mw-warning-with-logexcerpt, behavior of this line differs between
panel.appendChild(list);
* the edit-protected notice and the special:Contribs for blocked users
overlay.appendChild(panel);
* The latter has specificity of 3 classes so we have to triple up here.
document.body.appendChild(overlay);
*/
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: var(--background-color-error-subtle, #ffdbdb);
padding: 0.25em 0.9em;
box-sizing: border-box;
}


/* default colors for partial block message */
// Focus handling
/* gotta get over the hump introduced by the triple class above */
var lastFocus = null;
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
function openOverlay() {
border-color: #fc3;
lastFocus = document.activeElement;
background-color: var(--background-color-warning-subtle, #fef6e7);
overlay.classList.add('is-open');
}
overlay.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
var firstLink = list.querySelector('a');
if (firstLink) firstLink.focus({ preventScroll: true });
}
function closeOverlay() {
overlay.classList.remove('is-open');
overlay.setAttribute('aria-hidden', 'true');
document.body.style.overflow = '';
if (lastFocus && lastFocus.focus) lastFocus.focus({ preventScroll: true });
}


/* Minimum thumb width */
btn.style.display = 'flex'; // reveal trigger now that we know we have headings
@media (min-width: 640px) {
btn.addEventListener('click', openOverlay);
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumbinner {
min-width: 100px;
}
}


/* Prevent floating boxes from overlapping any category listings,
overlay.addEventListener('click', function (e) {
file histories, edit previews, and edit [Show changes] views. */
// Click outside the bottom sheet closes
#mw-subcategories,
if (e.target === overlay) closeOverlay();
#mw-pages,
});
#mw-category-media,
overlay.querySelector('#cps-toc-close').addEventListener('click', closeOverlay);
#filehistory,
#wikiPreview,
#wikiDiff {
clear: both;
}


/* Hide stuff meant for accounts with special permissions. Made visible again in
overlay.addEventListener('keydown', function (e) {
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
if (e.key === 'Escape') closeOverlay();
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
});
[[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
[[MediaWiki:Group-extendedconfirmed.css]], [[Mediawiki:Group-autoconfirmed.css]], and [[MediaWiki:Group-user.css]] */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
display: none;
}


/* Hide the redlink generated by {{Editnotice}},
// ---------- Helpers for collapsed/parent detection ----------
this overrides the ".sysop-show { display: none; }" above that applies
function findParentH2Item(id) {
to the same link as well. See [[phab:T45013]]
var idx = indexById[id];
if (typeof idx !== 'number') return null;
for (var i = idx - 1; i >= 0; i--) {
if (items[i].level === 2) return items[i];
}
return null;
}


Hide the images in editnotices to keep them readable in VE view.
function isH2Collapsed(h2El) {
Long term, editnotices should become a core feature so that they can be designed responsive. */
if (!h2El) return false;
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
display: none !important;
}


/* Remove bullets when there are multiple edit page warnings */
// Preferred: ARIA state on the heading
ul.permissions-errors {
var ae = h2El.getAttribute('aria-expanded');
margin: 0;
if (ae === 'false') return true;
}
if (ae === 'true') return false;


ul.permissions-errors > li {
// Newer markup: <section aria-expanded="…"> wrapping the H2 and content
list-style: none;
var section = h2El.closest && h2El.closest('section');
}
if (section && section.hasAttribute('aria-expanded')) {
return section.getAttribute('aria-expanded') === 'false';
}


/* larger inline math */
// Older MobileFrontend markup: .collapsible-block following the H2
span.mwe-math-mathml-inline {
var next = h2El.nextElementSibling;
font-size: 118%;
if (next && next.classList.contains('collapsible-block')) {
}
return !next.classList.contains('open-block');
}


/* Make <math display="block"> be left aligned with one space indent for
// Last resort: hidden attribute on content block
* compatibility with style conventions
if (next && (next.hidden || next.getAttribute('hidden') !== null)) return true;
*/
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}


.mwe-math-mathml-display math {
return false;
display: inline;
}
}


@media screen {
function findAnchorForHeadingEl(hEl) {
/* Put a chequered background behind images, only visible if they have transparency,
if (!hEl) return null;
* except on main, user, and portal namespaces
var span = hEl.querySelector && hEl.querySelector('.mw-headline[id]');
*/
if (span) return span;
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
return hEl.id ? hEl : null;
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}
}


/* Display "From Wikipedia, the free encyclopedia" in skins that support it,
function scrollToElement(el) {
try {
do not apply to print mode */
#siteSub {
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
display: block;
} catch (_) {
}
el.scrollIntoView(true);
}
/* Make the list of references smaller
* Keep in sync with Template:Refbegin/styles.css
* And Template:Reflist/styles.css
*/
.references {
font-size: 90%;
}
}

/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
/* "Temporary" to remove links in sidebar T255381 */
#t-upload,
/* Hide broken download box on Special:Book pending T285400 */
.mw-special-Book #coll-downloadbox {
display: none;
}

/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
* CSS is separated by component (which is why media queries are not joined)
*/

/* Infoboxes */
.infobox {
border: 1px solid #a2a9b1;
color: black;
padding: 0.2em;
font-size: 88%;
line-height: 1.5em;
border-spacing: 3px;
}

@media screen {
.infobox {
background-color: #f8f9fa;
}
}
}


@media (max-width: 640px) {
// ---------- TOC click behavior ----------
.infobox {
list.addEventListener('click', function (e) {
width: 100%;
var a = e.target && e.target.closest('a');
}
if (!a) return;
.infobox .nowrap {
white-space: normal;
}
}


@media (min-width: 640px) {
e.preventDefault();
.infobox {
var targetId = a.getAttribute('href').slice(1);
/* @noflip */
var target = document.getElementById(targetId);
margin: 0.5em 0 0.5em 1em;
closeOverlay();
/* @noflip */
float: right;
/* @noflip */
clear: right;
width: 22em;
}
}


.infobox-header,
var li = a.closest('li');
.infobox-label,
var level = li ? parseInt(li.getAttribute('data-level') || '0', 10) : 0;
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
vertical-align: top;
}


.infobox-label,
// If user tapped H3+ and its parent H2 is collapsed → go to that H2 instead
.infobox-data,
if (level >= 3) {
/* Remove element selector when every .infobox thing is using the standard module/templates */
var parentH2Item = findParentH2Item(targetId);
.infobox th,
if (parentH2Item) {
.infobox td {
var h2El = headingElById[parentH2Item.id] || null;
/* @noflip */
var anchorEl = findAnchorForHeadingEl(h2El) || h2El;
text-align: left;
}


/* Remove .infobox when element selectors above are removed */
// Route to H2 if it's collapsed, or if for any reason the H3 anchor isn’t reachable
.infobox .infobox-above,
if ((h2El && isH2Collapsed(h2El)) || !target) {
.infobox .infobox-title,
if (anchorEl) {
/* Remove element selector when every .infobox thing is using the standard module/templates */
scrollToElement(anchorEl);
.infobox caption {
if (anchorEl.id) {
font-size: 125%;
setTimeout(function () {
font-weight: bold;
if (history && history.replaceState) {
text-align: center;
history.replaceState(null, '', '#' + anchorEl.id);
}
} else {
location.hash = anchorEl.id;
}
}, 200);
}
return;
}
}
}
}


.infobox-title,
// Default behavior: go to the requested target (H2 or H3) when not inside a collapsed section
/* Remove element selector when every .infobox thing is using the standard module/templates */
if (target) {
.infobox caption {
scrollToElement(target);
padding: 0.2em;
setTimeout(function () {
}
if (history && history.replaceState) {
history.replaceState(null, '', '#' + targetId);
} else {
location.hash = targetId;
}
}, 200);
}
});


/* Remove .infobox when element selectors above are removed */
// Re-hide on rotation/resize to tablet/desktop
.infobox .infobox-header,
window.addEventListener(
.infobox .infobox-subheader,
'resize',
.infobox .infobox-image,
function () {
.infobox .infobox-full-data,
if (window.matchMedia('(min-width: 768px)').matches) {
.infobox .infobox-below {
btn.style.display = 'none';
text-align: center;
closeOverlay();
}
} else {

btn.style.display = 'flex';
/* Remove .infobox when element selectors above are removed */
}
.infobox .infobox-navbar {
},
/* @noflip */
{ passive: true }
text-align: right;
);
}
}

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
/* @noflip */
text-align: left;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
text-decoration: none !important;
}

/* Prevent line breaks in silly places where desired (nowrap)
and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
white-space: nowrap;
}

/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}

/* texhtml class for inline math (based on generic times-serif class) */
/* remove spans when this is TemplateStyled */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}

span.texhtml span.texhtml {
font-size: 100%;
}

@media (min-width: 640px) {
span.texhtml {
white-space: nowrap;
}
}

/* Prevent flags in tables from collapsing: Fix for T116318
* TODO: Remove when [[phab:T368469]] merges [[phab:T367463]] for the other skins
*/
@media (max-width: 640px) {
.flagicon a > img,
.flagicon noscript > img {
max-width: none !important;
}
}

@media screen {
.nochecker .gallerybox .thumb img {
background-image: none;
}
}

/* CapSach — Mobile TOC overlay (all skins) */
#cps-open-toc {
position: fixed;
left: 16px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
width: 48px; height: 48px;
border: 0; border-radius: 999px;
display: none; /* shown by JS when headings exist */
align-items: center; justify-content: center;
font-size: 14px; font-weight: 600;
color: #fff; background: rgba(0,0,0,.65);
box-shadow: 0 2px 8px rgba(0,0,0,.15);
z-index: 1000; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

#cps-open-toc:focus { outline: 2px solid #36c; outline-offset: 2px; }
#cps-open-toc .label { display: none; } /* icon-only by default */
#cps-open-toc .icon { font-size: 20px; line-height: 1; }

/* Full-screen scrim */
#cps-toc-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.35);
display: none; z-index: 1001;
}
#cps-toc-overlay.is-open { display: block; }

/* Bottom sheet panel */
#cps-toc-panel {
position: fixed; left: 0; right: 0; bottom: 0;
max-height: 85vh;
border-radius: 12px 12px 0 0;
background: #fff; color: #202122;
box-shadow: 0 -8px 20px rgba(0,0,0,.2);
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
}

/* Header row */
#cps-toc-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px;
}
#cps-toc-title { font-size: 16px; font-weight: 600; margin: 0; }
#cps-toc-close {
background: transparent; border: 0; font-size: 22px; line-height: 1;
}

/* List */
#cps-toc-list {
list-style: none; margin: 0; padding: 4px 2px 6px;
max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#cps-toc-list li { margin: 2px 0; }
#cps-toc-list a {
display: block; padding: 8px 10px; border-radius: 8px;
text-decoration: none; color: inherit;
}
#cps-toc-list a:focus, #cps-toc-list a:active {
outline: 2px solid #36c; background: #f5f6f7;
}

/* Indentation by heading level */
#cps-toc-list li[data-level="3"] { padding-left: 12px; }
#cps-toc-list li[data-level="4"] { padding-left: 24px; }
#cps-toc-list li[data-level="5"] { padding-left: 36px; }
#cps-toc-list li[data-level="6"] { padding-left: 48px; }

/* Only show on phone-ish widths; tablet/desktop keep native TOC */
@media (min-width: 768px) {
#cps-open-toc, #cps-toc-overlay { display: none !important; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}

/* Make <youtube> embeds fluid and capped on large screens */
.mw-parser-output iframe[src*="youtube.com"],
.mw-parser-output iframe[src*="youtube-nocookie.com"] {
width: 100% !important; /* fills the content width on phones */
max-width: 320px; /* "typical" max width on desktops (tweak as needed) */
height: auto !important;
aspect-ratio: 16 / 9; /* keeps 16:9 without extra markup */
display: block;
margin: 0 auto; /* center when narrower than the content column */
}


/*
// Orchestrate timing: wait for MobileFrontend to be present and re-run on dynamic updates
* Put anything you mean to be a sitewide addition above the TemplateStyles
if (window.mw && mw.loader) {
* comment above.
mw.loader.using('mobile.startup').then(function () {
*/
// Initial run
ready(function () {
if (isMobileSite()) runInit();
});
// Run again when content is replaced (edit preview, post-edit, etc.)
if (mw.hook) {
mw.hook('wikipage.content').add(function () {
if (isMobileSite()) runInit();
});
}
});
} else {
// Extremely defensive fallback (shouldn’t happen on MobileFrontend)
ready(function () {
if (isMobileSite()) runInit();
});
}
})();

Revision as of 21:36, 17 October 2025

/* CSS placed here will be applied to all skins */
/*
 * This is the CSS common to all desktop skins on en.Wikipedia.
 * Styling inside .mw-parser-output should generally use TemplateStyles.
 */
/* Reset italic styling set by user agent */
cite,
dfn {
	font-style: inherit;
}

/* Straight quote marks for <q> */
q {
	quotes: '"' '"' "'" "'";
}

/* Avoid collision of blockquote with floating elements by swapping margin and padding */
blockquote {
	overflow: hidden;
	margin: 1em 0;
	padding: 0 40px;
}

/* Consistent size for <small>, <sub> and <sup> */
small {
	font-size: 85%;
}

.mw-body-content sub,
.mw-body-content sup {
	font-size: 80%;
}

/* Same spacing for indented and unindented paragraphs on talk pages */
.ns-talk .mw-body-content dd {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),

/* Avoid FOUC/reflows on collapsed elements. */
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
/* TODO: Use :is() selector at some reasonable future when support is good for Most Clients */
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content,

/* Hide charinsert base for those not using the gadget */
#editpage-specialchars {
	display: none;
}

/* Different margin on references */
.references {
	margin-bottom: 0.5em;
}

/* Cite customizations */
span[ rel="mw:referencedBy" ] {
	counter-reset: mw-ref-linkback 0;
}

span[ rel='mw:referencedBy' ] > a::before {
	content: counter( mw-ref-linkback, lower-alpha );
	font-size: 80%;
	font-weight: bold;
	font-style: italic;
}

a[ rel="mw:referencedBy" ]::before {
	font-weight: bold;
	content: "^";
}

span[ rel="mw:referencedBy" ]::before {
	content: "^ ";
}

/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
	font-weight: normal;
	padding-right: 0.2em;
	padding-left: 0.2em;
}

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	/* @noflip */
	float: left;
}

/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
	/* @noflip */
	text-align: left;
}

/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
	background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
	/* @noflip */
	padding: 8px 18px 8px 0;
}

/* System messages styled similarly to fmbox */
/* for .mw-warning-with-logexcerpt, behavior of this line differs between
 * the edit-protected notice and the special:Contribs for blocked users
 * The latter has specificity of 3 classes so we have to triple up here.
 */
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid #bb7070;
	background-color: var(--background-color-error-subtle, #ffdbdb);
	padding: 0.25em 0.9em;
	box-sizing: border-box;
}

/* default colors for partial block message */
/* gotta get over the hump introduced by the triple class above */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
	border-color: #fc3;
	background-color: var(--background-color-warning-subtle, #fef6e7);
}

/* Minimum thumb width */
@media (min-width: 640px) {
	figure[typeof~='mw:File/Thumb'],
	figure[typeof~='mw:File/Frame'],
	.thumbinner {
		min-width: 100px;
	}
}

/* Prevent floating boxes from overlapping any category listings,
   file histories, edit previews, and edit [Show changes] views. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
	clear: both;
}

/* Hide stuff meant for accounts with special permissions. Made visible again in
   [[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
   [[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
   [[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
   [[MediaWiki:Group-extendedconfirmed.css]], [[Mediawiki:Group-autoconfirmed.css]], and [[MediaWiki:Group-user.css]] */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
	display: none;
}

/* Hide the redlink generated by {{Editnotice}},
   this overrides the ".sysop-show { display: none; }" above that applies
   to the same link as well. See [[phab:T45013]]

   Hide the images in editnotices to keep them readable in VE view.
   Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
	display: none !important;
}

/* Remove bullets when there are multiple edit page warnings */
ul.permissions-errors {
	margin: 0;
}

ul.permissions-errors > li {
	list-style: none;
}

/* larger inline math */
span.mwe-math-mathml-inline {
	font-size: 118%;
}

/* Make <math display="block"> be left aligned with one space indent for 
 * compatibility with style conventions
 */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
	margin-left: 1.6em !important;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}

.mwe-math-mathml-display math {
	display: inline;
}

@media screen {
	/* Put a chequered background behind images, only visible if they have transparency,
	 * except on main, user, and portal namespaces
	 */
	body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
		background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
	}

	/* Display "From Wikipedia, the free encyclopedia" in skins that support it,
	   do not apply to print mode */
	#siteSub {
		display: block;
	}
	
	/* Make the list of references smaller
	 * Keep in sync with Template:Refbegin/styles.css
	 * And Template:Reflist/styles.css
	 */
	.references {
		font-size: 90%;
	}
}

/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
/* "Temporary" to remove links in sidebar T255381 */
#t-upload,
/* Hide broken download box on Special:Book pending T285400 */
.mw-special-Book #coll-downloadbox {
	display: none;
}

/*
 * BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
 * SEE [[MediaWiki talk:Common.css/to do]]
 * CSS is separated by component (which is why media queries are not joined)
 */

/* Infoboxes */
.infobox {
	border: 1px solid #a2a9b1;
	color: black;
	padding: 0.2em;
	font-size: 88%;
	line-height: 1.5em;
	border-spacing: 3px;
}

@media screen {
	.infobox {
		background-color: #f8f9fa;
    }
}

@media (max-width: 640px) {
	.infobox {
		width: 100%;
	}
    
	.infobox .nowrap {
		white-space: normal;
	}
}

@media (min-width: 640px) {
	.infobox {
		/* @noflip */
		margin: 0.5em 0 0.5em 1em;
		/* @noflip */
		float: right;
		/* @noflip */
		clear: right;
		width: 22em;
	}
}

.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	vertical-align: top;
}

.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	/* @noflip */
	text-align: left;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}

.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	padding: 0.2em;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
	text-align: center;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
	/* @noflip */
	text-align: right;
}

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
	font-weight: normal;
	/* @noflip */
	text-align: left;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
	text-decoration: none !important;
}

/* Prevent line breaks in silly places where desired (nowrap)
   and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
	white-space: nowrap;
}

/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

/* texhtml class for inline math (based on generic times-serif class) */
/* remove spans when this is TemplateStyled */
span.texhtml {
	font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
	font-size: 118%;
	line-height: 1;
	/* Force tabular and lining display for texhtml */
	font-variant-numeric: lining-nums tabular-nums;
	font-kerning: none;
}

span.texhtml span.texhtml {
	font-size: 100%;
}

@media (min-width: 640px) {
	span.texhtml {
		white-space: nowrap;
	}
}

/* Prevent flags in tables from collapsing: Fix for T116318
 * TODO: Remove when [[phab:T368469]] merges [[phab:T367463]] for the other skins
 */
@media (max-width: 640px) {
	.flagicon a > img,
	.flagicon noscript > img {
		max-width: none !important;
	}
}

@media screen {
	.nochecker .gallerybox .thumb img {
		background-image: none;
	}
}

/* CapSach — Mobile TOC overlay (all skins) */
#cps-open-toc {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  display: none; /* shown by JS when headings exist */
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  color: #fff; background: rgba(0,0,0,.65);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 1000; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#cps-open-toc:focus { outline: 2px solid #36c; outline-offset: 2px; }
#cps-open-toc .label { display: none; } /* icon-only by default */
#cps-open-toc .icon { font-size: 20px; line-height: 1; }

/* Full-screen scrim */
#cps-toc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: none; z-index: 1001;
}
#cps-toc-overlay.is-open { display: block; }

/* Bottom sheet panel */
#cps-toc-panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 85vh;
  border-radius: 12px 12px 0 0;
  background: #fff; color: #202122;
  box-shadow: 0 -8px 20px rgba(0,0,0,.2);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
}

/* Header row */
#cps-toc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
#cps-toc-title { font-size: 16px; font-weight: 600; margin: 0; }
#cps-toc-close {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
}

/* List */
#cps-toc-list {
  list-style: none; margin: 0; padding: 4px 2px 6px;
  max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#cps-toc-list li { margin: 2px 0; }
#cps-toc-list a {
  display: block; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: inherit;
}
#cps-toc-list a:focus, #cps-toc-list a:active {
  outline: 2px solid #36c; background: #f5f6f7;
}

/* Indentation by heading level */
#cps-toc-list li[data-level="3"] { padding-left: 12px; }
#cps-toc-list li[data-level="4"] { padding-left: 24px; }
#cps-toc-list li[data-level="5"] { padding-left: 36px; }
#cps-toc-list li[data-level="6"] { padding-left: 48px; }

/* Only show on phone-ish widths; tablet/desktop keep native TOC */
@media (min-width: 768px) {
  #cps-open-toc, #cps-toc-overlay { display: none !important; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Make <youtube> embeds fluid and capped on large screens */
.mw-parser-output iframe[src*="youtube.com"],
.mw-parser-output iframe[src*="youtube-nocookie.com"] {
  width: 100% !important;   /* fills the content width on phones */
  max-width: 320px;         /* "typical" max width on desktops (tweak as needed) */
  height: auto !important;
  aspect-ratio: 16 / 9;     /* keeps 16:9 without extra markup */
  display: block;
  margin: 0 auto;           /* center when narrower than the content column */
}

/*
 * Put anything you mean to be a sitewide addition above the TemplateStyles
 * comment above.
 */