/*
* 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 */
/* TODO: Minerva/Mobile.css doesn't have this. */
/* We might be able to get rid of this post DiscussionTools */
.ns-talk .mw-body-content dd {
margin-top: 0.4em;
margin-bottom: 0.4em;
}
/* Reduce page jumps by hiding collapsed/dismissed content */
/* TODO: Minerva/Mobile.css doesn't have this. */
.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 */
/* TODO: Minerva/Mobile.css doesn't have this. */
/* 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 */
/* TODO: Minerva/Mobile.css doesn't have this. */
#editpage-specialchars {
display: none;
}
/* Make the list of references smaller
* Keep in sync with Template:Refbegin/styles.css
* And Template:Reflist/styles.css
*/
ol.references {
font-size: 90%;
margin-bottom: 0.5em;
}
/* Cite customizations for Parsoid
* Once everything uses the one true parser these are just 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: "^ ";
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
content: '[' counter( mw-Ref, lower-alpha ) ']';
}
.mw-ref > a[data-mw-group=upper-alpha]::after {
content: '[' counter( mw-Ref, upper-alpha ) ']';
}
.mw-ref > a[data-mw-group=decimal]::after {
content: '[' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-roman]::after {
content: '[' counter( mw-Ref, lower-roman ) ']';
}
.mw-ref > a[data-mw-group=upper-roman]::after {
content: '[' counter( mw-Ref, upper-roman ) ']';
}
.mw-ref > a[data-mw-group=lower-greek]::after {
content: '[' counter( mw-Ref, lower-greek ) ']';
}
/* 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: #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: #fef6e7;
}
/* Minimum thumb width */
/* TODO: Minerva does not have */
/* FIXME: Probably wants a media query? */
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;
}
/* Styling for tags in changes pages */
/* FIXME: makes text in Minerva very small :/, 12.2pxish, because the parent font size is set to 0.85em (blgh). probably should shuffle this out to Vector, 2022, and Minerva skins */
.mw-tag-markers {
font-style: italic;
font-size: 90%;
}
/* 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]], and [[Mediawiki:Group-autoconfirmed.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. */
/* TODO: Minerva does not have */
.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 */
/* TODO: Minerva does not have */
ul.permissions-errors {
margin: 0;
}
ul.permissions-errors > li {
list-style: none;
}
/* larger inline math */
/* TODO: Probably should move to Group-user */
span.mwe-math-mathml-inline {
font-size: 118%;
}
/* Make <math display="block"> be left aligned with one space indent for
* compatibility with style conventions
*/
/* TODO: Minerva does not have */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
/* TODO: Probably should move to Group-user */
.mwe-math-mathml-display math {
display: inline;
}
@media screen {
/* TODO: Minerva doesn't have */
/* 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;
}
}
/* TODO: Minerva doesn't have */
/* 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]]
*/
/* Infobox template style */
.infobox {
border: 1px solid #a2a9b1;
color: black;
padding: 0.2em;
font-size: 88%;
line-height: 1.5em;
}
@media screen {
.infobox {
background-color: #f8f9fa;
border-spacing: 3px;
}
}
@media (max-width: 720px) {
width: 100%;
}
@media (min-width: 720px) {
.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 */
/* TODO: Use three classes to match specificity of MobileFrontend/Minerva selectors
* Also -above, -title
* Minerva has .content .mw-parser-output .infobox-*
* What are we overriding? hacks.less (why does hacks.less care about text-alignment???)
* It looks like anything that was upstream is gone so we can remove the line for left/right in hacks.less
* not .infobox caption though, which is fine to leave there anyway (nb that doesn't need the specificity it has).
*/
/* TODO: Can remove from Module:Infobox/styles.css */
.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 */
/* TODO: Minerva does not have */
.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) */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
/* TODO: Minerva also has nowrap. Not sure if we want these to always
* nowrap though */
white-space: nowrap;
/* 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 screen {
.nochecker .gallerybox .thumb img {
background-image: none;
}
}
/* Put anything you mean to be a sitewide addition above the TemplateStyles
* comment above.
*/
/* Prevent flags in tables from collapsing
Fix for T116318
*/
/* TODO: Common.css doesn't have this */
.flagicon img {
min-width: 25px;
}
/* TODO: Common.css doesn't have this */
/* Prevent unnecessary margin at the bottom of centralnotices */
.cnotice {
margin-bottom: 0 !important;
}
/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
*/
/* TODO: Common.css doesn't have. Why is this here? */
.mw-parser-output .infobox .nowrap {
white-space: normal !important;
}
/* Special treatment for navboxes on Minerva desktop (tablet) */
/* Should just remove */
@media (min-width: 1000px) {
.sistersitebox {
font-size: 0.7em !important;
}
}
/* Do not print:
1: When in mainspace: Article message boxes,
navboxes, sister project boxes, disambig links,
and items marked as metadata.
2: section edit links.
3: navbar links.
4: Show/hide toggles for collapsible items.
*/
.ns--1 .ambox,
.ns-0 .ambox,
.ns--1 .navbox,
.ns-0 .navbox,
/* high specificity because Minerva */
.mediawiki.ns--1 .mw-parser-output .sidebar,
.mediawiki.ns-0 .mw-parser-output .sidebar,
.ns--1 .sisterproject,
.ns-0 .sisterproject,
.ns--1 .hatnote,
.ns-0 .hatnote,
.ns--1 .metadata,
.ns-0 .metadata,
.sistersitebox,
.editlink,
.navbar,
span.mw-collapsible-toggle,
th .sortkey,
td .sortkey,
#mw-revision-nav,
/* Add formatting to make sure that "external references" from templates
like [[Template:Ref]] do not get URL expansion, not even when printed.
The anchor itself has class "external autonumber" and the url expansion
is inserted when printing (see the common printing style sheet at
http://en.wikipedia.org/w/skins/common/commonPrint.css) using the
":after" pseudo-element of CSS.
*/
.nourlexpansion a.external.text:after,
.nourlexpansion a.external.autonumber:after {
display: none !important;
}
/* Uncollapse collapsible things */
.mw-parser-output .mw-collapsed .mw-collapsible-content {
display: block !important;
}
table.collapsible tr,
.mw-parser-output table.mw-collapsed > * > tr {
display: table-row !important;
}
.mw-parser-output ol.mw-collapsed > li,
.mw-parser-output ul.mw-collapsed > li {
display: list-item !important;
}
/* On websites with siteSub visible, the margin on the firstHeading is not needed. */
#firstHeading {
margin: 0;
}
/* We don't want very long URLs (that are added to the content in print) to widen the canvas */
#content a.external.text:after,
#content a.external.autonumber:after {
word-wrap: break-word;
}
/*
- Basic infobox styling
- Remove background colors, they are hard to print
*/
.infobox {
border: solid 1px #aaa;
border-spacing: 0;
border-collapse: collapse;
width: 180pt !important; /*T174957*/
}
.infobox > * > tr > td,
.infobox > * > tr > th {
padding: 2px 5px;
border-bottom: 1px solid #EAECF0;
}
/* Reduce noise for print medium - labels may be links */
.infobox a,
/* reset last border (set above) of infobox */
.infobox > * > tr:last-child > th,
.infobox > * > tr:last-child > td {
border: 0;
}
/* References */
.refbegin a,
.references a,
.reference a {
color: black !important;
}
.reference a {
border-bottom: 0;
}
ol.references,
div.reflist,
div.refbegin,
cite * {
/* Override any editor added inline styles that play with font-size */
font-size: inherit !important;
}
.refbegin li,
.references li {
color: #666;
line-height: 14pt;
}
.printfooter {
clear: both;
}
/*
A file for css that corrects known rendering issues on known Wikimedia wikis.
the following definitions exist to deal with certain inline styles
present in wikitext.
This selectors used here should reflect the list on:
https://www.mediawiki.org/wiki/Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis#Use_standardized_class_names_in_HTML_markup_for_components_in_templates_across_projects
FIXME: Review all of these hacks to see if they still apply.
*/
@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
@import 'templates/ambox.less';
.content {
.vertical-navbox,
.navbox {
display: none;
}
table,
.infobox {
// Unfloat tables and infoboxes:;
// A lot of templates introduce floating and horizontal margins inline styles
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.infobox {
font-size: 90%;
position: relative;
border: @border-width-base @border-style-base var( --border-color-muted );
margin-bottom: 2em;
color: var( --color-base );
background-color: var( --background-color-interactive-subtle );
display: flex;
flex: 1 1 100%;
flex-flow: column nowrap;
width: 100% !important;
max-width: 100% !important;
caption {
padding: 10px 10px 0;
text-align: center;
}
th, td {
vertical-align: top;
border: 0;
border-bottom: @border-width-base @border-style-base var( --border-color-muted );
padding: 7px 10px;
}
tbody > tr > td,
tbody > tr > th {
flex: 1 0;
}
td:only-child,
th:only-child {
width: 100%;
}
tr:last-child th,
tr:last-child td {
border: 0;
}
& > tbody,
& > caption {
display: flex;
flex-flow: column nowrap;
}
& > tbody > tr {
min-width: 100%;
display: flex;
flex-flow: row nowrap;
}
}
// Hack to assign info boxes properly when using RTL languages on LTR wiki
.mw-content-ltr .infobox {
/* @noflip */
text-align: left;
}
// Hack to assign info boxes properly when using LTR languages on RTL wiki
.mw-content-rtl .infobox {
/* @noflip */
text-align: right;
}
}
/* tablet/hacks.less */
@media all and ( min-width: @width-breakpoint-tablet ) {
.content {
// Float infoboxes to the right of the page
.infobox {
margin: 0.5em 0 1em 35px !important;
// Note this is fixed to ensure that we leave enough space for the sections to the infoboxes left
// FIXME [Templates]: Inline styles force us to use !important
max-width: @width-infobox !important;
width: auto !important;
float: right !important;
clear: right !important;
}
}
}
/* back to regularly scheduled hacks */
.hatnote,
.dablink,
.rellink {
padding: 5px 7px;
color: var( --color-subtle );
font-size: @font-size-minerva-smallest;
background-color: var( --background-color-interactive-subtle );
margin-bottom: 1px;
overflow: hidden;
a {
color: var( --color-progressive );
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
// When in the HTML these should be revealed at tablet resolution (T172078)
.content {
.vertical-navbox,
.navbox {
display: inherit;
}
}
}
// Hacks to render galleries and multicol tables better on mobile
@media all and ( max-width: @width-breakpoint-tablet ) {
.content {
// Deal with Template:Multiple_image. T38030 and T148505
.thumb .thumbinner {
.flex-display( flex );
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
// avoid image child overflowing the container (T200518)
// stylelint-disable-next-line declaration-block-no-redundant-longhand-properties
flex-direction: column;
> .thumbcaption {
.flex( 1, 0, 100% );
display: block;
}
}
}
}
