RC-60 | Ammo | Layout

This commit is contained in:
Oliver-Akins 2025-01-26 15:59:58 -07:00
parent 1bdaa958ad
commit 517913f20c
5 changed files with 37 additions and 31 deletions

View file

@ -60,14 +60,21 @@
{{/each}}
</ol>
<div class="ammo half-pill">
<div class="label">
{{ rc-i18n "RipCrypt.common.ammo"}}
</div>
<div class="input">
{{ ammo }}
</div>
</div>
{{!-- * Currencies --}}
<div class="currencies">
<div class="currency half-pill">
<{{{ifThen meta.editable "label" "div" }}}
for="{{meta.idp}}-gold"
class="label"
>
<label for="{{meta.idp}}-gold" >
{{ rc-i18n "RipCrypt.common.currency.gold"}}
</{{{ifThen meta.editable "label" "div" }}}>
</label>
<input
type="number"
id="{{meta.idp}}-gold"
@ -76,12 +83,9 @@
>
</div>
<div class="currency half-pill">
<{{{ifThen meta.editable "label" "div" }}}
for="{{meta.idp}}-silver"
class="label"
>
<label for="{{meta.idp}}-silver" >
{{ rc-i18n "RipCrypt.common.currency.silver"}}
</{{{ifThen meta.editable "label" "div" }}}>
</label>
<input
type="number"
id="{{meta.idp}}-silver"
@ -90,12 +94,9 @@
>
</div>
<div class="currency half-pill">
<{{{ifThen meta.editable "label" "div" }}}
for="{{meta.idp}}-copper"
class="label"
>
<label for="{{meta.idp}}-copper" >
{{ rc-i18n "RipCrypt.common.currency.copper"}}
</{{{ifThen meta.editable "label" "div" }}}>
</label>
<input
type="number"
id="{{meta.idp}}-copper"

View file

@ -101,25 +101,22 @@
display: grid;
column-gap: var(--col-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
.currency {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: center;
background: var(--section-header-background);
color: var(--section-header-text);
--input-background: var(--base-background);
--input-text: var(--base-text);
.input {
margin: 2px;
border-radius: 999px;
text-align: center;
}
}
}
.half-pill {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: center;
background: var(--section-header-background);
border-radius: 0 999px 999px 0;
color: var(--section-header-text);
--input-background: var(--base-background);
--input-text: var(--base-text);
.input {
margin: 2px;
border-radius: 999px;
text-align: center;
}
}
}