Template:ClassInfoBox/styles.css: Difference between revisions
Template page
More actions
Blanked the page Tags: Blanking Reverted Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* 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; | |||
} | |||
} | |||