Template:Quote box test

.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);
   }

}