mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 03:31:07 +01:00
style limited sheets
This commit is contained in:
moliloo
parent
11baedebb7
commit
86297bd14b
6 changed files with 319 additions and 8 deletions
|
|
@ -69,6 +69,7 @@ export default class AdversarySheet extends DHBaseActorSheet {
|
|||
context = await super._preparePartContext(partId, context, options);
|
||||
switch (partId) {
|
||||
case 'header':
|
||||
case 'limited':
|
||||
await this._prepareHeaderContext(context, options);
|
||||
|
||||
const adversaryTypes = CONFIG.DH.ACTOR.allAdversaryTypes();
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
@import '../../utils/fonts.less';
|
||||
@import '../../utils/colors.less';
|
||||
@import '../../utils/mixin.less';
|
||||
|
||||
.appTheme({
|
||||
.limited-container {
|
||||
.domains-section img {
|
||||
filter: @golden-filter;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
.limited-container {
|
||||
|
||||
.domains-section img {
|
||||
filter: brightness(0) saturate(100%);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style {
|
||||
.portrait img,
|
||||
.profile {
|
||||
|
|
@ -24,11 +43,12 @@
|
|||
&.environment,
|
||||
&.companion {
|
||||
width: 360px !important;
|
||||
height: auto !important;
|
||||
height: max-content !important;
|
||||
|
||||
.window-content {
|
||||
display: unset;
|
||||
padding-bottom: 20px;
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
}
|
||||
|
||||
.limited-container {
|
||||
|
|
@ -39,23 +59,169 @@
|
|||
gap: 8px;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top: -36px;
|
||||
margin-bottom: -30px;
|
||||
|
||||
.profile {
|
||||
width: 275px;
|
||||
width: 100%;
|
||||
max-height: 275px;
|
||||
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
text-align: start;
|
||||
font-size: var(--font-size-28);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.character-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
.basic-info,
|
||||
.multiclass {
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.domain-details,
|
||||
.bio-details,
|
||||
.partner-details {
|
||||
margin-top: 10px;
|
||||
|
||||
.domain-header,
|
||||
.bio-header,
|
||||
.partner-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-20);
|
||||
}
|
||||
}
|
||||
|
||||
.items-list {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.partner-placeholder {
|
||||
display: flex;
|
||||
opacity: 0.6;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.domains-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
padding: 5px 10px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
height: 30px;
|
||||
place-self: center;
|
||||
margin-top: 10px;
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
.domain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.label {
|
||||
font-size: var(--font-size-14);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bio-list {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.bio-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
min-width: 90px;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
background-color: light-dark(@dark-blue-10, @golden-40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.level-details {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-bottom: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
<div class="limited-container">
|
||||
<header>
|
||||
<img class="profile" src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
<h2 class="title-name">{{document.name}}</h2>
|
||||
<h1 class="title-name">{{document.name}}</h1>
|
||||
</header>
|
||||
|
||||
<div class="tags">
|
||||
<div class="tag">
|
||||
<span>
|
||||
{{localize (concat 'DAGGERHEART.GENERAL.Tiers.' source.system.tier)}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{adversaryType}}</span>
|
||||
</div>
|
||||
{{#if (eq source.system.type 'horde')}}
|
||||
<div class="tag">
|
||||
<span>{{source.system.hordeHp}}</span>
|
||||
<span>/{{localize "DAGGERHEART.GENERAL.HitPoints.short"}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="description">{{{document.system.description}}}</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,97 @@
|
|||
<div class="limited-container">
|
||||
<header>
|
||||
<img class="profile" src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
<h2 class="title-name">{{document.name}}</h2>
|
||||
<h1 class="title-name">{{document.name}}</h1>
|
||||
</header>
|
||||
<div class="character-details">
|
||||
<div class="basic-info">
|
||||
{{#if document.system.class.value}}
|
||||
<span data-action="editDoc" data-item-uuid="{{document.system.class.value.uuid}}">{{document.system.class.value.name}}</span>
|
||||
{{else}}
|
||||
<span class="missing-header-feature" data-action="openPack" data-key="classes">{{localize 'TYPES.Item.class'}}</span>
|
||||
{{/if}}
|
||||
<span class="dot">•</span>
|
||||
{{#if document.system.class.subclass}}
|
||||
<span data-action="editDoc" data-item-uuid="{{document.system.class.subclass.uuid}}">{{document.system.class.subclass.name}}</span>
|
||||
{{else}}
|
||||
<span class="missing-header-feature" data-action="openPack" data-key="subclasses">{{localize 'TYPES.Item.subclass'}}</span>
|
||||
{{/if}}
|
||||
<span class="dot">•</span>
|
||||
{{#if document.system.community}}
|
||||
<span data-action="editDoc" data-item-uuid="{{document.system.community.uuid}}">{{document.system.community.name}}</span>
|
||||
{{else}}
|
||||
<span class="missing-header-feature" data-action="openPack" data-key="communities">{{localize 'TYPES.Item.community'}}</span>
|
||||
{{/if}}
|
||||
<span class="dot">•</span>
|
||||
{{#if document.system.ancestry}}
|
||||
<span data-action="editDoc" data-item-uuid="{{document.system.ancestry.uuid}}">{{document.system.ancestry.name}}</span>
|
||||
{{else}}
|
||||
<span class="missing-header-feature" data-action="openPack" data-key="ancestries">{{localize 'TYPES.Item.ancestry'}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if document.system.multiclass.value}}
|
||||
<div class="multiclass">
|
||||
{{#if document.system.multiclass.value}}
|
||||
<span data-action="editDoc"data-item-uuid="{{document.system.multiclass.value.uuid}}">{{document.system.multiclass.value.name}}</span>
|
||||
{{else}}
|
||||
<span data-action="openPack" data-key="classes">{{localize 'DAGGERHEART.GENERAL.multiclass'}}</span>
|
||||
{{/if}}
|
||||
<span class="dot">•</span>
|
||||
{{#if document.system.multiclass.subclass}}
|
||||
<span data-action="editDoc" data-item-uuid="{{document.system.multiclass.subclass.uuid}}">{{document.system.multiclass.subclass.name}}</span>
|
||||
{{else}}
|
||||
<span class="missing-header-feature" data-action="openPack" data-key="subclasses">{{localize 'TYPES.Item.subclass'}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<h3 class="level-details">
|
||||
{{localize 'DAGGERHEART.GENERAL.level'}}
|
||||
{{document.system.levelData.level.changed}}
|
||||
</h3>
|
||||
<div class="domain-details">
|
||||
<div class="domain-header">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.Domain.plural"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
{{#if document.system.class.value}}
|
||||
<div class="domains-section">
|
||||
{{#each document.system.domainData as |data|}}
|
||||
<div class="domain">
|
||||
<img src="{{data.src}}" alt="" data-tooltip="{{data.description}}" />
|
||||
<span>{{data.label}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="bio-details">
|
||||
<div class="bio-header">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.Tabs.biography"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
<div class="bio-list">
|
||||
{{#if source.system.biography.characteristics.pronouns}}
|
||||
<div class="bio-info">
|
||||
<span>{{localize 'DAGGERHEART.ACTORS.Character.pronouns'}}</span>
|
||||
<span>{{source.system.biography.characteristics.pronouns}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if source.system.biography.characteristics.age}}
|
||||
<div class="bio-info">
|
||||
<span>{{localize 'DAGGERHEART.ACTORS.Character.age'}}</span>
|
||||
<span>{{source.system.biography.characteristics.age}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if source.system.biography.characteristics.faith}}
|
||||
<div class="bio-info">
|
||||
<span>{{localize 'DAGGERHEART.ACTORS.Character.faith'}}</span>
|
||||
<span>{{source.system.biography.characteristics.faith}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,31 @@
|
|||
<div class="limited-container">
|
||||
<header>
|
||||
<img class="profile" src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
<h2 class="title-name">{{document.name}}</h2>
|
||||
<h1 class="title-name">{{document.name}}</h1>
|
||||
</header>
|
||||
<h3 class="level-details">
|
||||
{{localize 'DAGGERHEART.GENERAL.level'}}
|
||||
{{document.system.levelData.level.changed}}
|
||||
</h3>
|
||||
<div class="partner-details">
|
||||
<div class="partner-header">
|
||||
<side-line-div class="invert"></side-line-div>
|
||||
<h3>{{localize "DAGGERHEART.GENERAL.partner"}}</h3>
|
||||
<side-line-div></side-line-div>
|
||||
</div>
|
||||
{{#if document.system.partner}}
|
||||
<ul class="items-list">
|
||||
{{> 'daggerheart.inventory-item'
|
||||
item=document.system.partner
|
||||
type='companion'
|
||||
hideTags=true
|
||||
hideDescription=true
|
||||
isActor=true
|
||||
hideTooltip=true
|
||||
}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<span class="partner-placeholder">{{localize "DAGGERHEART.ACTORS.Companion.noPartner"}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,21 @@
|
|||
<div class="limited-container">
|
||||
<header>
|
||||
<img class="profile" src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
|
||||
<h2 class="title-name">{{document.name}}</h2>
|
||||
<h1 class="title-name">{{document.name}}</h1>
|
||||
</header>
|
||||
|
||||
<div class="tags">
|
||||
<div class="tag">
|
||||
<span>
|
||||
{{localize (concat 'DAGGERHEART.GENERAL.Tiers.' source.system.tier)}}
|
||||
</span>
|
||||
</div>
|
||||
{{#if source.system.type}}
|
||||
<div class="tag">
|
||||
<span>
|
||||
{{localize (concat 'DAGGERHEART.CONFIG.EnvironmentType.' source.system.type '.label')}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="description">{{{document.system.description}}}</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue