Jump to content

MediaWiki:Common.css

From Yusupov's House
Revision as of 16:31, 2 October 2025 by Mvuijlst (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.
/* Prevent Chrome auto-boost weirdness */
html { -webkit-text-size-adjust: 100%; }

/* Gentle type scale on phones */
@media (max-width: 768px) {
  html.skin-vector { font-size: 112.5%; }  /* 16px -> ~18px */
}
@media (max-width: 480px) {
  html.skin-vector { font-size: 118.75%; } /* ~19px */
}



/* ===== Infobox base (light theme default) ===== */
table.infobox{
  width:22em; max-width:22em; box-sizing:border-box;
  float:right; clear:right; margin:0 0 1em 1em;
  border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
  font-size:90%; line-height:1.5em;
  /* use 'separate' so table padding works like enwiki */
  border-collapse:separate; border-spacing:0; padding:.5em;
}

table.infobox th, table.infobox td{
  padding:.5em .45em;          /* enwiki-ish cell padding */
  vertical-align:top;
}
table.infobox th{ text-align:left; }

/* Title — no background by default; 125% and centered */
table.infobox th.infobox-title{
  text-align:center;
  font-size:125%;
  font-weight:bold;
  background:transparent;      /* default: none */
  padding:.35em .45em .3em;
}

/* Only apply color when |color= was set (module adds class + CSS var) */
table.infobox th.infobox-title.has-title-color{
  background:var(--ib-title-bg);
}

/* Image row: remove padding so image can touch the inner edges; make image 100% */
table.infobox td.infobox-image-cell{
  padding:0;
}
table.infobox td.infobox-image-cell img{
  display:block; width:100%; height:auto;
}

/* Prevent long strings from breaking layout */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }

/* ===== Dark theme (skin toggle) ===== */
html.skin-theme-clientpref-night table.infobox{
  background:#202124; border-color:#5f6368; color:#e8eaed;
}
html.skin-theme-clientpref-night table.infobox th.infobox-title{
  /* ignore |color= in dark mode */
  background:transparent; color:#e8eaed;
}
html.skin-theme-clientpref-night table.infobox a{ color:#8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited{ color:#c58af9; }

/* Dark mode – improve label/value contrast in infobox (safe, local change) */
html.skin-theme-clientpref-night table.infobox th { background: #2a2e33; }  /* label cells */
html.skin-theme-clientpref-night table.infobox td { background: transparent; } /* value cells */
html.skin-theme-clientpref-night table.infobox { border-color: #3c4043; }     /* subtle border */
html.skin-theme-clientpref-night table.infobox th { font-weight: 600; }