Layout change

This commit is contained in:
WBHarry 2025-06-07 00:03:01 +02:00
parent 19a71a6a7f
commit d79249076d
3 changed files with 76 additions and 73 deletions

View file

@ -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);
} }

View file

@ -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;

View file

@ -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>