Module:Message box/fmbox.css

/* {{pp|small=y}} */
.fmbox {
	clear: both; /* this sheet does not require overflow-x because of this clear */
	margin: 0.2em 0;
	border: 1px solid #a2a9b1;
    background-color: var(--background-color-interactive-subtle, #f8f9fa);
    box-sizing: border-box;
    color: var(--color-base, #202122);
}

.fmbox-warning {
	border: 1px solid #bb7070;  /* Dark pink */
	background-color: #ffdbdb;  /* Pink */
}

.fmbox-editnotice {
	background-color: transparent;
}

.fmbox .mbox-text {
	padding: 0.35em 1em;
	flex: 1 1 100%;
}

.fmbox .mbox-image,
.fmbox .mbox-imageright {
	padding: 4px 2px;
	text-align: center;
	flex: none;
}

/* keep synced with each other type of message box as this isn't qualified */
.mbox-invalid-type {
	text-align: center;
}

@media (min-width: 480px) {
	.fmbox {
		display: flex;
		align-items: center;
	}

	.fmbox .mbox-image {
		/* @noflip */
		padding-left: 1em;
	}
	
	.fmbox .mbox-imageright {
		/* @noflip */
		padding-right: 1em;
	}
}

@media screen {
    html.skin-theme-clientpref-night .fmbox-warning {
		background-color: #300;    /* Reddish, same hue/saturation as light */
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .fmbox-warning {
		background-color: #300; /* Reddish, same hue/saturation as light */
	}
}