Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 31 additions & 11 deletions styles/less/sheets-settings/character-settings/sheet.less
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,27 @@
gap: 2px;

.trait-container {
width: 65px;
height: 65px;
background: url(../assets/svg/trait-shield.svg) no-repeat;
background-size: 100%;
padding-top: 3px;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 3px;
text-align: center;

.trait-name {
background-color: light-dark(var(--semi-transparent-dark-blue, rgba(24, 22, 46, 0.33)), var(--golden-40, #f3c26740));
border: 1px solid light-dark(@semi-transparent-dark-blue, @golden-60);
border-radius: 3px;
color: light-dark(var(--color-light-1), var(--golden, #f3c267));
font-size: var(--font-size-12);
font-weight: 600;
height: 1rem;
line-height: 1rem;
white-space: nowrap;
width: 100%;
text-shadow: 1px 1px 2px var(--light-black, rgba(0, 0, 0, 0.3));
padding: 0 2px;
}

span {
font-size: var(--font-size-10);
Expand All @@ -43,13 +55,21 @@
font-size: var(--font-size-12);
}

input {
text-align: center;
width: 32px;
height: 24px;
position: relative;
top: 2px;
padding: 0;
.trait-inner-container {
--color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
--background: light-dark(#e8e6e3, @dark-blue);
display: flex;
align-items: center;
justify-content: center;

input {
text-align: center;
width: 32px;
height: 24px;
position: absolute;
margin-bottom: 6px;
padding: 0;
}
}
}
}
Expand Down
10 changes: 8 additions & 2 deletions templates/sheets-settings/character-settings/details.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,14 @@
<div class="traits-inner-container">
{{#each document._source.system.traits as | trait key |}}
<div class="trait-container">
<span>{{localize (concat "DAGGERHEART.CONFIG.Traits." key ".name" )}}</span>
<input type="text" data-dtype="Number" name="{{concat "system.traits." key ".value"}}" value="{{trait.value}}" />
<span class="trait-name">{{localize (concat "DAGGERHEART.CONFIG.Traits." key ".name" )}}</span>
<div class="trait-inner-container">
<svg width="52" height="46" viewBox="0 0 52 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,0 H 52 L 51.0714,18.254 48.781,24.0952 47.5745,39.9596 26,46 4.42553,39.9596 3.219,24.0952 0.928571,18.254 Z" fill="var(--color-border)"></path>
<path d="M 3.312,5.357 8.58596,0 H 43.414 l 5.274,5.357 -1.8797,28.846 c -0.2431,2.605 -2.1461,4.7522 -4.7031,5.3064 l -14.8343,3.2151 c -0.8375,0.1816 -1.7043,0.1816 -2.5418,0 L 9.89482,39.5094 C 7.33785,38.9552 5.43478,36.808 5.19169,34.203 Z" fill="var(--background)"></path>
</svg>
<input type="text" data-dtype="Number" name="{{concat "system.traits." key ".value"}}" value="{{trait.value}}" />
</div>
</div>
{{/each}}
</div>
Expand Down
Loading