styles.css

/* Template:Note/styles.css  (content model: Sanitized CSS) */

.note {
	box-sizing: border-box;
	margin: 0.6em 0;
	padding: 0.7em 1em 0.7em 3em;
	overflow: hidden;
	min-height: 2.6em;
	color: #202122;
	background-color: #f8f9fa;
	background-repeat: no-repeat;
	background-position: left 0.8em top 0.75em;
	background-size: 1.4em;
	border: 1px solid #dddddd;
	border-left-width: 5px;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
	line-height: 1.5;
}

.note-inline {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.2em;
	padding: 0.1em 0.7em 0.1em 2.1em;
	min-height: 0;
	background-position: left 0.5em center;
	background-size: 1.1em;
	border-left-width: 3px;
	border-radius: 4px;
	box-shadow: none;
	line-height: 1.4;
}

.note-info {
	background-color: #eaf3ff;
	/* [[File:OOjs_UI_icon_information-progressive.svg]] */
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg );
	border-color: #a3caff;
	border-left-color: #36c;
}

.note-reminder {
	background-color: #fff9ea;
	/* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg );
	border-color: #ffe08a;
	border-left-color: #fc3;
}

.note-warn {
	background-color: #fff4e0;
	/* [[File:OOjs_UI_icon_alert-warning.svg]] */
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg );
	border-color: #ffd699;
	border-left-color: #f90;
}

.note-error {
	background-color: #fee7e6;
	/* [[File:OOjs_UI_icon_notice-destructive.svg]] */
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg );
	border-color: #f5b5b2;
	border-left-color: #d33;
}

/* Dark mode */
.skin-theme-clientpref-night .note {
	color: #eaecf0;
	background-color: #1f2328;
	border-color: #3a3f46;
}
.skin-theme-clientpref-night .note-info { background-color: #1a2536; border-color: #2f4468; border-left-color: #6b9bf5; }
.skin-theme-clientpref-night .note-reminder { background-color: #2f2a12; border-color: #574d1c; border-left-color: #fc3; }
.skin-theme-clientpref-night .note-warn { background-color: #33220f; border-color: #5e4120; border-left-color: #f90; }
.skin-theme-clientpref-night .note-error { background-color: #341b1b; border-color: #5e2d2d; border-left-color: #f26b6b; }