Module:Infobox/styles.css: Difference between revisions

Latest revision as of 06:28, 23 November 2024

/*
 * This TemplateStyles sheet deliberately does NOT include the full set of
 * infobox styles. We are still working to migrate all of the manual
 * infoboxes. See [[MediaWiki talk:Common.css/to do#Infobox]] for more info.
 * -------------------------------------------------------------------------
 * Not strictly certain these styles are necessary since the modules now
 * exclusively output infobox-subbox or infobox, not both; just replicating
 * the module faithfully.
 */

.infobox {
  border: 1px solid #a2a9b1;
  border-spacing: 3px;
  color: #000;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 0.2rem;
}

@media screen {
  .infobox {
    background-color: #f8f9fa;
  }
}

@media (max-width: 640px) {
  .infobox {
    width: 100%;
  }

  .infobox .nowrap {
    white-space: normal;
  }
}

@media (min-width: 640px) {
  .infobox {
    /* @noflip */
    clear: right;
    /* @noflip */
    float: right;
    /* @noflip */
    margin: 0.5rem 0 0.5rem 1rem;
    width: 22rem;
  }
}

.infobox-above,
.infobox-below,
.infobox-data,
.infobox-full-data,
.infobox-header,
.infobox-image,
.infobox-label,
.infobox-navbar,
.infobox-subheader,
/* Remove element selector when every .infobox thing is using the standard module/templates. */
.infobox th,
.infobox td {
  vertical-align: top;
}

.infobox-data,
.infobox-label,
/* Remove element selector when every .infobox thing is using the standard module/templates. */
.infobox th,
.infobox td {
  /* @noflip */
  text-align: left;
}

/* Remove .infobox when element selectors above are removed. */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates. */
.infobox caption {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates. */
.infobox caption {
  padding: 0.2rem;
}

/* Remove .infobox when element selectors above are removed. */
.infobox .infobox-below,
.infobox .infobox-full-data,
.infobox .infobox-header,
.infobox .infobox-image,
.infobox .infobox-subheader {
  text-align: center;
}

/* Remove .infobox when element selectors above are removed. */
.infobox .infobox-navbar {
  /* @noflip */
  text-align: right;
}

.infobox-subbox {
  background: transparent;
  border: none;
  clear: none;
  float: none;
  font-size: 1rem;
  margin: -3px;
  min-width: 100%;
  padding: 0;
  width: auto;
}

.infobox-3cols-child {
  margin: auto;
}

.infobox .navbar {
  font-size: 1rem;
}

body.skin-minerva .infobox-above,
body.skin-minerva .infobox-below,
body.skin-minerva .infobox-full-data,
body.skin-minerva .infobox-header,
body.skin-minerva .infobox-image,
body.skin-minerva .infobox-subheader,
body.skin-minerva .infobox-title {
  text-align: center;
}