MediaWiki:Common.css: Difference between revisions

Latest revision as of 06:05, 17 December 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;
}



/* 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: 200px; height: 200px; }

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



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




/* Kill any box/border around the image banner */
.mw-parser-output .home-banner-wrap{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
  box-shadow: none !important;
}

/* Banner image itself */
.mw-parser-output .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);
}
.client-darkmode .mw-parser-output .home-banner-wrap .home-banner .mw-file-element,
.skin-theme-clientpref-night .mw-parser-output .home-banner-wrap .home-banner .mw-file-element{
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
}





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







/* Infobox: Royalty */
.mw-parser-output .infobox.infobox-royalty {
  float: right;
  clear: right;
  width: 300px;
  margin: 0 0 1em 1em;
  border: 1px solid #a2a9b1;
  background: #fff;
  font-size: 88%;
  line-height: 1.4;
  border-collapse: collapse;
}

.mw-parser-output .infobox.infobox-royalty th,
.mw-parser-output .infobox.infobox-royalty td {
  padding: 0.35em 0.5em;
  vertical-align: top;
}

.mw-parser-output .infobox.infobox-royalty .infobox-title {
  background: #f4b6c6; /* cherry blossom pink */
  color: #000;
  text-align: center;
  font-weight: 700;
  font-size: 125%;
  padding: 0.5em 0.6em;
}

.mw-parser-output .infobox.infobox-royalty th[scope="row"] {
  width: 35%;
  text-align: left;
  font-weight: 700;
  background: #f8f9fa;
}

.mw-parser-output .infobox.infobox-royalty tr + tr th,
.mw-parser-output .infobox.infobox-royalty tr + tr td {
  border-top: 1px solid #eaecf0;
}

/* Image rows */
.mw-parser-output .infobox.infobox-royalty .infobox-image {
  text-align: center;
  background: transparent;
}

.mw-parser-output .infobox.infobox-royalty .infobox-image img {
  height: auto;
  max-width: 100%;
}

.mw-parser-output .infobox.infobox-royalty .infobox-caption {
  margin-top: 0.35em;
  font-size: 90%;
  color: #54595d;
}

/* Optional: tighten spacing for dense pages */
.mw-parser-output .infobox.infobox-royalty br {
  line-height: 1.2;
}

/* Optional: basic dark-mode tuning (if your skin honors prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  .mw-parser-output .infobox.infobox-royalty {
    background: #1f2328;
    border-color: #3a3f45;
  }
  .mw-parser-output .infobox.infobox-royalty .infobox-title {
    background: #8b2f4a;
    color: #fff;
  }
  .mw-parser-output .infobox.infobox-royalty th[scope="row"] {
    background: #2a2f36;
  }
  .mw-parser-output .infobox.infobox-royalty tr + tr th,
  .mw-parser-output .infobox.infobox-royalty tr + tr td {
    border-top-color: #3a3f45;
  }
  .mw-parser-output .infobox.infobox-royalty .infobox-caption {
    color: #c8ccd1;
  }
}








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