cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-07 13:24:16 +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 { .attribution-header-label {
font-style: italic; font-style: italic;
font-family: @font-body; font-family: @font-body;
color: light-dark(@chat-blue-bg, @beige-50); color: @color-text-subtle;
} }
.tab.inventory { .tab.inventory {

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

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

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

@ -5,10 +5,6 @@
.appTheme({ .appTheme({
&.environment { &.environment {
background-image: url('../assets/parchments/dh-parchment-dark.png'); background-image: url('../assets/parchments/dh-parchment-dark.png');
.attribution-header-label {
background-image: url('../assets/parchments/dh-parchment-dark.png');
}
} }
}, { }, {
&.environment { &.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%); --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); --primary-color-fear: rgba(9, 71, 179, 0.75);
--dh-color-text-subtle: light-dark(#555, #a29086);
} }
@primary-blue: var(--primary-blue, #1488cc); @primary-blue: var(--primary-blue, #1488cc);
@ -190,3 +192,5 @@
box-shadow: 0 0 2px 2px @dark-blue; box-shadow: 0 0 2px 2px @dark-blue;
} }
} }
@color-text-subtle: var(--dh-color-text-subtle);

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

@ -1,9 +1,20 @@
<header class='environment-header-sheet'> <header class='environment-header-sheet'>
<img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' /> <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
<div class='item-container'> <div class='item-container'>
<div class="item-info">
<h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1> <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
<div class="flexcol"> <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="flexrow">
<div class="tags"> <div class="tags">
<div class="tag"> <div class="tag">
<span> <span>
@ -23,19 +34,6 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
<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>
<line-div></line-div> <line-div></line-div>
<div class="environment-info"> <div class="environment-info">
<span class="description"> <span class="description">