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 */
@media screen {
	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 screen and (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);
    }
}