Template:ClassInfoBox/styles.css: Difference between revisions

Latest revision as of 22:40, 7 March 2026

/* SpiritVale Wiki — Template:ClassInfobox/styles.css */
/* Class overview styles. Shared infobox primitives stay in Common.css. */
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                     */
/* -------------------------------------------------------------------------- */
/* This sheet owns only the ClassInfobox namespace. It is responsible for      */
/* the .sv-class-overview shell, its internal table layout, and any responsive */
/* changes needed specifically for that infobox.                               */
/*                                                                            */
/* It does NOT own shared infobox primitives, global tokens, theme logic, or  */
/* sitewide breakpoint definitions. Those belong in Common.css / Citizen.css.  */
/*                                                                            */
/* Responsive cleanup note: ClassInfobox now uses the canonical breakpoint     */
/* ladder instead of a one-off mobile cutoff.                                  */
/* -------------------------------------------------------------------------- */
/* Canonical ladder                                                            */
/* -------------------------------------------------------------------------- */
/* - default: <640px                                                           */
/* - sm:      >=640px                                                          */
/* - md:      >=768px                                                          */
/* - lg:      >=1024px                                                         */
/* - xl:      >=1280px                                                         */
/* - 2xl:     >=1536px                                                         */
/* -------------------------------------------------------------------------- */


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

.sv-class-overview{
  float:none;
  width:100%;
  max-width:none;
  margin:0 0 12px 0;
  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:left;
  font-weight:600;
  color:var(--sv-ui-text2);
}

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

/* -------------------------------------------------------------------------- */
/* 4) Responsive                                                               */
/* -------------------------------------------------------------------------- */
/* Base/default (<640px): stacked infobox for narrow mobile layouts.           */
/* sm and up (>=640px): restore the floated sidebar presentation.              */

@media (min-width:640px){
  .sv-class-overview{
    float:right;
    max-width:200px;
    margin:0 0 2em 2em;
  }

  .sv-class-overview__value{
    text-align:right;
  }
}