Module:GameInfo/styles.css: Difference between revisions
From SpiritVale Wiki
More actions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 1,056: | Line 1,056: | ||
---------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
@media (max-width: | @media (max-width:850px){ | ||
.sv-gi-card, | .sv-gi-card, | ||
.sv-skill-card{ | .sv-skill-card{ | ||
| Line 1,083: | Line 1,083: | ||
.sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; } | .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; } | ||
/* Schema 2 scaling: stack primary, then stats, then full-width core */ | |||
.sv_skill_scaling__body{ | .sv_skill_scaling__body{ | ||
grid-template-columns:1fr; | grid-template-columns:1fr; | ||
} | } | ||
.sv_skill_scaling__column--primary{ | .sv_skill_scaling__column--primary, | ||
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(1), | |||
.sv_skill_scaling__column--stats, | |||
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(2), | |||
.sv_skill_scaling__column--core, | |||
.sv_skill_scaling__body > .sv_skill_scaling__column:nth-child(3){ | |||
grid-column:auto; | |||
grid-row:auto; | |||
} | |||
.sv_skill_scaling__stats-grid{ | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
} | |||
.sv_skill_scaling__core-grid{ | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
} | } | ||
.sv_skill_scaling__primary-value{ | .sv_skill_scaling__primary-value{ | ||
font-size: | font-size:36px; | ||
} | |||
.sv_skill_scaling__stat-pill{ | |||
min-height:98px; | |||
} | } | ||
} | } | ||
@media (max-width: | @media (max-width:500px){ | ||
.sv-skill-head{ gap:10px; } | .sv-skill-head{ gap:10px; } | ||
| Line 1,182: | Line 1,201: | ||
.sv_skill_scaling__column--primary{ | .sv_skill_scaling__column--primary{ | ||
padding:11px 10px; | |||
} | } | ||
.sv_skill_scaling__primary-value{ | .sv_skill_scaling__primary-value{ | ||
font-size: | font-size:32px; | ||
line-height:0.98; | line-height:0.98; | ||
} | } | ||
.sv_skill_scaling__primary-label{ | .sv_skill_scaling__primary-label{ | ||
margin-top: | margin-top:6px; | ||
font-size: | font-size:11px; | ||
} | } | ||
.sv_skill_scaling__pill{ | .sv_skill_scaling__pill{ | ||
padding:9px | padding:9px 8px; | ||
} | |||
/* Mobile: three across, then three across */ | |||
.sv_skill_scaling__stats-grid{ | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:7px; | |||
} | } | ||
.sv_skill_scaling__stat-pill{ | .sv_skill_scaling__stat-pill{ | ||
min-height: | min-height:92px; | ||
gap:7px; | |||
} | |||
.sv_skill_scaling__stat-visual{ | |||
gap:5px; | |||
} | |||
.sv_skill_scaling__stat-icon{ | |||
width:20px; | |||
height:20px; | |||
} | } | ||
.sv_skill_scaling__stat-label{ | .sv_skill_scaling__stat-label{ | ||
font-size: | font-size:12px; | ||
} | } | ||
.sv_skill_scaling__stat-value{ | .sv_skill_scaling__stat-value{ | ||
font-size:16px; | font-size:16px; | ||
} | |||
.sv_skill_scaling__core-grid{ | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:7px; | |||
} | } | ||
.sv_skill_scaling__core-pill{ | .sv_skill_scaling__core-pill{ | ||
min-height: | min-height:78px; | ||
} | } | ||
.sv_skill_scaling__core-value{ | .sv_skill_scaling__core-value{ | ||
font-size: | font-size:16px; | ||
} | } | ||
.sv_skill_scaling__core-label{ | .sv_skill_scaling__core-label{ | ||
font-size: | font-size:10px; | ||
letter-spacing:0. | letter-spacing:0.10px; | ||
} | } | ||
| Line 1,235: | Line 1,275: | ||
} | } | ||
@media (max-width: | @media (max-width:500px){ | ||
.sv-gi-card .sv-disclose, | .sv-gi-card .sv-disclose, | ||
.sv-skill-card .sv-disclose{ | .sv-skill-card .sv-disclose{ | ||
flex:1 1 100%; | flex:1 1 100%; | ||
max-width:100%; | max-width:100%; | ||
} | |||
.sv_skill_scaling__stats-grid{ | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
} | } | ||