styles.css

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

.note {
	box-sizing: border-box;
	margin: 0.8em 0;
	padding: 0.85em 1.1em 0.85em 3.2em;
	min-height: 2.9em;
	overflow: hidden;
	color: #202122;
	background-color: #f6f7f9;
	background-repeat: no-repeat;
	background-position: left 1em top 0.95em;
	background-size: 1.35em;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 10px;
	box-shadow: inset 3px 0 0 #a2a9b1;
	line-height: 1.55;
}

.note-inline {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.15em;
	padding: 0.25em 0.8em 0.25em 2.6em;
	min-height: 0;
	background-position: left 0.7em center;
	background-size: 1.15em;
	line-height: 1.45;
}

/* Pill: compact rounded badge, no accent bar (inline=pill) */
.note.note-pill {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.15em;
	padding: 0.05em 0.75em 0.05em 2.1em;
	min-height: 0;
	background-position: left 0.55em center;
	background-size: 1.05em;
	border-radius: 999px;
	box-shadow: none;
	line-height: 1.5;
}

.note-info {
	background-color: #f1f6ff;
	/* [[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: #d6e4fb;
	box-shadow: inset 3px 0 0 #36c;
}

.note-reminder {
	background-color: #fffbeb;
	/* [[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: #f6e6a8;
	box-shadow: inset 3px 0 0 #fc3;
}

.note-warn {
	background-color: #fff6e9;
	/* [[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: #f8dcb4;
	box-shadow: inset 3px 0 0 #f90;
}

.note-error {
	background-color: #fff1f0;
	/* [[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: #f7cbc8;
	box-shadow: inset 3px 0 0 #d33;
}

/* Dark mode */
.skin-theme-clientpref-night .note {
	color: #eaecf0;
	background-color: #1f2328;
	border-color: rgba( 255, 255, 255, 0.1 );
}
.skin-theme-clientpref-night .note-info { background-color: #182236; border-color: #2a3d63; box-shadow: inset 3px 0 0 #6b9bf5; }
.skin-theme-clientpref-night .note-reminder { background-color: #2a2610; border-color: #4f4619; box-shadow: inset 3px 0 0 #fc3; }
.skin-theme-clientpref-night .note-warn { background-color: #302010; border-color: #593c1c; box-shadow: inset 3px 0 0 #f90; }
.skin-theme-clientpref-night .note-error { background-color: #331a1a; border-color: #5a2b2b; box-shadow: inset 3px 0 0 #f26b6b; }
.skin-theme-clientpref-night .note.note-pill { box-shadow: none; }