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

/* Settlement infobox (light) */
table.infobox.infobox-settlement{
  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;
  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-section{
  text-align:center; background:#eaecf0; color:#202122; font-weight:700;
  padding:.3em .5em;
}
.infobox.infobox-settlement th{ text-align:left; width:38%; padding:.35em .5em; }
.infobox.infobox-settlement td{ padding:.35em .5em; }

/* Dark mode (Vector night or DarkMode extension) */
.skin-theme-clientpref-night table.infobox.infobox-settlement,
.client-darkmode table.infobox.infobox-settlement{
  background:#1f2937; border-color:#374151; color:#e5e7eb;
}
.skin-theme-clientpref-night .infobox-section,
.client-darkmode .infobox-section{
  background:#111827; color:#f9fafb;
}
.skin-theme-clientpref-night .infobox.infobox-settlement th,
.client-darkmode .infobox.infobox-settlement th{
  color:#cbd5e1;
}
.skin-theme-clientpref-night .infobox.infobox-settlement td,
.client-darkmode .infobox.infobox-settlement td{
  color:#e5e7eb;
}
.skin-theme-clientpref-night .infobox-image,
.client-darkmode .infobox-image{
  background:transparent;
}

/* show only the square icon in Vector 2022 */
.mw-logo-wordmark,
.mw-logo-tagline { display: none !important; }

/* size the icon neatly */
.mw-logo-icon img { width: 180px; height: 180px; }

.skin-vector-2022 .mw-logo-icon { width: 180px; height: 180px; }


/* Nation infobox (light) */
table.infobox.infobox-nation{
  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; 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-section{ text-align:center; background:#eaecf0; color:#202122; font-weight:700; padding:.3em .5em; }
.infobox-sub{ text-align:center; background:#f1f2f3; color:#202122; font-weight:600; padding:.25em .5em; }
.infobox.infobox-nation th{ text-align:left; width:38%; padding:.35em .5em; }
.infobox.infobox-nation td{ padding:.35em .5em; }

/* Dark mode (Vector night or DarkMode) */
.skin-theme-clientpref-night table.infobox.infobox-nation,
.client-darkmode table.infobox.infobox-nation{ background:#1f2937; border-color:#374151; color:#e5e7eb; }
.skin-theme-clientpref-night .infobox-title,
.client-darkmode .infobox-title{ background:#111827; color:#f9fafb; }
.skin-theme-clientpref-night .infobox-section,
.client-darkmode .infobox-section,
.skin-theme-clientpref-night .infobox-sub,
.client-darkmode .infobox-sub{ background:#111827; color:#f9fafb; }
.skin-theme-clientpref-night .infobox-image,
.client-darkmode .infobox-image{ background:transparent; }
.skin-theme-clientpref-night .infobox.infobox-nation th,
.client-darkmode .infobox.infobox-nation th{ color:#cbd5e1; }
.skin-theme-clientpref-night .infobox.infobox-nation td,
.client-darkmode .infobox.infobox-nation td{ color:#e5e7eb; }