mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-16 13:41:07 +01:00
Layout change
This commit is contained in:
parent
19a71a6a7f
commit
d79249076d
3 changed files with 76 additions and 73 deletions
|
|
@ -1318,6 +1318,9 @@
|
||||||
.combat-sidebar .encounter-controls.combat .control-buttons {
|
.combat-sidebar .encounter-controls.combat .control-buttons {
|
||||||
width: min-content;
|
width: min-content;
|
||||||
}
|
}
|
||||||
|
.combat-sidebar .combatant-controls {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
.combat-sidebar .token-actions {
|
.combat-sidebar .token-actions {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1330,7 +1333,8 @@
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
.combat-sidebar .token-actions .action-tokens .action-token {
|
.combat-sidebar .token-actions .action-tokens .action-token {
|
||||||
height: 24px;
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1357,14 +1361,17 @@
|
||||||
.combat-sidebar .token-actions button.main:hover {
|
.combat-sidebar .token-actions button.main:hover {
|
||||||
filter: drop-shadow(0 0 3px var(--button-hover-text-color));
|
filter: drop-shadow(0 0 3px var(--button-hover-text-color));
|
||||||
}
|
}
|
||||||
.combat-sidebar .token-actions button.discrete:hover {
|
.combat-sidebar .spotlight-control {
|
||||||
background: inherit;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
.combat-sidebar .token-actions .combatant-control:focus {
|
.combat-sidebar .spotlight-control:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.combat-sidebar .token-actions .combatant-control.requesting {
|
.combat-sidebar .spotlight-control.discrete:hover {
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
.combat-sidebar .spotlight-control.requesting {
|
||||||
filter: drop-shadow(0 0 3px gold);
|
filter: drop-shadow(0 0 3px gold);
|
||||||
color: var(--button-hover-text-color);
|
color: var(--button-hover-text-color);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.combatant-controls {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.token-actions {
|
.token-actions {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -42,7 +46,8 @@
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
||||||
.action-token {
|
.action-token {
|
||||||
height: 24px;
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -73,24 +78,26 @@
|
||||||
filter: drop-shadow(0 0 3px var(--button-hover-text-color));
|
filter: drop-shadow(0 0 3px var(--button-hover-text-color));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.discrete:hover {
|
|
||||||
background: inherit;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.combatant-control {
|
.spotlight-control {
|
||||||
|
font-size: 26px;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.discrete:hover {
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
&.requesting {
|
&.requesting {
|
||||||
filter: drop-shadow(0 0 3px gold);
|
filter: drop-shadow(0 0 3px gold);
|
||||||
color: var(--button-hover-text-color);
|
color: var(--button-hover-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,8 @@
|
||||||
{{!-- Name & Controls --}}
|
{{!-- Name & Controls --}}
|
||||||
<div class="token-name">
|
<div class="token-name">
|
||||||
<strong class="name">{{ name }}</strong>
|
<strong class="name">{{ name }}</strong>
|
||||||
<div class="combatant-controls">
|
<div class="flexrow">
|
||||||
|
<div class="combatant-controls flex-0">
|
||||||
{{#if @root.user.isGM}}
|
{{#if @root.user.isGM}}
|
||||||
<button type="button" class="inline-control combatant-control icon fa-solid fa-eye-slash {{#if hidden}}active{{/if}}"
|
<button type="button" class="inline-control combatant-control icon fa-solid fa-eye-slash {{#if hidden}}active{{/if}}"
|
||||||
data-action="toggleHidden" data-tooltip aria-label="{{ localize "COMBAT.ToggleVis" }}"></button>
|
data-action="toggleHidden" data-tooltip aria-label="{{ localize "COMBAT.ToggleVis" }}"></button>
|
||||||
|
|
@ -27,21 +28,7 @@
|
||||||
data-action="panToCombatant" data-tooltip
|
data-action="panToCombatant" data-tooltip
|
||||||
aria-label="{{ localize "COMBAT.PanToCombatant" }}"></button>
|
aria-label="{{ localize "COMBAT.PanToCombatant" }}"></button>
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
{{!-- TODO: Target Control --}}
|
|
||||||
<div class="token-effects" data-tooltip-html="{{ effects.tooltip }}">
|
|
||||||
{{#each effects.icons}}
|
|
||||||
<img class="token-effect" src="{{ img }}" alt="{{ name }}">
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{!-- Resource --}}
|
|
||||||
{{#if resource includeZero=true}}
|
|
||||||
<div class="token-resource">
|
|
||||||
<span class="resource">{{ resource }}</span>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if ../combat.round}}
|
{{#if ../combat.round}}
|
||||||
<div class="token-actions">
|
<div class="token-actions">
|
||||||
|
|
@ -54,21 +41,23 @@
|
||||||
{{/times}}
|
{{/times}}
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{#if @root.user.isGM}}
|
{{#if @root.user.isGM}}
|
||||||
<button
|
<button
|
||||||
type="button" class="inline-control combatant-control discrete icon fa-solid {{#if system.spotlight.requesting}}fa-hand-sparkles requesting{{else}}fa-hand{{/if}}"
|
type="button" class="inline-control spotlight-control discrete icon fa-solid {{#if system.spotlight.requesting}}fa-hand-sparkles requesting{{else}}fa-hand{{/if}}"
|
||||||
data-action="toggleSpotlight" data-combatant-id="{{id}}" data-tooltip aria-label="{{localize "DAGGERHEART.Combat.giveSpotlight"}}"
|
data-action="toggleSpotlight" data-combatant-id="{{id}}" data-tooltip aria-label="{{localize "DAGGERHEART.Combat.giveSpotlight"}}"
|
||||||
></button>
|
></button>
|
||||||
{{else}}
|
{{else}}
|
||||||
<button
|
<button
|
||||||
type="button" class="inline-control combatant-control discrete icon fa-solid {{#if system.spotlight.requesting}}fa-hand-sparkles requesting{{else}}fa-hand{{/if}}"
|
type="button" class="inline-control spotlight-control discrete icon fa-solid {{#if system.spotlight.requesting}}fa-hand-sparkles requesting{{else}}fa-hand{{/if}}"
|
||||||
data-action="requestSpotlight" data-combatant-id="{{id}}" data-tooltip aria-label="{{#if system.spotlight.requesting}}{{localize "DAGGERHEART.Combat.requestingSpotlight"}}{{else}}{{localize "DAGGERHEART.Combat.requestSpotlight"}}{{/if}}"
|
data-action="requestSpotlight" data-combatant-id="{{id}}" data-tooltip aria-label="{{#if system.spotlight.requesting}}{{localize "DAGGERHEART.Combat.requestingSpotlight"}}{{else}}{{localize "DAGGERHEART.Combat.requestSpotlight"}}{{/if}}"
|
||||||
></button>
|
></button>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</li>
|
</li>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue