MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* === Infobox (light theme defaults) === */
table.infobox.infobox-character{
  border:1px solid #a2a9b1;
  background:#f8f9fa;
  width:300px; float:right; margin:0 0 1em 1em; font-size:90%;
}
.infobox-title{
  text-align:center; background:#eaf3ff; color:#202122;  /* force dark text in light mode */
  font-weight:700; font-size:120%; padding:.4em .6em;
}
.infobox-image{ text-align:center; background:#fff; }
.infobox-caption{ font-size:85%; color:#54595d; margin-top:.25em; }
.infobox.infobox-character th{ text-align:left; width:38%; padding:.35em .5em; }
.infobox.infobox-character td{ padding:.35em .5em; }

/* === Dark mode overrides ===
   Works for BOTH Vector Night Mode and the DarkMode extension. */
.skin-theme-clientpref-night table.infobox.infobox-character,
.client-darkmode table.infobox.infobox-character{
  background:#1f2937;           /* slate-800 */
  border-color:#374151;          /* slate-700 */
  color:#e5e7eb;                 /* slate-200 */
}
.skin-theme-clientpref-night .infobox-title,
.client-darkmode .infobox-title{
  background:#111827;            /* slate-900 */
  color:#f9fafb;                 /* white-ish */
}
.skin-theme-clientpref-night .infobox.infobox-character th,
.client-darkmode .infobox.infobox-character th{
  color:#cbd5e1;                 /* slate-300 labels */
}
.skin-theme-clientpref-night .infobox.infobox-character td,
.client-darkmode .infobox.infobox-character td{
  color:#e5e7eb;                 /* slate-200 values */
}
.skin-theme-clientpref-night .infobox-image,
.client-darkmode .infobox-image{
  background:transparent;
}
.skin-theme-clientpref-night .infobox-caption,
.client-darkmode .infobox-caption{
  color:#9ca3af;                 /* slate-400 caption */
}

/* If you use the DarkMode extension’s invert filter,
   keep images/logos from double-inverting */
.client-darkmode .mw-wiki-logo{ filter: invert(1) hue-rotate(180deg); }