mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-05 20:34:15 +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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -53,6 +80,11 @@
|
|||
gap: 8px;
|
||||
height: 3.375rem;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.name-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -72,27 +104,16 @@
|
|||
}
|
||||
.item-tags {
|
||||
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 {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
button {
|
||||
--button-size: 1.5em;
|
||||
padding: 0 var(--spacer-4);
|
||||
}
|
||||
}
|
||||
|
||||
a.roll-button.initial-roll {
|
||||
|
|
@ -100,94 +121,82 @@
|
|||
height: 1.875rem;
|
||||
margin-right: 2px; /** makes hover look a bit nicer */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roll-container {
|
||||
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;
|
||||
.with-result {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
.dice-label {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
paint-order: stroke fill;
|
||||
-webkit-text-stroke: 2px black;
|
||||
.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;
|
||||
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 {
|
||||
height: 1.25rem;
|
||||
.buttons {
|
||||
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}}
|
||||
</span>
|
||||
{{/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>
|
||||
{{else if readyToRoll}}
|
||||
<div class="trait">
|
||||
|
|
@ -29,30 +23,38 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
{{#if roll}}
|
||||
<div class="roll-data with-result {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
|
||||
<div class="duality-label">
|
||||
{{roll.total}}
|
||||
<span class="with">{{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</span>
|
||||
</div>
|
||||
<div class="roll-dice-container">
|
||||
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="hope">
|
||||
<span class="dice-label">{{roll.dHope.total}}</span>
|
||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
|
||||
</a>
|
||||
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="fear">
|
||||
<span class="dice-label">{{roll.dFear.total}}</span>
|
||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
|
||||
</a>
|
||||
{{#if roll.advantage.type}}
|
||||
<span class="roll-operator">{{#if (eq roll.advantage.type 1)}}+{{else}}-{{/if}}</span>
|
||||
<span class="roll-dice">
|
||||
<span class="dice-label">{{roll.advantage.value}}</span>
|
||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/" (ifThen (eq roll.advantage.type 1) "adv/" "disadv/") roll.advantage.dice ".svg"}}" />
|
||||
</span>
|
||||
{{/if}}
|
||||
<span class="roll-operator ">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
|
||||
<span class="roll-value">{{positive roll.modifierTotal}}</span>
|
||||
<div class="with-result {{#if roll.withHope}}hope{{else if roll.withFear}}fear{{else}}critical{{/if}}">
|
||||
<div class="roll-data">
|
||||
<div class="duality-label">
|
||||
{{roll.total}}
|
||||
<span class="with">{{localize "DAGGERHEART.GENERAL.withThing" thing=roll.totalLabel}}</span>
|
||||
</div>
|
||||
<div class="roll-dice-container">
|
||||
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="hope">
|
||||
<span class="dice-label">{{roll.dHope.total}}</span>
|
||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/hope/" roll.dHope.denomination ".svg"}}" />
|
||||
</a>
|
||||
<a class="roll-dice" data-action="rerollDice" data-member="{{@root.partId}}" data-dice-type="fear">
|
||||
<span class="dice-label">{{roll.dFear.total}}</span>
|
||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/fear/" roll.dFear.denomination ".svg"}}" />
|
||||
</a>
|
||||
{{#if roll.advantage.type}}
|
||||
<span class="roll-operator">{{#if (eq roll.advantage.type 1)}}+{{else}}-{{/if}}</span>
|
||||
<span class="roll-dice">
|
||||
<span class="dice-label">{{roll.advantage.value}}</span>
|
||||
<img src="{{concat "systems/daggerheart/assets/icons/dice/" (ifThen (eq roll.advantage.type 1) "adv/" "disadv/") roll.advantage.dice ".svg"}}" />
|
||||
</span>
|
||||
{{/if}}
|
||||
<span class="roll-operator ">{{#if (gte roll.modifierTotal 0)}}+{{else}}-{{/if}}</span>
|
||||
<span class="roll-value">{{positive roll.modifierTotal}}</span>
|
||||
</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>
|
||||
{{else if readyToRoll}}
|
||||
<a class="roll-button initial-roll" data-action="makeRoll" data-member="{{@root.partId}}">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue