Foundry/ripcrypt
1
0
Fork 0
Code Issues 22 Pull requests Releases Activity Actions

RC-37 | Abilities | Move & Run Display

Browse source
This commit is contained in:
Oliver-Akins 2024-12-28 14:21:27 -07:00
parent 7095d0d3f8
commit a9cc3244df
4 changed files with 60 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Apps/HeroSummaryCardV1/content.hbs
View file

@ -68,8 +68,18 @@
{{/each}}
{{!-- Health --}}
<div></div>
{{!-- Move & Run --}}
<div class="ability">
<div class="compass dual">
<span class="value">{{speed.move}}</span>
<span class="max">{{speed.run}}</span>
</div>
<div aria-hidden="true" class="col-header label">
{{rc-i18n "RipCrypt.Apps.HeroSummaryCardV1.move-run"}}
</div>
</div>
</div>
{{!-- * Equipment --}}

43
Apps/HeroSummaryCardV1/style.css
View file

@ -60,13 +60,13 @@
/* grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); */
grid-template-columns: repeat(6, minmax(0, 1fr));
.ability {
display: grid;
grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
justify-items: center;
align-items: center;
}
}
.ability {
display: grid;
grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
justify-items: center;
align-items: center;
label, .label {
width: 100%;
text-align: center;
@ -90,5 +90,36 @@
width: 70%;
text-align: center;
}
&.dual {
position: relative;
font-size: 1rem;
--distance-from-edge: 3px;
&::after {
display: block;
content: "";
width: 69%;
height: 2px;
background: black;
transform: rotate(-45deg);
}
> .value,
> .max {
width: 50%;
position: absolute;
text-align: center;
}
> .value {
top: var(--distance-from-edge);
left: var(--distance-from-edge);
}
> .max {
bottom: var(--distance-from-edge);
right: var(--distance-from-edge);
}
}
}
}