Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

Template:ClassInfoBox/styles.css: Difference between revisions

Template page
More actions
← Older edit
No edit summary
Tags: Manual revert Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Template:ClassInfobox/styles.css
/* SpiritVale Wiki — Template:ClassInfobox/styles.css */
Namespace: sv-class-overview only
/* Class overview styles. Shared infobox primitives stay in Common.css. */
TemplateStyles-safe
/* -------------------------------------------------------------------------- */
*/
/* 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{
.sv-class-overview{
float:right;
  float:none;
width:100%;
  width:100%;
max-width:200px;
  max-width:none;
margin:0 0 2em 2em;
  margin:0 0 12px 0;
box-sizing:border-box;
  box-sizing:border-box;
border-radius:18px;
  border-radius:18px;
overflow:hidden;
  overflow:hidden;
clear:right;
  clear:right;
}
}
/* -------------------------------------------------------------------------- */
/* 2) Table */
/* -------------------------------------------------------------------------- */


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


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


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


.sv-class-overview__table tr:last-child td{
.sv-class-overview__table tr:last-child td{
border-bottom:none;
  border-bottom:none;
}
}
/* -------------------------------------------------------------------------- */
/* 3) Cell content */
/* -------------------------------------------------------------------------- */


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


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


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


@media (max-width:500px){
/* -------------------------------------------------------------------------- */
.sv-class-overview{
/* 4) Responsive                                                              */
float:none;
/* -------------------------------------------------------------------------- */
max-width:none;
/* Base/default (<640px): stacked infobox for narrow mobile layouts.          */
margin:0 0 12px 0;
/* sm and up (>=640px): restore the floated sidebar presentation.              */
}
 
.sv-class-overview__label,
@media (min-width:640px){
.sv-class-overview__value{
  .sv-class-overview{
text-align:left;
    float:right;
}
    max-width:200px;
    margin:0 0 2em 2em;
  }
 
  .sv-class-overview__value{
    text-align:right;
  }
}
}
Retrieved from "https://spiritvale.info/wiki/Template:ClassInfoBox/styles.css"