Module:Infobox/styles.css

/* Character Infobox Styles */
.character-infobox {
  float: right;
  padding: 0 20px 20px 20px;
}

/* Infobox table */
.character-infobox .infobox {
  width: 270px;
  font-size: 90%;
  text-align: left;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-collapse: collapse;
}

/* Infobox title (caption) */
.character-infobox .infobox > caption {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
  background-color: #ff3399;
  color: white;
  padding: 8px;
}

/* Centered image row */
.character-infobox .infobox td.image-cell {
  text-align: center;
  background-color: #eee;
}

/* Table headers */
.character-infobox .infobox th {
  background-color: #f2f2f2;
  color: #333;
  padding: 6px;
  text-align: left;
  vertical-align: top;
}

/* Table data cells */
.character-infobox .infobox td {
  padding: 6px;
  vertical-align: top;
}

/* Section header row */
.character-infobox .infobox tr.section-header th,
.character-infobox .infobox tr.section-header td {
  background-color: #ff3399;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 6px;
}

/* Subsection header row */
.character-infobox .infobox tr.subsection-header th,
.character-infobox .infobox tr.subsection-header td {
  background-color: #ff3399;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 6px;
}

/* Icon and signature image cells */
.character-infobox .infobox td.icon-cell,
.character-infobox .infobox td.signature-cell {
  text-align: center;
  padding: 6px;
}

/* Optional dark mode overrides */
@media screen {
  html.skin-theme-clientpref-night .character-infobox .infobox td:not(.notheme),
  html.skin-theme-clientpref-night .character-infobox .infobox th:not(.notheme) {
    background: #1f1f23 !important;
    color: #f8f9fa;
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .character-infobox .infobox td:not(.notheme),
  html.skin-theme-clientpref-os .character-infobox .infobox th:not(.notheme) {
    background: #1f1f23 !important;
    color: #f8f9fa;
  }
}