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 953: | Line 953: | ||
/* ======================================================================== | /* ======================================================================== | ||
MOBILE | MOBILE: NO TRANSPARENCY (SOLID COLORS ONLY) | ||
- Card slightly brighter than before | |||
- ALL bubbles/panels standardized to the same solid surface | |||
- Dividers/gridlines solid + visible | |||
- Tabs more visible | |||
======================================================================== */ | ======================================================================== */ | ||
/* | /* Card background (solid) */ | ||
.sv-skill-card, | .sv-skill-card, | ||
.sv-gi-card { | .sv-gi-card { | ||
background-color: #162a4e !important; | background-color: #162a4e !important; | ||
background-image: | background-image: none !important; | ||
border | border: 1px solid #3f587a !important; | ||
box-shadow: 0 16px 34px | box-shadow: 0 16px 34px #000000 !important; | ||
color: | color: #f5faff !important; | ||
} | } | ||
/* | /* Standard surface for EVERY box/bubble/panel */ | ||
.sv-skill-level, | .sv-skill-level, | ||
.sv-scaling-row, | .sv-scaling-row, | ||
| Line 987: | Line 982: | ||
.sv-disclose > summary, | .sv-disclose > summary, | ||
.sv-disclose-btn, | .sv-disclose-btn, | ||
.sv-meta- | .sv-meta-card, | ||
.sv-meta- | .sv-meta-icon { | ||
background: | background: #3a5476 !important; /* ONE standardized surface color */ | ||
border | border: 1px solid #556f92 !important; /* ONE standardized border color */ | ||
box-shadow: | box-shadow: none !important; | ||
} | } | ||
/* | /* Dividers / gridlines (solid) */ | ||
.sv-skill-meta, | .sv-skill-meta, | ||
.sv-scaling-col + .sv-scaling-col, | .sv-scaling-col + .sv-scaling-col, | ||
| Line 1,005: | Line 998: | ||
.sv-core-cell, | .sv-core-cell, | ||
.sv-scaling-col { | .sv-scaling-col { | ||
border-color: | border-color: #506a8d !important; | ||
} | } | ||
/* | /* Tabs: visible by default + stronger selected */ | ||
.sv-tab { | .sv-tab { | ||
background: | background: #355170 !important; | ||
color: | color: #f8fbff !important; | ||
} | } | ||
.sv-tab[aria-selected="true"] { | .sv-tab[aria-selected="true"] { | ||
background: | background: #4a6a8e !important; | ||
color: | color: #ffffff !important; | ||
box-shadow: | box-shadow: none !important; | ||
} | } | ||
/* | /* Secondary label tone (solid) */ | ||
.sv-scaling-label, | .sv-scaling-label, | ||
.sv-core-label, | .sv-core-label, | ||
| Line 1,026: | Line 1,019: | ||
.sv-tip-pop-title, | .sv-tip-pop-title, | ||
.sv-disclose-pop-title { | .sv-disclose-pop-title { | ||
color: | color: #e6eef8 !important; | ||
} | } | ||
/* | /* Slider: brighten everything (solid) */ | ||
.sv-level-range--custom { | .sv-level-range--custom { | ||
background: | background: none !important; | ||
border: 0 !important; | border: 0 !important; | ||
} | } | ||
.sv-level-track { | .sv-level-track { | ||
border: 1px solid | border: 1px solid #6b86aa !important; | ||
background: | background: #4a6a8e !important; /* solid track */ | ||
} | } | ||
.sv-level-fill { | .sv-level-fill { | ||
background: | background: #8fd3ff !important; /* solid fill */ | ||
} | |||
.sv-level-thumb { | |||
background: #ffffff !important; | |||
border: 1px solid #0a0f18 !important; | |||
box-shadow: none !important; | |||
} | |||
.sv-level-ticklabels { | |||
color: #eaf2fb !important; | |||
} | } | ||
/* | /* ------------------------------------------------------------------------ | ||
KEEP YOUR EXISTING MOBILE LAYOUT RULES (structure) | |||
------------------------------------------------------------------------ */ | |||
.sv-skill-head { grid-template-columns: 68px 1fr; gap: 10px; } | .sv-skill-head { grid-template-columns: 68px 1fr; gap: 10px; } | ||
.sv-skill-icon { width: 68px; height: 68px; border-radius: 12px; } | .sv-skill-icon { width: 68px; height: 68px; border-radius: 12px; } | ||
.sv-skill-title { font-size: 18px; } | .sv-skill-title { font-size: 18px; } | ||
.sv-skill-desc { font-size: 15px; line-height: 1.28; } | .sv-skill-desc { font-size: 15px; line-height: 1.28; } | ||
| Line 1,093: | Line 1,092: | ||
grid-column: 1; | grid-column: 1; | ||
grid-row: 1; | grid-row: 1; | ||
border-right: 1px solid | border-right: 1px solid #506a8d; | ||
} | } | ||
| Line 1,099: | Line 1,098: | ||
grid-column: 1; | grid-column: 1; | ||
grid-row: 2; | grid-row: 2; | ||
border-top: 1px solid | border-top: 1px solid #506a8d; | ||
border-right: 1px solid | border-right: 1px solid #506a8d; | ||
} | } | ||
| Line 1,112: | Line 1,111: | ||
.sv-core-grid { grid-template-columns: repeat(3, 1fr); } | .sv-core-grid { grid-template-columns: repeat(3, 1fr); } | ||
.sv-core-cell { border-left: 0; border-top: 1px solid | |||
.sv-core-cell { border-left: 0; border-top: 1px solid #506a8d; } | |||
.sv-core-cell:nth-child(-n+3) { border-top: 0; } | .sv-core-cell:nth-child(-n+3) { border-top: 0; } | ||
.sv-core-cell:nth-child(3n+2), | .sv-core-cell:nth-child(3n+2), | ||
.sv-core-cell:nth-child(3n+3) { border-left: 1px solid | .sv-core-cell:nth-child(3n+3) { border-left: 1px solid #506a8d; } | ||
.sv-tabs-list { grid-template-columns: repeat(2, 1fr); } | .sv-tabs-list { grid-template-columns: repeat(2, 1fr); } | ||
.sv-tab { padding: 9px 6px; } | .sv-tab { padding: 9px 6px; } | ||
.sv-tab + .sv-tab { border-left: 1px solid | .sv-tab + .sv-tab { border-left: 1px solid #506a8d; } | ||
.sv-tab:nth-child(2n+1) { border-left: 0; } | .sv-tab:nth-child(2n+1) { border-left: 0; } | ||
.sv-tab:nth-child(n+3) { border-top: 1px solid | .sv-tab:nth-child(n+3) { border-top: 1px solid #506a8d; } | ||
.sv-kw-grid { grid-template-columns: repeat(2, 1fr); } | .sv-kw-grid { grid-template-columns: repeat(2, 1fr); } | ||
.sv-tab-pills { grid-template-columns: repeat(2, 1fr); } | .sv-tab-pills { grid-template-columns: repeat(2, 1fr); } | ||
.sv-pill { font-size: 14px; } | .sv-pill { font-size: 14px; } | ||
| Line 1,134: | Line 1,136: | ||
.sv-level-ticklabels { max-width: 100%; } | .sv-level-ticklabels { max-width: 100%; } | ||
} | } | ||
/* -------------------------------------------------------------------------- | /* -------------------------------------------------------------------------- | ||