Template:ClassInfoBox/styles.css

/* SpiritVale Wiki — Template:ClassInfobox/styles.css */
/* Class overview styles. Shared infobox primitives stay in Common.css. */

/* -------------------------------------------------------------------------- */
/* 1) Shell */
/* -------------------------------------------------------------------------- */

.sv-class-overview{
  float:right;
  width:100%;
  max-width:200px;
  margin:0 0 2em 2em;
  box-sizing:border-box;
  border-radius:18px;
  overflow:hidden;
  clear:right;
}

/* -------------------------------------------------------------------------- */
/* 2) Table */
/* -------------------------------------------------------------------------- */

.sv-class-overview__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.sv-class-overview__heading,
.sv-class-overview__subhead{
  padding:10px 10px;
  text-align:center;
  font-weight:800;
}

.sv-class-overview__table td{
  padding:7px 10px;
  border-bottom:1px solid var(--sv-ui-line1);
  vertical-align:middle;
}

.sv-class-overview__table tr:last-child td{
  border-bottom:none;
}

/* -------------------------------------------------------------------------- */
/* 3) Cell content */
/* -------------------------------------------------------------------------- */

.sv-class-overview__label{
  text-align:left;
  font-weight:700;
  color:var(--sv-ui-text1);
  white-space:nowrap;
}

.sv-class-overview__value{
  text-align:right;
  font-weight:600;
  color:var(--sv-ui-text2);
}

.sv-class-overview__label img{
  vertical-align:middle;
  margin-right:6px;
}

/* -------------------------------------------------------------------------- */
/* 4) Responsive */
/* -------------------------------------------------------------------------- */

@media (max-width:500px){
  .sv-class-overview{
    float:none;
    max-width:none;
    margin:0 0 12px 0;
  }

  .sv-class-overview__label,
  .sv-class-overview__value{
    text-align:left;
  }
}