Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

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

From Wings of Fire Wiki
Use more CSS variables
m 1 revision imported
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/**
/* {{pp|small=y}} */
* {{ambox}} (article message box) styles
.ambox {
*
border: 1px solid;
* @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-enwp-boxes.css
border-color: var(--border-color-base);
* @revision 2021-07-15
/* @noflip */
*/
border-left: 10px solid var(--color-progressive); /* Default "notice" blue */
table.ambox {
background-color: var(--color-surface-1);
/* 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 var(--border-color-base, #a2a9b1);
/* Default "notice" blue */
border-left: 10px solid var(--border-color-progressive, #36c);
background-color: var(--background-color-neutral-subtle, #f8f9fa);
box-sizing: border-box;
box-sizing: border-box;
}
}


/* Single border between stacked boxes. */
/* Single border between stacked boxes. Take into account base templatestyles,
table.ambox + table.ambox,
* user styles, and Template:Dated maintenance category.
table.ambox + link + table.ambox,
* remove link selector when T200206 is fixed
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;
}
}


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


/* The message body cell(s) */
.ambox-speedy {
.ambox th.mbox-text,
/* @noflip */
.ambox td.mbox-text {
border-left: 10px solid #b32424;   /* Red */
border: none;
background-color: #fee7e6;         /* Pink */
/* 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-delete {
.ambox td.mbox-image {
/* 0.5em left, 0px right */
/* @noflip */
/* @noflip */
padding: 2px 0 2px 0.5em;
border-left: 10px solid #b32424;   /* Red */
}
}


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


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


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


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


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


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


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


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


/**
.ambox .mbox-image-div {
* {{ambox|small=1}} styles
width: 52px;
*
}
* 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. */
@media (min-width: 720px) {
html body.mediawiki .ambox.mbox-small {
.ambox {
clear: right;
margin: 0 10%;                 /* 10% = Will not overlap with other elements */
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. */
@media print {
html body.mediawiki .ambox.mbox-small-left {
body.ns-0 .ambox {
margin: 4px 1em 4px 0;
display: none !important;
box-sizing: border-box;
}
overflow: hidden;
width: 238px;
border-collapse: collapse;
font-size: 88%;
line-height: 1.25em;
}
}

Latest revision as of 15:40, 15 December 2024

/* {{pp|small=y}} */
.ambox {
	border: 1px solid;
	border-color: var(--border-color-base);
	/* @noflip */
	border-left: 10px solid var(--color-progressive);  /* Default "notice" blue */
	background-color: var(--color-surface-1);
	box-sizing: border-box;
}

/* Single border between stacked boxes. Take into account base templatestyles,
 * user styles, and Template:Dated maintenance category.
 * remove link selector when T200206 is fixed
 */
.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;
}

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

.ambox-speedy {
	/* @noflip */
	border-left: 10px solid #b32424;    /* Red */
	background-color: #fee7e6;          /* Pink */
}

.ambox-delete {
	/* @noflip */
	border-left: 10px solid #b32424;    /* Red */
}

.ambox-content {
	/* @noflip */
	border-left: 10px solid #f28500;    /* Orange */
}

.ambox-style {
	/* @noflip */
	border-left: 10px solid #fc3;       /* Yellow */
}

.ambox-move {
	/* @noflip */
	border-left: 10px solid #9932cc;    /* Purple */
}

.ambox-protection {
	/* @noflip */
	border-left: 10px solid #a2a9b1;    /* Gray-gold */
}

.ambox .mbox-text {
	border: none;
	/* @noflip */
	padding: 0.25em 0.5em;
	width: 100%;
}

.ambox .mbox-image {
	border: none;
	/* @noflip */
	padding: 2px 0 2px 0.5em;
	text-align: center;
}

.ambox .mbox-imageright {
	border: none;
	/* @noflip */
	padding: 2px 0.5em 2px 0;
	text-align: center;
}

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

.ambox .mbox-image-div {
	width: 52px;
}

@media (min-width: 720px) {
	.ambox {
		margin: 0 10%;                  /* 10% = Will not overlap with other elements */
	}
}

@media print {
	body.ns-0 .ambox {
		display: none !important;
	}
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.