Template:Help box/styles.css

.helpbox {
	float: right; /* this *should* be flipped */
	max-width: 250px;
	margin: .4em;
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
}
.helpbox-header {
	text-align: center;
	font-size: 120%;
	border-bottom: 1px solid #a2a9b1;
	padding: .35em;
	background-color: #fee7e6;
	font-weight: bold;
}
.helpbox-title {
	vertical-align: sub;
}
.helpbox[dir="ltr"] .helpbox-title {
	/* @noflip */
	margin-left: 1.2em;
}
.helpbox[dir="rtl"] .helpbox-title {
	/* @noflip */
	margin-right: 1.2em;
}
.helpbox-content {
	padding: 0 .4em .24em;
	font-size: 95%;
}
.helpbox-footnote {
	font-style: italic;
}
.helpbox[dir="ltr"] .helpbox-footnote {
	/* @noflip */
	margin-left: 1.6em;
}
.helpbox[dir="rtl"] .helpbox-footnote {
	/* @noflip */
	margin-right: 1.6em;
}

/* forced night mode */
html.skin-theme-clientpref-night .helpbox-header,
html.skin-theme-clientpref-night .helpbox {
    color: inherit;
    background: transparent;
}

html.skin-theme-clientpref-night .helpbox-header img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .helpbox-header,
    html.skin-theme-clientpref-os .helpbox {
        color: inherit;
        background: transparent;
    }

    html.skin-theme-clientpref-os .helpbox-header img {
      filter: invert(1);
    }
}