cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-18 16:09:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add style to textarea element, add spellcasting and domain class into char sheet and move rest buttons to another place

Browse source
This commit is contained in:
moliloo 2025-08-01 01:12:42 -03:00
parent 870fb32c40
commit ea40be45d3
7 changed files with 196 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

15
styles/less/global/elements.less
View file

@ -5,22 +5,26 @@
border: 1px solid light-dark(@dark-blue, @golden);
input[type='text'],
input[type='number'] {
input[type='number'],
textarea {
background: light-dark(transparent, transparent);
border-radius: 6px;
box-shadow: 0 4px 30px @soft-shadow;
backdrop-filter: blur(9.5px);
-webkit-backdrop-filter: blur(9.5px);
outline: none;
outline: 2px solid transparent;
color: light-dark(@dark-blue, @golden);
border: 1px solid light-dark(@dark, @beige);
transition: all 0.3s ease;
&::placeholder {
color: light-dark(@dark-40, @beige-50);
}
&:hover,
&:hover[type='text'],
&:hover[type='number'],
&:focus,
&:focus[type='text'],
&:focus[type='number'] {
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
@ -70,6 +74,13 @@
}
}
textarea {
color: light-dark(@dark, @beige);
font-family: @font-body;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
}
button {
background: light-dark(transparent, @golden);
border: 1px solid light-dark(@dark-blue, @dark-blue);

6
styles/less/sheets-settings/adversary-settings/experiences.less
View file

@ -9,6 +9,12 @@
margin-bottom: 12px;
}
.experience-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.experience-item {
display: flex;
flex-direction: column;

76
styles/less/sheets/actors/character/header.less
View file

@ -4,12 +4,24 @@
// Theme header backgrounds
.appTheme({
.character-header-sheet .trait {
background: url(../assets/svg/trait-shield.svg) no-repeat;
.character-header-sheet {
.trait {
background: url(../assets/svg/trait-shield.svg) no-repeat;
}
.character-row .domains-section img {
filter: invert(88%) sepia(98%) saturate(1784%) hue-rotate(311deg) brightness(104%) contrast(91%);
}
}
}, {
.character-header-sheet .trait {
.character-header-sheet {
.trait {
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
}
.character-row .domains-section img {
filter: invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
}
}
});
@ -112,14 +124,27 @@
.character-row {
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
padding: 0;
margin-bottom: 15px;
.hope-section {
margin-right: 20px;
}
.downtime-section {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
button {
flex: 1;
}
}
.hope-section,
.threshold-section {
.domains-section {
position: relative;
display: flex;
gap: 10px;
@ -137,21 +162,24 @@
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
&.threshold-value {
color: light-dark(@dark, @beige);
}
}
.threshold-legend {
position: absolute;
bottom: -21px;
color: light-dark(@golden, @dark-blue);
background-color: light-dark(@dark-blue, @golden);
padding: 3px;
justify-self: anchor-center;
border-radius: 0 0 3px 3px;
text-transform: capitalize;
.domain {
display: flex;
align-items: center;
gap: 5px;
.label {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
}
img {
height: 20px;
width: 20px;
}
}
.hope-value {
@ -198,15 +226,5 @@
}
}
}
.character-downtime-container {
display: flex;
align-items: center;
gap: 2px;
button {
flex: 1;
}
}
}
}

116
styles/less/sheets/actors/character/sidebar.less
View file

@ -55,6 +55,62 @@
}
}
}
.icons-list {
position: absolute;
display: flex;
flex-direction: column;
gap: 5px;
align-items: end;
justify-content: center;
top: 45px;
right: 10px;
.spellcast-icon {
display: flex;
align-items: center;
justify-content: end;
text-align: center;
padding-right: 8px;
max-width: 50px;
height: 50px;
font-size: 1.2rem;
background: light-dark(@dark-blue-60, @dark-golden-80);
backdrop-filter: blur(8px);
border: 4px double light-dark(@beige, @golden);
color: light-dark(@beige, @golden);
border-radius: 999px;
transition: all 0.3s ease;
.spellcast-label {
font-size: 14px;
opacity: 0;
margin-right: 0.3rem;
transition: all 0.3s ease;
}
i {
height: 24px;
width: 24px;
align-content: center;
margin-right: 3px;
}
&:not(.no-label):hover {
max-width: 300px;
padding: 0 10px;
border-radius: 60px;
.spellcast-label {
opacity: 1;
}
i {
margin-right: 0px;
}
}
}
}
}
.info-section {
@ -62,12 +118,13 @@
display: flex;
flex-direction: column;
top: -20px;
gap: 30px;
gap: 10px;
margin-bottom: -16px;
.resources-section {
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
.status-bar {
display: flex;
@ -345,6 +402,32 @@
}
}
}
.threshold-section {
position: relative;
display: flex;
align-self: center;
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;
h4 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
&.threshold-value {
color: light-dark(@dark, @beige);
}
}
}
}
.items-sidebar-list {
@ -360,7 +443,7 @@
.shortcut-items-section {
overflow-y: hidden;
max-height: 56%;
padding-top: 16px;
padding-top: 10px;
padding-bottom: 20px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
@ -393,35 +476,24 @@
.experience-row {
display: flex;
gap: 5px;
width: 250px;
align-items: center;
justify-content: space-between;
input[type='text'] {
height: 32px;
width: 180px;
border: 1px solid transparent;
outline: 2px solid transparent;
.experience-value {
height: 25px;
width: 35px;
font-size: 14px;
font-family: @font-body;
transition: all 0.3s ease;
color: light-dark(@dark, @beige);
&:hover {
outline: 2px solid light-dark(@dark, @beige);
}
align-content: center;
text-align: center;
margin-right: 5px;
}
}
.experience-value {
height: 25px;
width: 35px;
font-size: 14px;
font-family: @font-body;
color: light-dark(@dark, @beige);
align-content: center;
text-align: center;
.controls {
margin-left: auto;
}
}
}
}

1
templates/sheets-settings/character-settings/experiences.hbs
View file

@ -17,7 +17,6 @@
<input class="modifier" type="text" name="system.experiences.{{key}}.value" value="{{experience.value}}" data-dtype="Number" />
{{#unless @root.levelupAuto}}<a data-action="removeExperience" data-experience="{{key}}" data-tooltip="{{localize 'CONTROLS.CommonDelete'}}"><i class="fa-solid fa-trash"></i></a>{{/unless}}
</div>
<textarea name="system.experiences.{{key}}.description">{{experience.description}}</textarea>
</li>
{{/each}}

31
templates/sheets/actors/character/header.hbs
View file

@ -85,12 +85,23 @@
</span>
{{/times}}
</div>
<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>
{{#if document.system.class.value}}
<div class="domains-section">
{{#each document.system.class.value.system.domains as |domain|}}
<div class="domain">
<span class="label">{{localize (concat 'DAGGERHEART.GENERAL.Domain.' domain '.label')}}</span>
<img src="{{concat 'systems/daggerheart/assets/icons/domains/' domain '.svg'}}" alt="">
</div>
{{/each}}
</div>
{{/if}}
<div class="downtime-section">
<button type="button" data-action="useDowntime" data-type="shortRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.shortRest.title"}}">
<i class="fa-solid fa-utensils"></i>
</button>
<button type="button" data-action="useDowntime" data-type="longRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.longRest.title"}}">
<i class="fa-solid fa-bed"></i>
</button>
</div>
</div>
@ -118,13 +129,5 @@
{{#> 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
<button data-action="openSettings" data-tooltip-text="{{localize "DAGGERHEART.UI.Tooltip.openSheetSettings"}}"><i class="fa-solid fa-wrench"></i></button>
<div class="character-downtime-container">
<button type="button" data-action="useDowntime" data-type="shortRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.shortRest.title"}}">
<i class="fa-solid fa-chair"></i>
</button>
<button type="button" data-action="useDowntime" data-type="longRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.longRest.title"}}">
<i class="fa-solid fa-bed"></i>
</button>
</div>
{{/'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
</header>

20
templates/sheets/actors/character/sidebar.hbs
View file

@ -1,6 +1,17 @@
<aside class="character-sidebar-sheet">
<div class="portrait {{#if isDeath}}death-roll{{/if}}">
<img src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
{{#if document.system.class.subclass.system.spellcastingTrait}}
<div class="icons-list">
<span class="spellcast-icon {{#if isDeath}}no-label{{/if}}">
<span class="spellcast-label">
{{localize "DAGGERHEART.ITEMS.Subclass.spellcastingTrait"}}:
{{localize (concat 'DAGGERHEART.CONFIG.Traits.' document.system.class.subclass.system.spellcastingTrait '.short')}}
</span>
<i class="fa-solid fa-wand-sparkles"></i>
</span>
</div>
{{/if}}
<a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
isDeath}}data-action="makeDeathMove" {{/if}}><i class="fas fa-skull death-save"></i></a>
</div>
@ -87,6 +98,13 @@
</div>
</div>
</div>
<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 class="shortcut-items-section">
@ -146,7 +164,7 @@
<div class="experience-value">
+{{experience.value}}
</div>
<div>{{experience.name}}</div>
<span>{{experience.name}}</span>
<div class="controls">
<a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
<i class="fa-regular fa-message"></i>