MediaWiki:Common.css: Difference between revisions

Revision as of 07:28, 28 October 2025

/* === 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;
}