Template:Cdx-message/sandbox/styles.css

/* Styling to be applied to NON-mobile screens only. i.e. desktops. */
@media only screen and (min-width: 639px) {

	/* Right float. */
	.tpl-note--style-right {
		float: right;
		clear: right;
		margin-left: 1em;
		min-width: 256px;
	}

	.tpl-note--style-mbox {
		margin: 4px 10%;
	}

	.tpl-note--style-width-auto {
		min-width: 256px;
		width: fit-content;
	}
}

.tpl-note-notice-loud-style {
	border-color: #202122;
	background-color: var(--background-color-notice-subtle, #eaecf0);
}

.tpl-note-notice-loud-style.cdx-message__icon {
	background-color: #202122;
}

.tpl-note-info-style,
.tpl-note-help-style {
	border-color: #6485d1;
	background-color: var(--background-color-progressive-subtle, #f1f4fd);
}

.tpl-note-info-style.cdx-message__icon,
.tpl-note-help-style.cdx-message__icon {
	background-color: #6485d1;
}

.tpl-note-flag-style,
.tpl-note-move-style {
	border-color: #6a60b0;
	background-color: var(--purple50, #f0ecf6);
}

.tpl-note-flag-style.cdx-message__icon,
.tpl-note-move-style.cdx-message__icon {
	background-color: #6a60b0;
}

.tpl-note-reminder-style,
.tpl-note-content-style {
	border-color: #fc3;
	background-color: #fff9ea;
}

.tpl-note-reminder-style.cdx-message__icon,
.tpl-note-content-style.cdx-message__icon {
	background-color: #fc3;
}

.tpl-note-caution-style {
	border-color: #f60;
	background-color: #fed;
}

.tpl-note-caution-style.cdx-message__icon {
	background-color: #f60;
}

.tpl-note-notice-loud {
	mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Codex_icon_notice_color-notice.svg/60px-Codex_icon_notice_color-notice.svg.png');
}

.tpl-note-notice /* .cdx-message__icon */
{
	/* Codex Notice */

	/* background-color-notice-subtle [[File:Codex_icon_infoFilled_color-placeholder.svg]] */
	mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Codex_icon_infoFilled_color-placeholder.svg/60px-Codex_icon_infoFilled_color-placeholder.svg.png');

	/* @border-color-notice */
}

.tpl-note-info /* .cdx-message__icon */
{

	/* background-color-progressive-subtle [[File:Codex icon infoFilled blue500.svg]] */
	mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Codex_icon_InfoFilled_blue.svg/60px-Codex_icon_InfoFilled_blue.svg.png');

}

.tpl-note-success /* .cdx-message__icon */
{
	/* Codex Success */

	/* background-color-success-subtle [[File:Codex icon Success green.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Codex_icon_Success_green.svg/60px-Codex_icon_Success_green.svg.png);

}

.tpl-note-reminder /* .cdx-message__icon */
{

	/* Half of half the hex of yellow50 [[File:Icon lightbulb yellow.svg]] */
	mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Icon_lightbulb_yellow.svg/40px-Icon_lightbulb_yellow.svg.png');

	/*#ffdf80; /* Half the hex of warn & content */
}

.tpl-note-warning /* .cdx-message__icon */
{
	/* Codex Warning */

	/* background-color-warning-subtle [[File:Codex icon alert yellow300.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Codex_icon_alert_color-warning.svg/60px-Codex_icon_alert_color-warning.svg.png);

}

.tpl-note-warn /* .cdx-message__icon */
{

	/* Half the hex of yellow50 [[File:Codex icon alert yellow300.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Codex_icon_alert_yellow300.svg/60px-Codex_icon_alert_yellow300.svg.png);
}

.tpl-note-error /* .cdx-message__icon */
{
	/* Codex Error */

	/* background-color-error-subtle [[File:Codex icon error red500.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Codex_icon_error_red500.svg/60px-Codex_icon_error_red500.svg.png);
}

.tpl-note-caution /* .cdx-message__icon */
{

	/* #ffead4; /* orange50 [[File:Codex icon notice orange400.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Codex_icon_Notice_orange.svg/60px-Codex_icon_Notice_orange.svg.png);
	/* #d46926; */
	/*#FF5C00;  /* orange500 - CHANGED TO CUSTOM. */
}

.tpl-note-flag /* .cdx-message__icon */
{

	/* purple50 [[File:Codex icon flag purple.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Codex_icon_flag_purple.svg/60px-Codex_icon_flag_purple.svg.png);
	/* purple700 */
}

.tpl-note-move /* .cdx-message__icon */
{
	/* Move */

	/* background-color-neutral-subtle [[File:Merge-split-transwiki default.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6f/Merge-split-transwiki_new2.svg);
	/* purple700 */
}

.tpl-note-delete /* .cdx-message__icon */
{
	/* Delete */

	/* background-color-error-subtle [[File:Codex icon alert red500.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Codex_icon_alert_red500.svg/60px-Codex_icon_alert_red500.svg.png);
}

.tpl-note-speedy /* .cdx-message__icon */
{
	/* Speedy */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Codex_icon_clear_red500.svg/60px-Codex_icon_clear_red500.svg.png);
}

.tpl-note-content /* .cdx-message__icon */
{
	/* Content */
	/* Half the hex of yellow50 [[File:OOjs UI icon broom.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/OOjs_UI_icon_broom.svg/40px-OOjs_UI_icon_broom.svg.png);
}

.tpl-note-announcement /* .cdx-message__icon */
{
	/* Announcement */
	/* background-color-neutral-subtle [[File:Codex icon feedback blue.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Codex_icon_feedback_blue.svg/60px-Codex_icon_feedback_blue.svg.png);
	/* border-color-progressive */
}

.tpl-note-help /* .cdx-message__icon */
{
	/* Help */
	/* background-color-progressive-subtle [[File:Codex icon help notice-blue.svg]] */
	mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Codex_icon_help_notice-blue.svg/60px-Codex_icon_help_notice-blue.svg.png);
	/* border-color-progressive */
}

.cdx-message--inline {
	background: transparent;
}