Styling pass for scrollbars, fieldsets, and scroll shadows

This commit is contained in:
Carlos Fernandez 2026-05-29 05:41:22 -04:00
parent 1ebbad4797
commit a15b82df36
37 changed files with 355 additions and 278 deletions

View file

@ -1,22 +1,22 @@
<section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
data-group='{{tabs.effects.group}}'>
<div class="effects-sections">
{{> 'daggerheart.inventory-items'
title='DAGGERHEART.GENERAL.activeEffects'
type='effect'
isGlassy=true
collection=effects.actives
canCreate=@root.editable
hideResources=true
}}
{{> 'daggerheart.inventory-items'
title='DAGGERHEART.GENERAL.inactiveEffects'
type='effect'
isGlassy=true
collection=effects.inactives
canCreate=@root.editable
hideResources=true
}}
</div>
<section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
data-group='{{tabs.effects.group}}'>
<div class="effects-sections scroll-container">
{{> 'daggerheart.inventory-items'
title='DAGGERHEART.GENERAL.activeEffects'
type='effect'
isGlassy=true
collection=effects.actives
canCreate=@root.editable
hideResources=true
}}
{{> 'daggerheart.inventory-items'
title='DAGGERHEART.GENERAL.inactiveEffects'
type='effect'
isGlassy=true
collection=effects.inactives
canCreate=@root.editable
hideResources=true
}}
</div>
</section>

View file

@ -1,14 +1,15 @@
<section class='tab {{tabs.features.cssClass}} {{tabs.features.id}}' data-tab='{{tabs.features.id}}'
data-group='{{tabs.features.group}}'>
<div class="feature-section">
{{> 'daggerheart.inventory-items'
title=tabs.features.label
type='feature'
collection=@root.features
hideContextMenu=true
hideModifyControls=true
canCreate=@root.editable
showActions=@root.editable
}}
<div class="feature-section scroll-container">
{{#each @root.features as |item|}}
{{> 'daggerheart.inventory-item'
item=item
type='feature'
actorType=@root.document.type
hideContextMenu=true
hideModifyControls=true
showActions=@root.editable
}}
{{/each}}
</div>
</section>
</section>

View file

@ -3,10 +3,7 @@
data-tab='{{tabs.notes.id}}'
data-group='{{tabs.notes.group}}'
>
<fieldset class="fit-height">
<legend>{{localize tabs.notes.label}}</legend>
{{formInput notes.field value=notes.value enriched=notes.enriched toggled=true}}
</fieldset>
{{formInput notes.field value=notes.value enriched=notes.enriched class="aaa" toggled=true}}
{{#if (and showAttribution document.system.attribution.artist)}}
<label class="artist-attribution">{{localize "DAGGERHEART.GENERAL.artistAttribution" artist=document.system.attribution.artist}}</label>

View file

@ -1,100 +1,102 @@
<aside class="adversary-sidebar-sheet">
<div class="portrait {{#if (and source.system.resources.hitPoints.max (gte source.system.resources.hitPoints.value source.system.resources.hitPoints.max))}}death-roll{{/if}}">
<img src="{{source.img}}" alt="{{source.name}}" data-action='editImage' data-edit="img">
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
</div>
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
<div class="resources-section">
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
</div>
<div class="status-section">
<div class="status-number">
<div class='status-value armor-slots'>
{{#if source.system.difficulty}}
<p>{{source.system.difficulty}}</p>
{{else}}
<p>-</p>
{{/if}}
</div>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
</div>
</div>
<div class="status-number">
<div class='status-value armor-slots'>
{{#if source.system.attack.roll.bonus includeZero=true}}
<p>{{numberFormat source.system.attack.roll.bonus sign=true}}</p>
{{else}}
<p>-</p>
{{/if}}
</div>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.attack"}}</h4>
</div>
</div>
{{#if (lt source.system.criticalThreshold 20)}}
<div class="status-number">
<div class='status-value armor-slots'>
<p>{{source.system.criticalThreshold}}+</p>
</div>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.criticalShort"}}</h4>
</div>
</div>
{{/if}}
</div>
<div class="status-section">
<div class="threshold-section">
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
<h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
</div>
</div>
</div>
<div class="shortcut-items-section">
<div class="attack-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.GENERAL.attack"}}</h3>
<side-line-div></side-line-div>
</div>
<ul class="items-sidebar-list">
{{> 'daggerheart.inventory-item-compact'
item=document.system.attack
type='attack'
noCompendiumEdit=true
}}
</ul>
</div>
<div class="experience-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.GENERAL.experience.plural"}}</h3>
<side-line-div></side-line-div>
</div>
<div class="experience-list">
{{#each source.system.experiences as |experience id|}}
<div class="experience-row" data-tooltip-text="{{experience.description}}">
<span class="experience-value">
+{{experience.value}}
</span>
<span class="experience-name">{{experience.name}}</span>
<div class="controls">
<a data-action="sendExpToChat" data-id="{{id}}">
<i class="fa-regular fa-message"></i>
</a>
</div>
</div>
{{/each}}
</div>
</div>
<line-div></line-div>
<div class="reaction-section">
<button type="button" data-action="reactionRoll">{{localize "DAGGERHEART.GENERAL.Roll.reaction"}}</button>
</div>
</div>
<aside class="adversary-sidebar-sheet">
<div class="portrait {{#if (and source.system.resources.hitPoints.max (gte source.system.resources.hitPoints.value source.system.resources.hitPoints.max))}}death-roll{{/if}}">
<img src="{{source.img}}" alt="{{source.name}}" data-action='editImage' data-edit="img">
<a class="death-roll-btn"><i class="fa-solid fa-skull death-save"></i></a>
</div>
<div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
<div class="resources-section">
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
{{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
</div>
<div class="status-section">
<div class="status-number">
<div class='status-value armor-slots'>
{{#if source.system.difficulty}}
<p>{{source.system.difficulty}}</p>
{{else}}
<p>-</p>
{{/if}}
</div>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
</div>
</div>
<div class="status-number">
<div class='status-value armor-slots'>
{{#if source.system.attack.roll.bonus includeZero=true}}
<p>{{numberFormat source.system.attack.roll.bonus sign=true}}</p>
{{else}}
<p>-</p>
{{/if}}
</div>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.attack"}}</h4>
</div>
</div>
{{#if (lt source.system.criticalThreshold 20)}}
<div class="status-number">
<div class='status-value armor-slots'>
<p>{{source.system.criticalThreshold}}+</p>
</div>
<div class="status-label">
<h4>{{localize "DAGGERHEART.GENERAL.criticalShort"}}</h4>
</div>
</div>
{{/if}}
</div>
<div class="status-section">
<div class="threshold-section">
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
<h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
</div>
</div>
</div>
<div class="shortcut-items-section">
<div class="attack-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.GENERAL.attack"}}</h3>
<side-line-div></side-line-div>
</div>
<ul class="items-sidebar-list">
{{> 'daggerheart.inventory-item-compact'
item=document.system.attack
type='attack'
noCompendiumEdit=true
}}
</ul>
</div>
<div class="experience-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>{{localize "DAGGERHEART.GENERAL.experience.plural"}}</h3>
<side-line-div></side-line-div>
</div>
<div class="experience-list">
{{#each source.system.experiences as |experience id|}}
<div class="experience-row" data-tooltip-text="{{experience.description}}">
<span class="experience-value">
+{{experience.value}}
</span>
<span class="experience-name">{{experience.name}}</span>
<div class="controls">
<a data-action="sendExpToChat" data-id="{{id}}">
<i class="fa-regular fa-message"></i>
</a>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div class="reaction-section">
<button type="button" data-action="reactionRoll">
<i class="fa-solid fa-dice"></i>
{{localize "DAGGERHEART.GENERAL.Roll.reaction"}}
</button>
</div>
</aside>

View file

@ -4,14 +4,15 @@
data-group='{{tabs.features.group}}'
>
<div class="feature-section">
{{> 'daggerheart.inventory-items'
title=tabs.features.label
type='feature'
collection=@root.features
hideContextMenu=true
hideModifyControls=true
canCreate=@root.editable
showActions=@root.editable
}}
{{#each @root.features as |item|}}
{{> 'daggerheart.inventory-item'
item=item
type='feature'
actorType=@root.document.type
hideContextMenu=true
hideModifyControls=true
showActions=@root.editable
}}
{{/each}}
</div>
</section>

View file

@ -3,10 +3,7 @@
data-tab='{{tabs.notes.id}}'
data-group='{{tabs.notes.group}}'
>
<fieldset class="fit-height">
<legend>{{localize tabs.notes.label}}</legend>
{{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
</fieldset>
{{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
{{#if (and showAttribution document.system.attribution.artist)}}
<label class="artist-attribution">{{localize "DAGGERHEART.GENERAL.artistAttribution" artist=document.system.attribution.artist}}</label>

View file

@ -3,8 +3,5 @@
data-tab='{{tabs.notes.id}}'
data-group='{{tabs.notes.group}}'
>
<fieldset class="fit-height">
<legend>{{localize tabs.notes.label}}</legend>
{{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
</fieldset>
{{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
</section>