MediaWiki:Sitewide.css: Difference between revisions

Revision as of 19:56, 26 April 2023

/**
 * {{ambox}} (article message box) styles
 *
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-enwp-boxes.css
 * @revision 2021-07-15
 */
table.ambox {
	/* 10% = Will not overlap with other elements */
	margin: 0 10%;
	/* Prevent overflow in narrow screens (<=850px) in the Timeless skin.
	   See [[Skin:Timeless#Less than 851 pixels]]
	   and https://phabricator.wikimedia.org/source/Timeless/browse/REL1_39/resources/screen-mobile.less$268 */
	width: unset;
	border: 1px solid #a2a9b1;
	/* Default "notice" blue */
	border-left: 10px solid #36c;
	background-color: #fbfbfb;
	box-sizing: border-box;
}

/* Single border between stacked boxes. */
table.ambox + table.ambox,
table.ambox + link + table.ambox,
table.ambox + style + table.ambox {
	margin-top: -1px;
}

/* An empty narrow cell */
.ambox td.mbox-empty-cell {
	border: none;
	padding: 0;
	width: 1px;
}

/* The message body cell(s) */
.ambox th.mbox-text,
.ambox td.mbox-text {
	border: none;
	/* 0.5em left/right */
	padding: 0.25em 0.5em;
	/* Make all mboxes the same width regardless of text length */
	width: 100%;
}

/* The left image cell */
.ambox td.mbox-image {
	/* 0.5em left, 0px right */
	/* @noflip */
	padding: 2px 0 2px 0.5em;
}

/* The right image cell */
.ambox td.mbox-imageright {
	/* 0px left, 0.5em right */
	/* @noflip */
	padding: 2px 0.5em 2px 0;
}

table.ambox-notice {
	/* Blue */
	border-left-color: #36c;
}

table.ambox-speedy {
	/* Pink */
	background-color: #fee7e6;
}

table.ambox-delete,
table.ambox-speedy {
	/* Red */
	border-left-color: #b32424;
}

table.ambox-content {
	/* Orange */
	border-left-color: #f28500;
}

table.ambox-style {
	/* Yellow */
	border-left-color: #fc3;
}

table.ambox-move {
	/* Purple */
	border-left-color: #9932cc;
}

table.ambox-protection {
	/* Gray-gold */
	border-left-color: #a2a9b1;
}

/**
 * {{ambox|small=1}} styles
 *
 * These ".mbox-small" classes must be placed after all other
 * ".ambox" classes. "html body.mediawiki .ambox"
 * is so they override both "table.ambox + table.ambox"
 * and "table.ambox + link + table.ambox" above.
 *
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-enwp-boxes.css
 * @revision 2021-07-15
 */

/* For the "small=yes" option. */
html body.mediawiki .ambox.mbox-small {
	clear: right;
	float: right;
	margin: 4px 0 4px 1em;
	box-sizing: border-box;
	width: 238px;
	font-size: 88%;
	line-height: 1.25em;
}

/* For the "small=left" option. */
html body.mediawiki .ambox.mbox-small-left {
	margin: 4px 1em 4px 0;
	box-sizing: border-box;
	overflow: hidden;
	width: 238px;
	border-collapse: collapse;
	font-size: 88%;
	line-height: 1.25em;
}

/* ===== Documentation (Template:Documentation) ===== */
.template-documentation {
    clear: both;
    margin: 14px 0 0;
    border: 1px solid #a1a9b1;
    padding: 1em;
    background-color: #f9f5eb;
}
.template-documentation__start {
    margin-bottom: 0.9em;
    border-bottom: 1px solid #a1a9b1;
    padding-bottom: 3px;
}
.template-documentation__heading {
    font-size: 1.5em;
    font-weight: bold;
}
.template-documentation__end {
    margin: 7px 0;
    border: 1px solid #a1a9b1;
    padding: 1em;
    font-style: italic;
    background-color: #f9f5eb;
}
.template-documentation__toolbar {
    font-size: 0.8em;
    font-style: normal;
}

/* {{pp|small=y}} */
/*
 * This TemplateStyles sheet deliberately does NOT include the full set of
 * infobox styles. We are still working to migrate all of the manual
 * infoboxes. See [[MediaWiki talk:Common.css/to do#Infobox]]
 * DO NOT ADD THEM HERE
 */
/*
 * not strictly certain these styles are necessary since the modules now
 * exclusively output infobox-subbox or infobox, not both
 * just replicating the module faithfully
 */
.infobox-subbox {
	padding: 0;
	border: none;
	margin: -3px;
	width: auto;
	min-width: 100%;
	font-size: 100%;
	clear: none;
	float: none;
	background-color: transparent;
}

.infobox-3cols-child {
	margin: auto;
}

.infobox .navbar {
	font-size: 100%;
}

/* T281642 */
body.skin-minerva .infobox-header,
body.skin-minerva .infobox-subheader,
body.skin-minerva  .infobox-above,
body.skin-minerva .infobox-title,
body.skin-minerva  .infobox-image,
body.skin-minerva  .infobox-full-data,
body.skin-minerva .infobox-below {
	text-align: center;
}

/* {{pp-protected|reason=match parent|small=yes}} */
/* 
 * hlist styles are defined in core and Minerva and differ in Minerva. The
 * current definitions here (2023-01-01) are sufficient to override Minerva
 * without use of the hlist-separated class. The most problematic styles were
 * related to margin, padding, and the bullet. Check files listed at
 * [[MediaWiki talk:Common.css/to do#hlist-separated]]
 */
/*
 * TODO: When the majority of readership supports it (or some beautiful world
 * in which grade C support is above the minimum threshold), use :is()
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	/*
	 * don't trust the note that says margin doesn't work with inline
	 * removing margin: 0 makes dds have margins again
	 * We also want to reset margin-right in Minerva
	 */
	margin: 0; 
	display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so:
 *.hlist dt:not(:last-child)::after {
 *	content: ": ";
 *}
 *.hlist dd:not(:last-child)::after,
 *.hlist li:not(:last-child)::after {
 *	content: " · ";
 *	font-weight: bold;
 *}
 */
/* Generate interpuncts */
.hlist dt::after {
	content: ": ";
}

.hlist dd::after,
.hlist li::after {
	content: " · ";
	font-weight: bold;
}

.hlist dd:last-child::after,
.hlist dt:last-child::after,
.hlist li:last-child::after {
	content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child::before,
.hlist dd dt:first-child::before,
.hlist dd li:first-child::before,
.hlist dt dd:first-child::before,
.hlist dt dt:first-child::before,
.hlist dt li:first-child::before,
.hlist li dd:first-child::before,
.hlist li dt:first-child::before,
.hlist li li:first-child::before {
	content: " (";
	font-weight: normal;
}

.hlist dd dd:last-child::after,
.hlist dd dt:last-child::after,
.hlist dd li:last-child::after,
.hlist dt dd:last-child::after,
.hlist dt dt:last-child::after,
.hlist dt li:last-child::after,
.hlist li dd:last-child::after,
.hlist li dt:last-child::after,
.hlist li li:last-child::after {
	content: ")";
	font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li::before {
	content: " " counter(listitem) "\a0";
}

.hlist dd ol > li:first-child::before,
.hlist dt ol > li:first-child::before,
.hlist li ol > li:first-child::before {
	content: " (" counter(listitem) "\a0";
}

/* {{pp-template|small=yes}} */
.plainlist ol,
.plainlist ul {
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding: 0; /* Reset Minerva default */
}

.plainlist ol li,
.plainlist ul li {
	margin-bottom: 0;
}

/* {{pp|small=yes}} */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}

.navbar-collapse {
	float: left;
	text-align: left;
}

.navbar-boxtext {
	word-spacing: 0;
}

.navbar ul {
	display: inline-block;
	white-space: nowrap;
	line-height: inherit;
}

.navbar-brackets::before {
	margin-right: -0.125em;
	content: '[ ';
}

.navbar-brackets::after {
	margin-left: -0.125em;
	content: ' ]';
}

.navbar li {
	word-spacing: -0.125em;
}

.navbar a > span,
.navbar a > abbr {
	text-decoration: inherit;
}

.navbar-mini abbr {
	font-variant: small-caps;
	border-bottom: none;
	text-decoration: none;
	cursor: inherit;
}

.navbar-ct-full {
	font-size: 114%;
	margin: 0 7em;
}

.navbar-ct-mini {
	font-size: 114%;
	margin: 0 4em;
}

.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox-table th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox-table td {
    vertical-align: top;
}