Module:Message box/ambox.css: Difference between revisions

From Wings of Fire: The New World Wiki
hack around mf being opinionated
 
Line 1: Line 1:
/* {{pp|small=y}} */
/**
.ambox {
* {{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;
border: 1px solid #a2a9b1;
/* @noflip */
/* Default "notice" blue */
border-left: 10px solid #36c; /* Default "notice" blue */
border-left: 10px solid #36c;
background-color: #fbfbfb;
background-color: #fbfbfb;
box-sizing: border-box;
box-sizing: border-box;
}
}


/* Single border between stacked boxes. Take into account base templatestyles,
/* Single border between stacked boxes. */
* user styles, and Template:Dated maintenance category.
table.ambox + table.ambox,
* remove link selector when T200206 is fixed
table.ambox + link + table.ambox,
*/
table.ambox + style + table.ambox {
.ambox + link + .ambox,
.ambox + link + style + .ambox,
.ambox + link + link + .ambox,
/* TODO: raise these as "is this really that necessary???". the change was Dec 2021 */
.ambox + .mw-empty-elt + link + .ambox,
.ambox + .mw-empty-elt + link + style + .ambox,
.ambox + .mw-empty-elt + link + link + .ambox {
margin-top: -1px;
margin-top: -1px;
}
}


/* For the "small=left" option. */
/* An empty narrow cell */
/* must override .ambox + .ambox styles above */
.ambox td.mbox-empty-cell {
html body.mediawiki .ambox.mbox-small-left {
border: none;
/* @noflip */
padding: 0;
margin: 4px 1em 4px 0;
width: 1px;
overflow: hidden;
width: 238px;
border-collapse: collapse;
font-size: 88%;
line-height: 1.25em;
}
}


.ambox-speedy {
/* The message body cell(s) */
/* @noflip */
.ambox th.mbox-text,
border-left: 10px solid #b32424;   /* Red */
.ambox td.mbox-text {
background-color: #fee7e6;         /* Pink */
border: none;
/* 0.5em left/right */
padding: 0.25em 0.5em;
/* Make all mboxes the same width regardless of text length */
width: 100%;
}
}


.ambox-delete {
/* The left image cell */
.ambox td.mbox-image {
/* 0.5em left, 0px right */
/* @noflip */
/* @noflip */
border-left: 10px solid #b32424;   /* Red */
padding: 2px 0 2px 0.5em;
}
}


.ambox-content {
/* The right image cell */
.ambox td.mbox-imageright {
/* 0px left, 0.5em right */
/* @noflip */
/* @noflip */
border-left: 10px solid #f28500;   /* Orange */
padding: 2px 0.5em 2px 0;
}
}


.ambox-style {
table.ambox-notice {
/* @noflip */
/* Blue */
border-left: 10px solid #fc3;       /* Yellow */
border-left-color: #36c;
}
}


.ambox-move {
table.ambox-speedy {
/* @noflip */
/* Pink */
border-left: 10px solid #9932cc;   /* Purple */
background-color: #fee7e6;
}
}


.ambox-protection {
table.ambox-delete,
/* @noflip */
table.ambox-speedy {
border-left: 10px solid #a2a9b1;   /* Gray-gold */
/* Red */
border-left-color: #b32424;
}
}


.ambox .mbox-text {
table.ambox-content {
border: none;
/* Orange */
/* @noflip */
border-left-color: #f28500;
padding: 0.25em 0.5em;
width: 100%;
}
}


.ambox .mbox-image {
table.ambox-style {
border: none;
/* Yellow */
/* @noflip */
border-left-color: #fc3;
padding: 2px 0 2px 0.5em;
text-align: center;
}
}


.ambox .mbox-imageright {
table.ambox-move {
border: none;
/* Purple */
/* @noflip */
border-left-color: #9932cc;
padding: 2px 0.5em 2px 0;
text-align: center;
}
}


/* An empty narrow cell */
table.ambox-protection {
.ambox .mbox-empty-cell {
/* Gray-gold */
border: none;
border-left-color: #a2a9b1;
padding: 0;
width: 1px;
}
}


.ambox .mbox-image-div {
/**
width: 52px;
* {{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
*/


/* Hack around MobileFrontend being opinionated */
/* For the "small=yes" option. */
html.client-js body.skin-minerva .mbox-text-span {
html body.mediawiki .ambox.mbox-small {
margin-left: 23px !important;
clear: right;
float: right;
margin: 4px 0 4px 1em;
box-sizing: border-box;
width: 238px;
font-size: 88%;
line-height: 1.25em;
}
}


@media (min-width: 720px) {
/* For the "small=left" option. */
.ambox {
html body.mediawiki .ambox.mbox-small-left {
margin: 0 10%;                 /* 10% = Will not overlap with other elements */
margin: 4px 1em 4px 0;
}
box-sizing: border-box;
overflow: hidden;
width: 238px;
border-collapse: collapse;
font-size: 88%;
line-height: 1.25em;
}
}

Revision as of 00:43, 1 June 2024

/**
 * {{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;
}