From 1af86d87bb5a522308981e9cbb883434ef546c4d Mon Sep 17 00:00:00 2001 From: Carlos Fernandez Date: Wed, 1 Jul 2026 07:39:16 -0400 Subject: [PATCH] Refactor styling of sidebar resources (#2050) --- .../applications/sheets/actors/adversary.mjs | 7 +- .../applications/sheets/actors/character.mjs | 6 +- styles/less/global/resource-bar.less | 209 ++++--- .../less/sheets/actors/adversary/sidebar.less | 103 +--- .../less/sheets/actors/character/sidebar.less | 181 +----- .../sheets/actors/party/party-members.less | 560 +++++++++--------- templates/sheets/actors/character/sidebar.hbs | 302 +++++----- .../sheets/actors/party/party-members.hbs | 382 ++++++------ .../sheets/global/partials/resource-bar.hbs | 52 +- templates/ui/tooltip/armorManagement.hbs | 4 +- 10 files changed, 767 insertions(+), 1039 deletions(-) diff --git a/module/applications/sheets/actors/adversary.mjs b/module/applications/sheets/actors/adversary.mjs index 85380392..35612e69 100644 --- a/module/applications/sheets/actors/adversary.mjs +++ b/module/applications/sheets/actors/adversary.mjs @@ -58,12 +58,13 @@ export default class AdversarySheet extends DHBaseActorSheet { template: 'systems/daggerheart/templates/sheets/actors/adversary/features.hbs', scrollable: ['.feature-section'] }, - notes: { - template: 'systems/daggerheart/templates/sheets/actors/adversary/notes.hbs' - }, effects: { template: 'systems/daggerheart/templates/sheets/actors/adversary/effects.hbs', scrollable: ['.effects-sections'] + }, + notes: { + template: 'systems/daggerheart/templates/sheets/actors/adversary/notes.hbs', + scrollable: ['.editor-content'] } }; diff --git a/module/applications/sheets/actors/character.mjs b/module/applications/sheets/actors/character.mjs index 3a60e7ca..5006e9d6 100644 --- a/module/applications/sheets/actors/character.mjs +++ b/module/applications/sheets/actors/character.mjs @@ -1057,7 +1057,7 @@ export default class CharacterSheet extends DHBaseActorSheet { direction: 'DOWN' }); - html.querySelectorAll('.armor-slot').forEach(element => { + html.querySelectorAll('.armor .slot').forEach(element => { element.addEventListener('click', CharacterSheet.armorSourcePipUpdate); }); } @@ -1072,7 +1072,7 @@ export default class CharacterSheet extends DHBaseActorSheet { /** Update specific armor source */ static async armorSourcePipUpdate(event) { - const target = event.target.closest('.armor-slot'); + const target = event.target.closest('.slot'); const { uuid, value } = target.dataset; const document = await foundry.utils.fromUuid(uuid); @@ -1100,7 +1100,7 @@ export default class CharacterSheet extends DHBaseActorSheet { } const container = target.closest('.slot-bar'); - for (const armorSlot of container.querySelectorAll('.armor-slot i')) { + for (const armorSlot of container.querySelectorAll('.armor .slot i')) { const index = Number.parseInt(armorSlot.dataset.index); if (decreasing && index >= newCurrent) { armorSlot.classList.remove('fa-shield'); diff --git a/styles/less/global/resource-bar.less b/styles/less/global/resource-bar.less index d06b43a8..fb7f7d4e 100644 --- a/styles/less/global/resource-bar.less +++ b/styles/less/global/resource-bar.less @@ -9,111 +9,109 @@ } }); +/** Pips styling, can exist standalone even without a slot-value */ +.slot-bar { + display: flex; + gap: 4px; + padding: 5px; + border: 1px solid @color-border; + border-radius: 6px; + z-index: 1; + color: @color-text-emphatic; + width: fit-content; + min-height: 22px; + flex-wrap: wrap; + + .slot { + transition: all 0.3s ease; + cursor: pointer; + } + + .slot:not(:has(i)) { + width: 15px; + height: 10px; + border: 1px solid @color-border; + background: light-dark(@dark-blue-10, @golden-10); + border-radius: 3px; + + &.large { + width: 20px; + } + + &.filled { + background: light-dark(@dark-blue, @golden); + } + } + + &.armor .slot { + font-size: var(--font-size-12); + .fa-shield-halved { + color: light-dark(@dark-blue-40, @golden-40); + } + } + + .empty-slot { + width: 15px; + height: 10px; + } +} + +.slot-value { + display: flex; + flex-direction: column; + padding: 0 5px; + font-size: 1.5rem; + align-items: center; + justify-content: center; + text-align: center; + z-index: 2; + color: @beige; + + .slot-label { + display: flex; + align-items: center; + color: light-dark(@beige, @dark-blue); + background: light-dark(@dark-blue, @golden); + padding: 0 5px; + width: fit-content; + font-weight: bold; + border-radius: 0px 0px 5px 5px; + font-size: var(--font-size-12); + + .label { + padding-right: 5px; + } + + .value { + padding-left: 6px; + border-left: 1px solid light-dark(@beige, @dark-golden); + } + } +} + .status-bar { display: flex; - justify-content: center; + flex-direction: column; + align-items: center; position: relative; - width: 120px; - height: 40px; - - .status-label { - position: relative; - top: 40px; - height: 22px; - width: 79px; - clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z'); - background: light-dark(@dark-blue, @golden); - - h4 { - font-weight: bold; - text-align: center; - line-height: 18px; - color: light-dark(@beige, @dark-blue); - } - } - .slot-value { - position: absolute; - display: flex; - flex-direction: column; - padding: 0 5px; - font-size: 1.5rem; - align-items: center; - width: 140px; - height: 40px; - justify-content: center; - text-align: center; - z-index: 2; - color: @beige; - - .slot-bar { - display: flex; - flex-wrap: wrap; - gap: 5px; - padding: 5px; - border: 1px solid @color-border; - border-radius: 6px; - z-index: 1; - color: @color-text-emphatic; - width: fit-content; - - .slot { - width: 15px; - height: 10px; - border: 1px solid @color-border; - background: light-dark(@dark-blue-10, @golden-10); - border-radius: 3px; - transition: all 0.3s ease; - cursor: pointer; - - &.large { - width: 20px; - } - - &.filled { - background: light-dark(@dark-blue, @golden); - } - } - - .empty-slot { - width: 15px; - height: 10px; - } - } - .slot-label { - display: flex; - align-items: center; - color: light-dark(@beige, @dark-blue); - background: light-dark(@dark-blue, @golden); - padding: 0 5px; - width: fit-content; - font-weight: bold; - border-radius: 0px 0px 5px 5px; - font-size: var(--font-size-12); - - .label { - padding-right: 5px; - } - - .value { - padding-left: 6px; - border-left: 1px solid light-dark(@beige, @dark-golden); - } - } - } .status-value { - position: absolute; + position: relative; display: flex; padding: 0 5px; font-size: 1.5rem; align-items: center; - width: 140px; + width: 100px; height: 40px; justify-content: center; text-align: center; z-index: 2; color: @beige; + > * { + z-index: 1; + } + input[type='number'] { background: transparent; font-size: 1.5rem; @@ -146,11 +144,11 @@ .progress-bar { position: absolute; appearance: none; - width: 100px; - height: 40px; + width: 100%; + height: 100%; border: 1px solid @color-border; border-radius: 6px; - z-index: 1; + z-index: 0; background: @dark-blue; &::-webkit-progress-bar { @@ -175,4 +173,29 @@ border-radius: 6px; } } + .status-label { + position: relative; + height: 22px; + width: 79px; + background: light-dark(@dark-blue, @golden); + + &.pointy { + clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z'); + margin-bottom: -2px; // compensate for pointy bottom so spacing feels more "right" + } + + h4 { + font-weight: bold; + text-align: center; + line-height: 18px; + color: light-dark(@beige, @dark-blue); + } + } } + +// Overrides for sidebar usage. +aside[data-application-part="sidebar"] .resources-section .slot-bar { + display: grid; + grid-template-columns: repeat(6, min-content); + grid-auto-flow: row; +} \ No newline at end of file diff --git a/styles/less/sheets/actors/adversary/sidebar.less b/styles/less/sheets/actors/adversary/sidebar.less index 5db9f5e9..a2a3240a 100644 --- a/styles/less/sheets/actors/adversary/sidebar.less +++ b/styles/less/sheets/actors/adversary/sidebar.less @@ -106,7 +106,7 @@ display: flex; flex-direction: column; top: -20px; - gap: 16px; + gap: 10px; margin-bottom: -10px; &.pip-display { @@ -120,105 +120,6 @@ .resources-section { display: flex; justify-content: space-evenly; - margin-bottom: 16px; - - .status-bar { - display: flex; - justify-content: center; - position: relative; - width: 100px; - height: 40px; - - .status-label { - position: relative; - top: 40px; - height: 22px; - width: 79px; - clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z'); - background: light-dark(@dark-blue, @golden); - - h4 { - font-weight: bold; - text-align: center; - line-height: 18px; - color: light-dark(@beige, @dark-blue); - } - } - .status-value { - position: absolute; - display: flex; - padding: 0 6px; - font-size: 1.5rem; - align-items: center; - width: 100px; - height: 40px; - justify-content: center; - text-align: center; - z-index: 2; - color: @beige; - - input[type='number'] { - background: transparent; - font-size: 1.5rem; - width: 40px; - height: 30px; - text-align: center; - border: none; - outline: 2px solid transparent; - color: @beige; - - &.bar-input { - padding: 0; - color: @beige; - backdrop-filter: none; - background: transparent; - transition: all 0.3s ease; - - &:hover, - &:focus { - background: @semi-transparent-dark-blue; - backdrop-filter: blur(9.5px); - } - } - } - - .bar-label { - width: 40px; - } - } - .progress-bar { - position: absolute; - appearance: none; - width: 100px; - height: 40px; - border: 1px solid @color-border; - border-radius: 6px; - z-index: 1; - background: @dark-blue; - - &::-webkit-progress-bar { - border: none; - background: @dark-blue; - border-radius: 6px; - } - &::-webkit-progress-value { - background: @gradient-hp; - border-radius: 6px; - } - &.stress-color::-webkit-progress-value { - background: @gradient-stress; - border-radius: 6px; - } - &::-moz-progress-bar { - background: @gradient-hp; - border-radius: 6px; - } - &.stress-color::-moz-progress-bar { - background: @gradient-stress; - border-radius: 6px; - } - } - } } .status-section { @@ -256,7 +157,7 @@ .status-label { padding: 2px 10px; width: 100%; - border-radius: 3px; + border-radius: 0 0 3px 3px; background: light-dark(@dark-blue, @golden); h4 { diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less index c76ee9ff..66f09cfc 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/styles/less/sheets/actors/character/sidebar.less @@ -89,113 +89,13 @@ .resources-section { justify-content: space-around; - margin: 8px 2px 8px 2px; + margin: 8px 2px 0 2px; } } .resources-section { display: flex; justify-content: space-evenly; - margin-bottom: 20px; - - .status-bar { - display: flex; - justify-content: center; - position: relative; - width: 120px; - height: 40px; - - .status-label { - position: relative; - top: 40px; - height: 22px; - width: 79px; - clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z'); - background: light-dark(@dark-blue, @golden); - - h4 { - font-weight: bold; - text-align: center; - line-height: 18px; - color: light-dark(@beige, @dark-blue); - } - } - - .status-value { - position: absolute; - display: flex; - padding: 0 5px; - font-size: 1.5rem; - align-items: center; - width: 140px; - height: 40px; - justify-content: center; - text-align: center; - z-index: 2; - color: @beige; - - input[type='number'] { - background: transparent; - font-size: 1.5rem; - width: 40px; - height: 30px; - text-align: center; - border: none; - outline: 2px solid transparent; - color: @beige; - - &.bar-input { - padding: 0; - color: @beige; - backdrop-filter: none; - background: transparent; - transition: all 0.3s ease; - - &:hover, - &:focus { - background: @semi-transparent-dark-blue; - backdrop-filter: blur(9.5px); - } - } - } - - .bar-label { - width: 40px; - } - } - .progress-bar { - position: absolute; - appearance: none; - width: 100px; - height: 40px; - border: 1px solid @color-border; - border-radius: 6px; - z-index: 1; - background: @dark-blue; - - &::-webkit-progress-bar { - border: none; - background: @dark-blue; - border-radius: 6px; - } - &::-webkit-progress-value { - background: @gradient-hp; - border-radius: 6px; - } - &.stress-color::-webkit-progress-value { - background: @gradient-stress; - border-radius: 6px; - } - &::-moz-progress-bar { - background: @gradient-hp; - border-radius: 6px; - } - &.stress-color::-moz-progress-bar { - background: @gradient-stress; - border-radius: 6px; - } - } - } } .status-section { @@ -245,21 +145,21 @@ .status-bar.armor-slots { display: flex; - justify-content: center; - position: relative; width: 95px; - height: 30px; white-space: nowrap; + .status-label { + height: 30px; + } + .status-label { padding: 2px 2px; position: relative; - top: 30px; height: 22px; width: 95px; border-radius: 3px; background: light-dark(@dark-blue, @golden); - clip-path: none; + display: flex; align-items: center; justify-content: center; @@ -291,40 +191,16 @@ } } .slot-value { - position: absolute; - display: flex; - padding: 0 5px; font-size: 1.2rem; - align-items: center; width: 80px; height: 30px; - justify-content: center; - text-align: center; - z-index: 2; color: light-dark(@dark-blue, @beige); flex-direction: column; .slot-bar { - display: flex; - flex-wrap: wrap; - gap: 4px; - padding: 5px; - border: 1px solid @color-border; - border-radius: 6px; - z-index: 1; background: @dark-blue; justify-content: center; - color: @color-text-emphatic; - - .armor-slot { - cursor: pointer; - transition: all 0.3s ease; - font-size: var(--font-size-12); - - .fa-shield-halved { - color: light-dark(@dark-blue-40, @golden-40); - } - } + border-bottom: none; } .slot-label { display: flex; @@ -364,41 +240,21 @@ } } .status-value { - position: absolute; - display: flex; padding: 0 6px; font-size: 1.2rem; - align-items: center; width: 80px; height: 30px; justify-content: center; - text-align: center; - z-index: 2; color: light-dark(@dark-blue, @beige); - border: 1px solid @color-border; - border-bottom: none; - border-radius: 6px 6px 0 0; input[type='number'] { - background: transparent; font-size: 1.2rem; width: 30px; height: 20px; - text-align: center; - border: none; - outline: 2px solid transparent; color: light-dark(@dark-blue, @beige); &.bar-input { - padding: 0; color: light-dark(@dark-blue, @beige); - backdrop-filter: none; - background: transparent; - &:hover, - &:focus { - background: @semi-transparent-dark-blue; - backdrop-filter: blur(9.5px); - } } } @@ -407,32 +263,9 @@ } } .progress-bar { - position: absolute; - appearance: none; - width: 80px; - height: 30px; - border: 1px solid @color-border; - border-radius: 6px; - z-index: 1; background: light-dark(transparent, @dark-blue); border-bottom: none; border-radius: 6px 6px 0 0; - &::-webkit-progress-bar { - border: none; - background: light-dark(transparent, @dark-blue); - } - &::-webkit-progress-value { - background: @gradient-stress; - } - &.stress-color::-webkit-progress-value { - background: @gradient-stress; - } - &::-moz-progress-bar { - background: @gradient-stress; - } - &.stress-color::-moz-progress-bar { - background: @gradient-stress; - } } } diff --git a/styles/less/sheets/actors/party/party-members.less b/styles/less/sheets/actors/party/party-members.less index dc464291..2490757f 100644 --- a/styles/less/sheets/actors/party/party-members.less +++ b/styles/less/sheets/actors/party/party-members.less @@ -1,295 +1,265 @@ -@import '../../../utils/colors.less'; -@import '../../../utils/fonts.less'; -@import '../../../utils/mixin.less'; - -.application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers { - overflow: auto; - - .actors-list { - display: flex; - flex-direction: column; - gap: 8px; - align-items: stretch; - width: 100%; - - .actor-resources { - display: grid; - grid-template: - "img header" min-content - "img body" 1fr - / 7.5rem 1fr; - gap: 6px; - column-gap: 12px; - padding: 6px; - background-color: light-dark(@dark-blue-10, @golden-10); - - .actor-img-frame { - grid-area: img; - width: 7.375rem; - height: 7.375rem; - position: relative; - - .actor-img { - object-fit: cover; - object-position: top center; - border-radius: 6px; - width: 100%; - height: 100%; - } - - .equipped-weapons { - position: absolute; - top: -2px; - left: -3px; - display: flex; - flex-direction: column; - gap: 1px; - img { - border-radius: 50%; - width: 24px; - height: 24px; - border: 1px solid @color-border; - object-fit: cover; - } - } - - .evasion { - position: absolute; - top: 1px; - right: 1px; - width: 1.75rem; - height: 1.75rem; - background: url('../assets/svg/trait-shield.svg') no-repeat; - background-size: 100%; - color: var(--color-light-1); - font-size: var(--font-size-14); - font-weight: 700; - display: flex; - align-items: center; - justify-content: center; - } - - .threshold-section { - position: absolute; - left: 0; - right: 0; - bottom: -2px; - margin: auto; - - display: flex; - gap: 4px; - background-color: light-dark(var(--color-light-1), @dark-blue); - color: @color-text-emphatic; - padding: 4px 6px; - border: 1px solid @color-border; - border-radius: 3px; - align-items: baseline; - width: fit-content; - - h4 { - font-weight: bold; - text-transform: uppercase; - white-space: nowrap; - - &.threshold-label { - font-size: var(--font-size-10); - color: @color-text-emphatic; - } - - &.threshold-value { - font-size: var(--font-size-11); - color: light-dark(@dark, @beige); - } - } - } - } - - header { - grid-area: header; - display: grid; - grid-template: - "name hope" min-content - "subtitle subtitle" min-content - / 1fr min-content; - - .actor-name { - width: 100%; - z-index: 1; - font-size: var(--font-size-20); - color: @color-text-emphatic; - font-weight: bold; - } - - .delete-icon { - font-size: 0.75em; - } - - .subtitle { - grid-area: subtitle; - font-size: var(--font-size-14); - } - - .hope-section { - display: flex; - background-color: light-dark(transparent, @dark-blue); - color: @color-text-emphatic; - padding: 3px 6px; - border: 1px solid @color-border; - border-radius: 3px; - align-items: center; - width: fit-content; - margin-left: auto; - - h4 { - font-size: var(--font-size-12); - font-weight: bold; - text-transform: uppercase; - color: @color-text-emphatic; - margin-right: 3px; - } - - .hope-value { - display: flex; - cursor: pointer; - font-size: var(--font-size-12); - margin-left: 1px; - } - } - } - - .body { - grid-area: body; - display: flex; - align-items: start; - justify-content: space-between; - } - - .resources { - display: flex; - flex-direction: column; - gap: 4px; - - .slot-section { - display: flex; - flex-direction: row; - align-items: stretch; - - .slot-label { - display: flex; - align-items: center; - color: light-dark(@beige, @dark-blue); - background: light-dark(@dark-blue, @golden); - padding: 0 4px; - width: fit-content; - font-weight: bold; - border-radius: 6px 0px 0px 6px; - font-size: var(--font-size-12); - white-space: nowrap; - - .label { - padding-right: 2px; - } - - .value { - font-variant-numeric: tabular-nums; - .current { - display: inline-block; - text-align: end; - width: 2ch; - } - .max { - display: inline-block; - text-align: start; - width: 2ch; - } - } - } - - .slot-bar { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 4px; - - background-color: light-dark(@dark-blue-10, @dark-blue); - color: @color-text-emphatic; - padding: 2px 5px; - border: 1px solid @color-border; - border-radius: 0 6px 6px 0; - width: fit-content; - min-height: 22px; - - .armor-slot { - cursor: pointer; - transition: all 0.3s ease; - font-size: var(--font-size-12); - - .fa-shield-halved { - color: light-dark(@dark-blue-40, @golden-40); - } - } - - .slot { - width: 16px; - height: 10px; - border: 1px solid @color-border; - background: light-dark(@dark-blue-10, @golden-10); - border-radius: 3px; - transition: all 0.3s ease; - cursor: pointer; - - &.filled { - background: light-dark(@dark-blue, @golden); - } - } - } - } - } - - .traits { - background-color: light-dark(@dark-blue-10, @dark-blue); - border: 1px solid @color-border; - border-radius: 6px; - display: grid; - grid-template-columns: 1fr 1fr; - font-size: var(--font-size-12); - padding: 3px 4px; - gap: 3px 7px; - .trait { - display: flex; - justify-content: space-between; - gap: 3px; - .label { - color: @color-text-emphatic; - } - .value { - font-weight: 600; - } - } - } - } - } - - .actors-list.limited { - .actor-resources { - display: flex; - align-items: center; - } - .actor-img-frame { - width: 3rem; - height: 3rem; - } - } - - .actors-dragger { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: 100%; - height: 40px; - border: 1px dashed light-dark(@dark-blue-50, @beige-50); - border-radius: 3px; - color: light-dark(@dark-blue-50, @beige-50); - } -} +@import '../../../utils/colors.less'; +@import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; + +.application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers { + overflow: auto; + + .actors-list { + display: flex; + flex-direction: column; + gap: 8px; + align-items: stretch; + width: 100%; + + .actor-resources { + display: grid; + grid-template: + "img header" min-content + "img body" 1fr + / 7.5rem 1fr; + gap: 6px; + column-gap: 12px; + padding: 6px; + background-color: light-dark(@dark-blue-10, @golden-10); + + .actor-img-frame { + grid-area: img; + width: 7.375rem; + height: 7.375rem; + position: relative; + + .actor-img { + object-fit: cover; + object-position: top center; + border-radius: 6px; + width: 100%; + height: 100%; + } + + .equipped-weapons { + position: absolute; + top: -2px; + left: -3px; + display: flex; + flex-direction: column; + gap: 1px; + img { + border-radius: 50%; + width: 24px; + height: 24px; + border: 1px solid @color-border; + object-fit: cover; + } + } + + .evasion { + position: absolute; + top: 1px; + right: 1px; + width: 1.75rem; + height: 1.75rem; + background: url('../assets/svg/trait-shield.svg') no-repeat; + background-size: 100%; + color: var(--color-light-1); + font-size: var(--font-size-14); + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + } + + .threshold-section { + position: absolute; + left: 0; + right: 0; + bottom: -2px; + margin: auto; + + display: flex; + gap: 4px; + background-color: light-dark(var(--color-light-1), @dark-blue); + color: @color-text-emphatic; + padding: 4px 6px; + border: 1px solid @color-border; + border-radius: 3px; + align-items: baseline; + width: fit-content; + + h4 { + font-weight: bold; + text-transform: uppercase; + white-space: nowrap; + + &.threshold-label { + font-size: var(--font-size-10); + color: @color-text-emphatic; + } + + &.threshold-value { + font-size: var(--font-size-11); + color: light-dark(@dark, @beige); + } + } + } + } + + header { + grid-area: header; + display: grid; + grid-template: + "name hope" min-content + "subtitle subtitle" min-content + / 1fr min-content; + + .actor-name { + width: 100%; + z-index: 1; + font-size: var(--font-size-20); + color: @color-text-emphatic; + font-weight: bold; + } + + .delete-icon { + font-size: 0.75em; + } + + .subtitle { + grid-area: subtitle; + font-size: var(--font-size-14); + } + + .hope-section { + display: flex; + background-color: light-dark(transparent, @dark-blue); + color: @color-text-emphatic; + padding: 3px 6px; + border: 1px solid @color-border; + border-radius: 3px; + align-items: center; + width: fit-content; + margin-left: auto; + + h4 { + font-size: var(--font-size-12); + font-weight: bold; + text-transform: uppercase; + color: @color-text-emphatic; + margin-right: 3px; + } + + .hope-value { + display: flex; + cursor: pointer; + font-size: var(--font-size-12); + margin-left: 1px; + } + } + } + + .body { + grid-area: body; + display: flex; + align-items: start; + justify-content: space-between; + } + + .resources { + display: flex; + flex-direction: column; + gap: 4px; + + .slot-section { + display: flex; + flex-direction: row; + align-items: stretch; + + .slot-label { + display: flex; + align-items: center; + color: light-dark(@beige, @dark-blue); + background: light-dark(@dark-blue, @golden); + padding: 0 4px; + width: fit-content; + font-weight: bold; + border-radius: 6px 0px 0px 6px; + font-size: var(--font-size-12); + white-space: nowrap; + + .label { + padding-right: 2px; + } + + .value { + font-variant-numeric: tabular-nums; + .current { + display: inline-block; + text-align: end; + width: 2ch; + } + .max { + display: inline-block; + text-align: start; + width: 2ch; + } + } + } + + .slot-bar { + align-items: center; + flex-wrap: wrap; + background-color: light-dark(@dark-blue-10, @dark-blue); + padding: 2px 5px; + border-radius: 0 6px 6px 0; + width: fit-content; + } + } + } + + .traits { + background-color: light-dark(@dark-blue-10, @dark-blue); + border: 1px solid @color-border; + border-radius: 6px; + display: grid; + grid-template-columns: 1fr 1fr; + font-size: var(--font-size-12); + padding: 3px 4px; + gap: 3px 7px; + .trait { + display: flex; + justify-content: space-between; + gap: 3px; + .label { + color: @color-text-emphatic; + } + .value { + font-weight: 600; + } + } + } + } + } + + .actors-list.limited { + .actor-resources { + display: flex; + align-items: center; + } + .actor-img-frame { + width: 3rem; + height: 3rem; + } + } + + .actors-dragger { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 100%; + height: 40px; + border: 1px dashed light-dark(@dark-blue-50, @beige-50); + border-radius: 3px; + color: light-dark(@dark-blue-50, @beige-50); + } +} diff --git a/templates/sheets/actors/character/sidebar.hbs b/templates/sheets/actors/character/sidebar.hbs index 313c81f9..6ca858bf 100644 --- a/templates/sheets/actors/character/sidebar.hbs +++ b/templates/sheets/actors/character/sidebar.hbs @@ -1,152 +1,152 @@ -