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.

/* CSS placed here will be applied to all skins */
@media (max-width: 768px) {
  .infobox {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
  }
}
/* --- 0) DIAGNOSTIC: leave for a moment to verify CSS loads --- */
.infobox { outline: 6px solid red !important; }

/* --- 1) Light theme (base) --- */
.infobox {
  background: #fff;
  color: #202122;
  border: 1px solid #a2a9b1;
  border-collapse: collapse;
  float: right;
  clear: right;
  margin-left: 1em;
  margin-bottom: 1em;
  width: 300px;
}
.infobox th,
.infobox td {
  border-bottom: 1px solid #a2a9b1;
  padding: 6px 5px;
  vertical-align: top;
}
.infobox .ibox-title {
  background: #f6f7f8;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #a2a9b1;
  padding: 8px 10px;
}
.infobox .ibox-image {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #a2a9b1;
}
.infobox .ibox-rowhead {
  background: #f8f9fa;
  text-align: left;
  white-space: nowrap;
}

/* --- 2) Poncho dark: <body class="poncho-dark-mode"> --- */
body.poncho-dark-mode .infobox {
  background: #1c252e;
  color: #e6e6e6;
  border: 1px solid #6b7785;
}
body.poncho-dark-mode .infobox th,
body.poncho-dark-mode .infobox td { border-bottom: 1px solid #6b7785; }
body.poncho-dark-mode .infobox .ibox-title {
  background: #353f47; border-bottom: 1px solid #6b7785;
}
body.poncho-dark-mode .infobox .ibox-image { border-bottom: 1px solid #6b7785; }
body.poncho-dark-mode .infobox .ibox-rowhead { background: #262f39; }

/* --- 3) Citizen dark: <html class="skin-citizen-dark"> --- */
html.skin-citizen-dark .infobox {
  background: #1c252e;
  color: #e6e6e6;
  border: 1px solid #6b7785;
}
html.skin-citizen-dark .infobox th,
html.skin-citizen-dark .infobox td { border-bottom: 1px solid #6b7785; }
html.skin-citizen-dark .infobox .ibox-title {
  background: #353f47; border-bottom: 1px solid #6b7785;
}
html.skin-citizen-dark .infobox .ibox-image { border-bottom: 1px solid #6b7785; }
html.skin-citizen-dark .infobox .ibox-rowhead { background: #262f39; }

/* --- 4) Optional explicit light reset when Citizen toggles --- */
html.skin-citizen-light .infobox {
  background: #fff; color: #202122; border: 1px solid #a2a9b1;
}
html.skin-citizen-light .infobox th,
html.skin-citizen-light .infobox td { border-bottom: 1px solid #a2a9b1; }
html.skin-citizen-light .infobox .ibox-title {
  background: #f6f7f8; border-bottom: 1px solid #a2a9b1;
}
html.skin-citizen-light .infobox .ibox-image { border-bottom: 1px solid #a2a9b1; }
html.skin-citizen-light .infobox .ibox-rowhead { background: #f8f9fa; }