mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-06 04:44:16 +02:00
Move successful buttons to inner result
This commit is contained in:
Carlos Fernandez
parent
98f9957ba0
commit
632e33ecd6
2 changed files with 138 additions and 127 deletions
|
|
@ -46,6 +46,33 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.with-result {
|
||||||
|
border-radius: 5px;
|
||||||
|
background: var(--duality-bg);
|
||||||
|
color: var(--color-light-2);
|
||||||
|
|
||||||
|
&.hope {
|
||||||
|
--duality-text-color: @golden;
|
||||||
|
--duality-bg: url(../assets/parchments/dh-parchment-hope.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fear {
|
||||||
|
--duality-text-color: @chat-blue;
|
||||||
|
--duality-bg: url(../assets/parchments/dh-parchment-fear.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.critical {
|
||||||
|
--duality-text-color: @chat-purple;
|
||||||
|
--duality-bg: url(../assets/parchments/dh-parchment-critical.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.duality-label {
|
||||||
|
font-family: var(--dh-font-subtitle);
|
||||||
|
color: var(--duality-text-color);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.member-roll-container {
|
.member-roll-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -53,6 +80,11 @@
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
height: 3.375rem;
|
height: 3.375rem;
|
||||||
|
|
||||||
|
&.inactive {
|
||||||
|
opacity: 0.3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.name-area {
|
.name-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -72,27 +104,16 @@
|
||||||
}
|
}
|
||||||
.item-tags {
|
.item-tags {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
.buttons {
|
|
||||||
align-items: stretch;
|
|
||||||
display: flex;
|
|
||||||
button {
|
|
||||||
--button-size: auto;
|
|
||||||
color: var(--medium-red);
|
|
||||||
padding: 0 var(--spacer-4);
|
|
||||||
&[data-success=true] {
|
|
||||||
color: var(--green);
|
|
||||||
}
|
|
||||||
&.inactive {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.inactive {
|
.buttons {
|
||||||
opacity: 0.3;
|
display: flex;
|
||||||
pointer-events: none;
|
flex-direction: column;
|
||||||
|
button {
|
||||||
|
--button-size: 1.5em;
|
||||||
|
padding: 0 var(--spacer-4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.roll-button.initial-roll {
|
a.roll-button.initial-roll {
|
||||||
|
|
@ -100,94 +121,82 @@
|
||||||
height: 1.875rem;
|
height: 1.875rem;
|
||||||
margin-right: 2px; /** makes hover look a bit nicer */
|
margin-right: 2px; /** makes hover look a bit nicer */
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.roll-container {
|
.with-result {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.with-result {
|
|
||||||
border-radius: 5px;
|
|
||||||
background: var(--duality-bg);
|
|
||||||
color: var(--color-light-2);
|
|
||||||
|
|
||||||
&.hope {
|
|
||||||
--duality-text-color: @golden;
|
|
||||||
--duality-bg: url(../assets/parchments/dh-parchment-hope.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fear {
|
|
||||||
--duality-text-color: @chat-blue;
|
|
||||||
--duality-bg: url(../assets/parchments/dh-parchment-fear.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.critical {
|
|
||||||
--duality-text-color: @chat-purple;
|
|
||||||
--duality-bg: url(../assets/parchments/dh-parchment-critical.png);
|
|
||||||
}
|
|
||||||
|
|
||||||
.duality-label {
|
|
||||||
font-family: var(--dh-font-subtitle);
|
|
||||||
color: var(--duality-text-color);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.roll-data {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: end;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 4px;
|
|
||||||
min-height: 3rem;
|
|
||||||
|
|
||||||
.duality-label {
|
|
||||||
font-size: var(--font-size-15);
|
|
||||||
|
|
||||||
.unused-damage {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
.with {
|
|
||||||
font-size: var(--font-size-10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.roll-dice-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 4px;
|
|
||||||
|
|
||||||
.roll-dice {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 6px;
|
||||||
|
|
||||||
.dice-label {
|
.roll-data {
|
||||||
position: absolute;
|
display: flex;
|
||||||
color: white;
|
flex-direction: column;
|
||||||
font-size: 1rem;
|
align-items: end;
|
||||||
paint-order: stroke fill;
|
justify-content: center;
|
||||||
-webkit-text-stroke: 2px black;
|
padding: 0 4px;
|
||||||
|
min-height: 3rem;
|
||||||
|
|
||||||
|
.duality-label {
|
||||||
|
font-size: var(--font-size-15);
|
||||||
|
|
||||||
|
.unused-damage {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.with {
|
||||||
|
font-size: var(--font-size-10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.roll-dice-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.roll-dice {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.dice-label {
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
font-size: 1rem;
|
||||||
|
paint-order: stroke fill;
|
||||||
|
-webkit-text-stroke: 2px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.roll-operator {
|
||||||
|
font-size: var(--font-size-18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roll-value {
|
||||||
|
font-size: var(--font-size-16);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.buttons {
|
||||||
height: 1.25rem;
|
gap: 2px;
|
||||||
|
button {
|
||||||
|
color: var(--medium-red);
|
||||||
|
&[data-success=true] {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
&.inactive {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.roll-operator {
|
|
||||||
font-size: var(--font-size-18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.roll-value {
|
|
||||||
font-size: var(--font-size-16);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,6 @@
|
||||||
{{numberFormat modifier sign=true}}
|
{{numberFormat modifier sign=true}}
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if (and isEditable (ne ../partId "leader"))}}
|
|
||||||
<div class="buttons">
|
|
||||||
<button type="button" data-action="markSuccessful" data-success="true" class="plain icon fa-solid fa-check {{#if modifier}}{{#if successfull}}active{{else}}inactive{{/if}}{{/if}}"></button>
|
|
||||||
<button type="button" data-action="markSuccessful" class="plain icon fa-solid fa-times {{#if modifier}}{{#if successfull}}inactive{{else}}active{{/if}}{{/if}}"></button>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
</div>
|
||||||
{{else if readyToRoll}}
|
{{else if readyToRoll}}
|
||||||
<div class="trait">
|
<div class="trait">
|
||||||
|
|
@ -29,30 +23,38 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{#if roll}}
|
{{#if roll}}
|
||||||
<div class="roll-data with-result {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
|
<div class="with-result {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
|
||||||
<div class="duality-label">
|
<div class="roll-data">
|
||||||
{{roll.total}}
|
<div class="duality-label">
|
||||||
<span class="with">{{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</span>
|
{{roll.total}}
|
||||||
</div>
|
<span class="with">{{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</span>
|
||||||
<div class="roll-dice-container">
|
</div>
|
||||||
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="hope">
|
<div class="roll-dice-container">
|
||||||
<span class="dice-label">{{roll.dHope.total}}</span>
|
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="hope">
|
||||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
|
<span class="dice-label">{{roll.dHope.total}}</span>
|
||||||
</a>
|
<img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
|
||||||
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="fear">
|
</a>
|
||||||
<span class="dice-label">{{roll.dFear.total}}</span>
|
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="fear">
|
||||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
|
<span class="dice-label">{{roll.dFear.total}}</span>
|
||||||
</a>
|
<img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
|
||||||
{{#if roll.advantage.type}}
|
</a>
|
||||||
<span class="roll-operator">{{#if (eq roll.advantage.type 1)}}+{{else}}-{{/if}}</span>
|
{{#if roll.advantage.type}}
|
||||||
<span class="roll-dice">
|
<span class="roll-operator">{{#if (eq roll.advantage.type 1)}}+{{else}}-{{/if}}</span>
|
||||||
<span class="dice-label">{{roll.advantage.value}}</span>
|
<span class="roll-dice">
|
||||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/" (ifThen (eq roll.advantage.type 1) "adv/" "disadv/") roll.advantage.dice ".svg"}}" />
|
<span class="dice-label">{{roll.advantage.value}}</span>
|
||||||
</span>
|
<img src="{{concat "systems/daggerheart/assets/icons/dice/" (ifThen (eq roll.advantage.type 1) "adv/" "disadv/") roll.advantage.dice ".svg"}}" />
|
||||||
{{/if}}
|
</span>
|
||||||
<span class="roll-operator ">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
|
{{/if}}
|
||||||
<span class="roll-value">{{positive roll.modifierTotal}}</span>
|
<span class="roll-operator ">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
|
||||||
|
<span class="roll-value">{{positive roll.modifierTotal}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{#if (and isEditable (ne ../partId "leader"))}}
|
||||||
|
<div class="buttons">
|
||||||
|
<button type="button" data-action="markSuccessful" data-success="true" class="plain icon fa-solid fa-check {{#if modifier}}{{#if successfull}}active{{else}}inactive{{/if}}{{/if}}"></button>
|
||||||
|
<button type="button" data-action="markSuccessful" class="plain icon fa-solid fa-times {{#if modifier}}{{#if successfull}}inactive{{else}}active{{/if}}{{/if}}"></button>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{else if readyToRoll}}
|
{{else if readyToRoll}}
|
||||||
<a class="roll-button initial-roll" data-action="makeRoll" data-member="{{@root.partId}}">
|
<a class="roll-button initial-roll" data-action="makeRoll" data-member="{{@root.partId}}">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue