From ea40be45d35f3b9be819adc956158ecae0f8fd45 Mon Sep 17 00:00:00 2001 From: moliloo Date: Fri, 1 Aug 2025 01:12:42 -0300 Subject: [PATCH] add style to textarea element, add spellcasting and domain class into char sheet and move rest buttons to another place --- styles/less/global/elements.less | 15 ++- .../adversary-settings/experiences.less | 6 + .../less/sheets/actors/character/header.less | 76 +++++++----- .../less/sheets/actors/character/sidebar.less | 116 ++++++++++++++---- .../character-settings/experiences.hbs | 1 - templates/sheets/actors/character/header.hbs | 31 ++--- templates/sheets/actors/character/sidebar.hbs | 20 ++- 7 files changed, 196 insertions(+), 69 deletions(-) diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less index 1bdc105e..e6e88d97 100755 --- a/styles/less/global/elements.less +++ b/styles/less/global/elements.less @@ -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); diff --git a/styles/less/sheets-settings/adversary-settings/experiences.less b/styles/less/sheets-settings/adversary-settings/experiences.less index 438a9d67..dab261a6 100644 --- a/styles/less/sheets-settings/adversary-settings/experiences.less +++ b/styles/less/sheets-settings/adversary-settings/experiences.less @@ -9,6 +9,12 @@ margin-bottom: 12px; } + .experience-list { + display: flex; + flex-direction: column; + gap: 15px; + } + .experience-item { display: flex; flex-direction: column; diff --git a/styles/less/sheets/actors/character/header.less b/styles/less/sheets/actors/character/header.less index 05a951e8..d25d4ebf 100644 --- a/styles/less/sheets/actors/character/header.less +++ b/styles/less/sheets/actors/character/header.less @@ -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; - } - } } } diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less index 7cfeffac..61f8cc70 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/styles/less/sheets/actors/character/sidebar.less @@ -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; + } } } } diff --git a/templates/sheets-settings/character-settings/experiences.hbs b/templates/sheets-settings/character-settings/experiences.hbs index 9aebc2c3..ef31c1cd 100644 --- a/templates/sheets-settings/character-settings/experiences.hbs +++ b/templates/sheets-settings/character-settings/experiences.hbs @@ -17,7 +17,6 @@ {{#unless @root.levelupAuto}}{{/unless}} - {{/each}} diff --git a/templates/sheets/actors/character/header.hbs b/templates/sheets/actors/character/header.hbs index cfb4e079..52991cb8 100644 --- a/templates/sheets/actors/character/header.hbs +++ b/templates/sheets/actors/character/header.hbs @@ -85,12 +85,23 @@ {{/times}} -
-

{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}

-

{{document.system.damageThresholds.major}}

-

{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}

-

{{document.system.damageThresholds.severe}}

-

{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}

+ {{#if document.system.class.value}} +
+ {{#each document.system.class.value.system.domains as |domain|}} +
+ {{localize (concat 'DAGGERHEART.GENERAL.Domain.' domain '.label')}} + +
+ {{/each}} +
+ {{/if}} +
+ +
@@ -118,13 +129,5 @@ {{#> 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}} -
- - -
{{/'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}} \ No newline at end of file diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs index 387ad89b..08c211ca 100644 --- a/templates/sheets/actors/character/sidebar.hbs +++ b/templates/sheets/actors/character/sidebar.hbs @@ -1,6 +1,17 @@