MediaWiki:Common.css: Difference between revisions
Appearance
Content deleted Content added
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
| Line 1: | Line 1: | ||
/* |
/* 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) { |
|||
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.
*/