refining/climperor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.5.87: fill ability loc tokens and tidy skill detail layout.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
voson
2026-07-29 20:32:37 +08:00
co-authored by Cursor
parent ad7f5d0e1a
commit 09f0a0b4a0
10 changed files with 410 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/frontend/style.css
+35 -16
View File
@@ -1100,10 +1100,11 @@ body {
min-width: 1.4em;
}
.hero-stat-attr-gain {
margin-left: 6px;
margin-left: auto;
font-size: 13px;
color: var(--muted);
letter-spacing: 0.02em;
text-align: right;
}
/* Right-rail combat panel: Attack | Defense | Mobility side by side. */
.hero-stats-combat-panel {
@@ -1413,24 +1414,27 @@ body {
font-size: 13px;
line-height: 1.4;
color: rgba(232, 238, 247, 0.88);
white-space: pre-wrap;
/* Keep Valve paragraph breaks; collapse runs of spaces. Prefer one line when
the detail column is wide enough (see video/main flex share below). */
white-space: pre-line;
}
.skill-info-body {
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
gap: 18px 24px;
align-items: flex-start;
justify-content: center;
/* Spare width goes into the text column instead of centering a squeezed pair. */
justify-content: flex-start;
/* Fill the hero-inspect column so the video's 16:9 intrinsic height can no
longer push the row past the viewport and trigger a scrollbar. */
flex: 1 1 auto;
min-height: 0;
}
.skill-info-main {
flex: 1 1 340px;
flex: 1 1 420px;
min-width: 0;
/* Cap the detail column so it does not stretch edge-to-edge (leaving a big
empty band) when no demo video is cached beside it. */
/* Cap when alone (no demo clip). With a video sibling, allow a wider column
so ability blurbs stay on one line when the panel has room. */
max-width: 760px;
/* height:100% pins this column to the body's definite height (same trick as
the video) — align-self:stretch alone fails to shrink a column whose
@@ -1444,13 +1448,17 @@ body {
overflow-y: auto;
scrollbar-width: thin;
}
.skill-info-body:has(> .skill-info-video) .skill-info-main {
max-width: 920px;
flex: 1 1 480px;
}
/* height:100% resolves against the definite body height (set by the flex
chain from .detail's fixed height), so the 16:9 intrinsic ratio can no
longer push the player past the viewport — align-self:stretch alone can't
shrink a replaced element below its intrinsic size. cover crops to fill. */
.skill-info-video {
flex: 1 1 500px;
max-width: 820px;
flex: 1 1 380px;
max-width: 560px;
min-width: 0;
min-height: 0;
height: 100%;
@@ -1475,7 +1483,9 @@ body {
}
.skill-specific {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
/* Wider tracks so multi-level values ("0.7 / 0.9 / 1.1 / 1.3") stay on one
line beside the label instead of leaving an empty band to the right. */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 4px 20px;
margin-top: 8px;
padding-top: 8px;
@@ -1483,7 +1493,9 @@ body {
}
.skill-param {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 4px;
min-width: 0;
font-size: 13px;
line-height: 1.45;
@@ -1494,22 +1506,29 @@ body {
color: var(--muted);
}
.skill-param-value {
margin-left: 4px;
flex: 1 1 auto;
min-width: 0;
color: #fff;
font-weight: 600;
/* Keep "0.7 / 0.9 / 1.1 / 1.3" on one line; grid adds columns instead of
stacking each tier vertically in a squeezed value span. */
white-space: nowrap;
}
/* Cooldown / mana + lore sink together so lore cannot overflow past the
column after margin-top:auto on costs alone. */
.skill-info-foot {
margin-top: auto;
padding-top: 10px;
flex: 0 0 auto;
}
/* Cooldown / mana footer. Mana glyph is the official CSS gradient square;
cooldown uses the downloaded dota2.com.cn cooldown.png. */
.skill-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
/* Sinks the cooldown/mana footer to the column bottom (aligning with the
stretched video); padding-top keeps the minimum gap when there is no
spare height to absorb. */
margin-top: auto;
padding-top: 10px;
width: 100%;
}
.skill-stat {
display: inline-flex;