Jump to content

MediaWiki:Common.css

From Encyclopædia Mundus
Revision as of 07:23, 30 October 2025 by Lukile (talk | contribs)

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

/* Province infobox */
table.infobox.infobox-province{
  border:1px solid #a2a9b1; background:#f8f9fa;
  width:300px; float:right; margin:0 0 1em 1em; font-size:90%;
}
.infobox.infobox-province th{ text-align:left; width:38%; padding:.35em .5em; }
.infobox.infobox-province td{ padding:.35em .5em; }

/* Dark mode */
.skin-theme-clientpref-night table.infobox.infobox-province,
.client-darkmode table.infobox.infobox-province{ background:#1f2937; border-color:#374151; color:#e5e7eb; }
.skin-theme-clientpref-night .infobox.infobox-province th,
.client-darkmode .infobox.infobox-province th{ color:#cbd5e1; }
.skin-theme-clientpref-night .infobox.infobox-province td,
.client-darkmode .infobox.infobox-province td{ color:#e5e7eb; }



/* Saints & Gods infobox */
table.infobox.infobox-saints{
  border:1px solid #a2a9b1; background:#f8f9fa;
  width:300px; float:right; margin:0 0 1em 1em; font-size:90%;
}
.infobox.infobox-saints th{ text-align:left; width:38%; padding:.35em .5em; }
.infobox.infobox-saints td{ padding:.35em .5em; }

/* Dark mode */
.skin-theme-clientpref-night table.infobox.infobox-saints,
.client-darkmode table.infobox.infobox-saints{ background:#1f2937; border-color:#374151; color:#e5e7eb; }
.skin-theme-clientpref-night .infobox.infobox-saints th,
.client-darkmode .infobox.infobox-saints th{ color:#cbd5e1; }
.skin-theme-clientpref-night .infobox.infobox-saints td,
.client-darkmode .infobox.infobox-saints td{ color:#e5e7eb; }


/* Organization infobox */
table.infobox.infobox-organization{
  border:1px solid #a2a9b1; background:#f8f9fa;
  width:300px; float:right; margin:0 0 1em 1em; font-size:90%;
}
.infobox.infobox-organization th{ text-align:left; width:38%; padding:.35em .5em; }
.infobox.infobox-organization td{ padding:.35em .5em; }

/* Dark mode */
.skin-theme-clientpref-night table.infobox.infobox-organization,
.client-darkmode table.infobox.infobox-organization{ background:#1f2937; border-color:#374151; color:#e5e7eb; }
.skin-theme-clientpref-night .infobox.infobox-organization th,
.client-darkmode .infobox.infobox-organization th{ color:#cbd5e1; }
.skin-theme-clientpref-night .infobox.infobox-organization td,
.client-darkmode .infobox.infobox-organization td{ color:#e5e7eb; }



/* Image banner with NO surrounding box */
.home-banner-wrap { margin: 0 0 1rem 0; padding: 0; background: transparent; border: 0; }
.home-banner-wrap .home-banner .mw-file-element {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.skin-theme-clientpref-night .home-banner-wrap .home-banner .mw-file-element,
.client-darkmode .home-banner-wrap .home-banner .mw-file-element {
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
}


/* ——— Home layout ——— */

.home-hero h1 { margin: 0 0 .2rem 0; font-size: 1.8rem; }
.home-actions .btn {
  display:inline-block; padding:.45rem .8rem; margin:.35rem .35rem .0 0;
  border:1px solid #a2a9b1; background:#fff; border-radius:6px; text-decoration:none;
}
.home-actions .btn-ghost { background:transparent; }
.home-grid { display:grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px){ .home-grid { grid-template-columns: 2fr 1fr; } }
.home-h2 { margin:.2rem 0 .4rem 0; font-size:1.2rem; }




/* ——— Cards ——— */
.card-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.card {
  background:#fff; border:1px solid #a2a9b1; border-radius:8px; padding:.6rem .75rem;
}
.card-title { font-weight:700; margin:0 0 .15rem 0; }
.card-meta { font-size:.85em; color:#54595d; }

/* ——— Side panel ——— */
.panel { background:#fff; border:1px solid #a2a9b1; border-radius:8px; padding:.7rem .8rem; }
.hub-links { margin:.4rem 0 0 0; padding-left:1.2rem; }

/* ——— Dark mode overrides (Vector night or DarkMode extension) ——— */
.skin-theme-clientpref-night .home-hero,
.client-darkmode .home-hero { background:#1f2937; border-color:#374151; }
.skin-theme-clientpref-night .card,
.client-darkmode .card,
.skin-theme-clientpref-night .panel,
.client-darkmode .panel { background:#111827; border-color:#374151; }
.skin-theme-clientpref-night .card-title,
.client-darkmode .card-title { color:#f3f4f6; }
.skin-theme-clientpref-night .card-meta,
.client-darkmode .card-meta { color:#9ca3af; }
.skin-theme-clientpref-night .home-actions .btn,
.client-darkmode .home-actions .btn {
  background:#111827; color:#f3f4f6; border-color:#374151;
}
Retrieved from "https://mundus.speakersxiv.com/index.php?title=MediaWiki:Common.css&oldid=355"