cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-05 20:34:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add visual adjustments to environment header

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-24 03:26:28 -04:00
parent e4a3f105dc
commit d9caec72e1
5 changed files with 74 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/less/sheets/actors/actor-sheet-shared.less
View file

@ -34,7 +34,7 @@
.attribution-header-label {
font-style: italic;
font-family: @font-body;
color: light-dark(@chat-blue-bg, @beige-50);
color: @color-text-subtle;
}
.tab.inventory {

90
styles/less/sheets/actors/environment/header.less
View file

@ -10,60 +10,62 @@
.profile {
height: 235px;
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
mask-image: linear-gradient(0deg, transparent 0%, black 20%);
cursor: pointer;
}
.item-container {
display: flex;
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr min-content;
align-items: center;
position: relative;
top: -45px;
gap: 20px;
top: -40px;
gap: 0 var(--spacer-12);
padding: 0 20px;
margin-bottom: -30px;
.item-info {
.flexrow {
align-items: baseline;
grid-column: span 2;
}
.tags {
display: flex;
flex-direction: column;
gap: 8px;
gap: 10px;
padding-bottom: 0;
flex: 0;
.tags {
.tag {
display: flex;
gap: 10px;
padding-bottom: 0;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: var(--font-size-12);
font: @font-body;
white-space: nowrap;
.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);
}
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
border-radius: 3px;
}
.attribution-header-label {
text-align: left;
position: relative;
top: 4px;
margin-bottom: -6px;
.label {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: var(--font-size-12);
}
}
.attribution-header-label {
text-align: right;
position: relative;
}
.status-number {
display: flex;
align-items: center;
@ -81,7 +83,7 @@
font-size: 1.2rem;
align-items: center;
justify-content: center;
background: light-dark(transparent, @dark-blue);
background: light-dark(#e8e6e3, @dark-blue);
z-index: 2;
&.armor-slots {
@ -93,7 +95,7 @@
.status-label {
padding: 2px 10px;
width: 100%;
border-radius: 3px;
border-radius: 0 0 3px 3px;
background: light-dark(@dark-blue, @golden);
h4 {
@ -108,12 +110,15 @@
.item-name {
input[type='text'] {
border: 1px solid transparent;
background-color: light-dark(@dark-15, @light-black);
font-size: var(--font-size-32);
height: 42px;
text-align: start;
transition: all 0.3s ease;
outline: 2px solid transparent;
border: 1px solid transparent;
text-shadow: 1px 1px 2px light-dark(@soft-white-shadow, @light-black);
padding-left: 0;
&:hover[type='text'],
&:focus[type='text'] {
@ -127,15 +132,18 @@
.environment-info {
display: flex;
flex-direction: column;
gap: 12px;
gap: var(--spacer-8);
padding: 10px 20px;
}
.environment-navigation {
display: flex;
gap: 20px;
align-items: center;
align-items: baseline;
padding: 0 20px;
.tab-navigation {
margin-top: 0;
}
}
}
}

4
styles/less/sheets/actors/environment/sheet.less
View file

@ -5,10 +5,6 @@
.appTheme({
&.environment {
background-image: url('../assets/parchments/dh-parchment-dark.png');
.attribution-header-label {
background-image: url('../assets/parchments/dh-parchment-dark.png');
}
}
}, {
&.environment {

4
styles/less/utils/colors.less
View file

@ -83,6 +83,8 @@
--gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
--primary-color-fear: rgba(9, 71, 179, 0.75);
--dh-color-text-subtle: light-dark(#555, #a29086);
}
@primary-blue: var(--primary-blue, #1488cc);
@ -190,3 +192,5 @@
box-shadow: 0 0 2px 2px @dark-blue;
}
}
@color-text-subtle: var(--dh-color-text-subtle);

42
templates/sheets/actors/environment/header.hbs
View file

@ -1,28 +1,7 @@
<header class='environment-header-sheet'>
<img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
<div class='item-container'>
<div class="item-info">
<h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
<div class="flexcol">
<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>
{{#if (and showAttribution document.system.attributionLabel)}}
<label class="attribution-header-label">{{document.system.attributionLabel}}</label>
{{/if}}
</div>
</div>
<h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
<div class="status-number">
<div class='status-value armor-slots'>
{{#if source.system.difficulty}}
@ -35,6 +14,25 @@
<h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
</div>
</div>
<div class="flexrow">
<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>
{{#if (and showAttribution document.system.attributionLabel)}}
<label class="attribution-header-label">{{document.system.attributionLabel}}</label>
{{/if}}
</div>
</div>
<line-div></line-div>
<div class="environment-info">