Template:Hint/styles.css

.hint {
	background-position: left 7px top 50%;
	padding: 0.5em;
	padding-left: 40px;
	margin: 0.5em 0;
	overflow: hidden;
	background-color: #f8f9fa;
	background-repeat: no-repeat;
	border: 1px solid #ddd;
}

.hint pre,
.hint .mw-code {
	border:0;
}

.hint-block {
	background-position: left 7px top 1.3em;
}

.hint-inline {
	display: inline-block;
	vertical-align: middle;
}

.hint-question,
.hint-algorithm,
.hint-example,
.hint-info,
.hint-history {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/10/OOjs_UI_icon_help-ltr-progressive.svg);
	background-size: 25px;
	padding-left: 40px;
	min-height: 28px;
}

.hint-algorithm {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f6/OOjs_UI_icon_math-progressive.svg);
}

.hint-example {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/2a/OOjs_UI_icon_code-progressive.svg);
}

.hint-info,
.hint-history {
	background-color: #f6efe5;
	/* [[File:OOjs_UI_icon_reference_20_ac6600.svg]] */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/OOjs_UI_icon_reference_20_ac6600.svg);
	border-color: #ac6600;
}

.hint-reminder,
.hint-warn,
.hint-caution,
.hint-error {
	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);
	background-size: 25px;
	border-color: #fc3;
	min-height: 28px;
}

.hint-warn,
.hint-caution {
	/* [[File:OOjs_UI_icon_alert-warning.svg]] */
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
}

.hint-caution {
	background-color: #f8f9fa;
	border-color: #ddd;
}

.hint-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: #c33;
}