From 6ee4515c4af2deaf38b0b002cff01dce4d0762d6 Mon Sep 17 00:00:00 2001 From: Carlos Fernandez Date: Fri, 29 May 2026 05:41:22 -0400 Subject: [PATCH] Styling pass for scrollbars, fieldsets, and scroll shadows --- .../applications/sheets/actors/adversary.mjs | 2 +- styles/less/global/prose-mirror.less | 6 +++ styles/less/global/sheet.less | 2 +- styles/less/global/tab-navigation.less | 3 +- .../sheets/actors/actor-sheet-shared.less | 31 ++++++------- .../less/sheets/actors/adversary/actions.less | 15 ------- .../less/sheets/actors/adversary/effects.less | 6 ++- .../sheets/actors/adversary/features.less | 29 ++++++++++++ .../less/sheets/actors/adversary/header.less | 5 ++- .../less/sheets/actors/adversary/index.less | 6 +++ .../less/sheets/actors/adversary/notes.less | 11 +++++ .../less/sheets/actors/adversary/sheet.less | 39 ++++++++-------- .../less/sheets/actors/adversary/sidebar.less | 3 +- .../sheets/actors/character/biography.less | 6 ++- .../less/sheets/actors/character/effects.less | 9 ++-- .../sheets/actors/character/features.less | 9 ++-- .../less/sheets/actors/character/index.less | 8 ++++ .../sheets/actors/character/inventory.less | 11 ++++- .../less/sheets/actors/character/loadout.less | 45 +++---------------- .../less/sheets/actors/character/sheet.less | 41 +++++++++-------- .../less/sheets/actors/character/sidebar.less | 2 +- .../less/sheets/actors/companion/effects.less | 8 +++- .../less/sheets/actors/companion/header.less | 2 +- .../less/sheets/actors/companion/sheet.less | 13 ++++++ .../sheets/actors/environment/actions.less | 15 ------- .../sheets/actors/environment/features.less | 28 ++++++++++++ .../less/sheets/actors/environment/index.less | 5 +++ .../less/sheets/actors/environment/notes.less | 11 +++++ .../environment/potentialAdversaries.less | 6 ++- .../less/sheets/actors/environment/sheet.less | 2 + styles/less/sheets/actors/party/index.less | 5 +++ .../less/sheets/actors/party/inventory.less | 12 ++++- styles/less/sheets/actors/party/notes.less | 12 +++++ .../sheets/actors/party/party-members.less | 2 + styles/less/sheets/actors/party/sheet.less | 4 +- styles/less/sheets/index.less | 28 ++---------- styles/less/utils/mixin.less | 44 ++++++++++++++++++ .../sheets/actors/adversary/features.hbs | 26 ++++++----- templates/sheets/actors/adversary/notes.hbs | 5 +-- .../sheets/actors/environment/features.hbs | 26 ++++++----- templates/sheets/actors/environment/notes.hbs | 5 +-- templates/sheets/actors/party/notes.hbs | 5 +-- 42 files changed, 346 insertions(+), 207 deletions(-) delete mode 100644 styles/less/sheets/actors/adversary/actions.less create mode 100644 styles/less/sheets/actors/adversary/features.less create mode 100644 styles/less/sheets/actors/adversary/index.less create mode 100644 styles/less/sheets/actors/adversary/notes.less create mode 100644 styles/less/sheets/actors/character/index.less delete mode 100644 styles/less/sheets/actors/environment/actions.less create mode 100644 styles/less/sheets/actors/environment/features.less create mode 100644 styles/less/sheets/actors/environment/index.less create mode 100644 styles/less/sheets/actors/environment/notes.less create mode 100644 styles/less/sheets/actors/party/index.less create mode 100644 styles/less/sheets/actors/party/notes.less diff --git a/module/applications/sheets/actors/adversary.mjs b/module/applications/sheets/actors/adversary.mjs index 04be3efb..caaa193a 100644 --- a/module/applications/sheets/actors/adversary.mjs +++ b/module/applications/sheets/actors/adversary.mjs @@ -7,7 +7,7 @@ export default class AdversarySheet extends DHBaseActorSheet { /** @inheritDoc */ static DEFAULT_OPTIONS = { classes: ['adversary'], - position: { width: 660, height: 766 }, + position: { width: 670, height: 766 }, window: { resizable: true }, actions: { toggleHitPoints: AdversarySheet.#toggleHitPoints, diff --git a/styles/less/global/prose-mirror.less b/styles/less/global/prose-mirror.less index 8412235d..02d54cc5 100644 --- a/styles/less/global/prose-mirror.less +++ b/styles/less/global/prose-mirror.less @@ -41,5 +41,11 @@ list-style: disc; } } + + // Fixes centering and makes it not render over scrollbar + &:hover button.toggle:enabled { + display: flex; + right: 12px; + } } } diff --git a/styles/less/global/sheet.less b/styles/less/global/sheet.less index e3072da1..8381c7c3 100755 --- a/styles/less/global/sheet.less +++ b/styles/less/global/sheet.less @@ -54,7 +54,7 @@ body.game:is(.performance-low, .noblur) { position: relative; min-height: -webkit-fill-available; transition: opacity 0.3s ease; - padding-bottom: 20px; + padding-bottom: 16px; .tab { padding: 0 10px; diff --git a/styles/less/global/tab-navigation.less b/styles/less/global/tab-navigation.less index 038a9749..a08c5a5e 100755 --- a/styles/less/global/tab-navigation.less +++ b/styles/less/global/tab-navigation.less @@ -3,8 +3,7 @@ .daggerheart.dh-style { .tab-navigation { - margin: 5px 0; - height: 40px; + margin: 5px 0 10px 0; width: 100%; .navigation-container { diff --git a/styles/less/sheets/actors/actor-sheet-shared.less b/styles/less/sheets/actors/actor-sheet-shared.less index 470067ca..bf98cbf2 100644 --- a/styles/less/sheets/actors/actor-sheet-shared.less +++ b/styles/less/sheets/actors/actor-sheet-shared.less @@ -38,11 +38,23 @@ } .tab.inventory { - .search-section { - display: flex; + .gold-section { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; - align-items: center; + padding: 12px 12px 0 10px; + + .input { + color: light-dark(@dark, @beige); + } } + } + + .search-section { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; .search-bar { position: relative; color: light-dark(@dark-blue-50, @beige-50); @@ -72,22 +84,11 @@ height: 32px; position: absolute; right: 20px; - font-size: 16px; + font-size: var(--font-size-16);; z-index: 1; color: light-dark(@dark-blue-50, @beige-50); } } - - .gold-section { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 10px; - padding: 10px 10px 0; - - .input { - color: light-dark(@dark, @beige); - } - } } &.limited { diff --git a/styles/less/sheets/actors/adversary/actions.less b/styles/less/sheets/actors/adversary/actions.less deleted file mode 100644 index af870d9b..00000000 --- a/styles/less/sheets/actors/adversary/actions.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../../utils/colors.less'; -@import '../../../utils/fonts.less'; - -.application.sheet.daggerheart.actor.dh-style.adversary { - .tab.features { - .feature-section { - display: flex; - flex-direction: column; - gap: 10px; - overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; - } - } -} diff --git a/styles/less/sheets/actors/adversary/effects.less b/styles/less/sheets/actors/adversary/effects.less index fbf74249..3977f5ad 100644 --- a/styles/less/sheets/actors/adversary/effects.less +++ b/styles/less/sheets/actors/adversary/effects.less @@ -1,4 +1,5 @@ @import '../../../utils/colors.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.adversary { .tab.effects { @@ -7,8 +8,9 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + scrollbar-gutter: stable; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/adversary/features.less b/styles/less/sheets/actors/adversary/features.less new file mode 100644 index 00000000..19803300 --- /dev/null +++ b/styles/less/sheets/actors/adversary/features.less @@ -0,0 +1,29 @@ +@import '../../../utils/colors.less'; +@import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; + +.application.sheet.daggerheart.actor.dh-style.adversary { + .tab.features.active { + position: relative; + padding-left: 15px; + .feature-section { + display: flex; + flex-direction: column; + gap: 10px; + padding: 6px 2px 4px 0; + overflow-y: auto; + scrollbar-gutter: stable; + .with-scroll-shadows(); + } + > button { + --button-size: 1.75rem; + width: 1.75rem; + position: absolute; + inset: auto 16px 0 auto; + box-shadow: 0 0 5px @light-black; + } + &:has(> button) .feature-section { + padding-bottom: calc(1px + 1.75rem); + } + } +} diff --git a/styles/less/sheets/actors/adversary/header.less b/styles/less/sheets/actors/adversary/header.less index 8bd3fcee..5208e8ba 100644 --- a/styles/less/sheets/actors/adversary/header.less +++ b/styles/less/sheets/actors/adversary/header.less @@ -71,7 +71,10 @@ .adversary-navigation { display: flex; gap: 8px; - align-items: center; + align-items: baseline; + .tab-navigation { + margin-top: 0; + } } } } diff --git a/styles/less/sheets/actors/adversary/index.less b/styles/less/sheets/actors/adversary/index.less new file mode 100644 index 00000000..9f74b0e0 --- /dev/null +++ b/styles/less/sheets/actors/adversary/index.less @@ -0,0 +1,6 @@ +@import './sheet.less'; +@import './features.less'; +@import './header.less'; +@import './sidebar.less'; +@import './effects.less'; +@import './notes.less'; \ No newline at end of file diff --git a/styles/less/sheets/actors/adversary/notes.less b/styles/less/sheets/actors/adversary/notes.less new file mode 100644 index 00000000..5c3671b7 --- /dev/null +++ b/styles/less/sheets/actors/adversary/notes.less @@ -0,0 +1,11 @@ +@import '../../../utils/mixin.less'; + +.application.sheet.daggerheart.actor.dh-style.adversary { + .tab.notes { + padding: 6px 0 4px 15px; + .editor-content { + scrollbar-gutter: stable; + .with-scroll-shadows(); + } + } +} \ No newline at end of file diff --git a/styles/less/sheets/actors/adversary/sheet.less b/styles/less/sheets/actors/adversary/sheet.less index 0bd845fa..509a2d63 100644 --- a/styles/less/sheets/actors/adversary/sheet.less +++ b/styles/less/sheets/actors/adversary/sheet.less @@ -9,28 +9,31 @@ height: 100%; width: 100%; padding-bottom: 0; + } - .adversary-sidebar-sheet { - grid-row: 1 / span 2; - grid-column: 1; + .adversary-sidebar-sheet { + grid-row: 1 / span 2; + grid-column: 1; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .adversary-header-sheet { + grid-row: 1; + grid-column: 2; + } + + .tab { + grid-row: 2; + grid-column: 2; + &.active { overflow: hidden; display: flex; flex-direction: column; - } - - .adversary-header-sheet { - grid-row: 1; - grid-column: 2; - } - - .tab { - grid-row: 2; - grid-column: 2; - &.active { - overflow: hidden; - display: flex; - flex-direction: column; - } + padding-right: 0; + margin-right: 2px; + margin-bottom: 16px; } } } diff --git a/styles/less/sheets/actors/adversary/sidebar.less b/styles/less/sheets/actors/adversary/sidebar.less index b1bb51db..5db9f5e9 100644 --- a/styles/less/sheets/actors/adversary/sidebar.less +++ b/styles/less/sheets/actors/adversary/sidebar.less @@ -286,9 +286,8 @@ overflow-y: hidden; padding-top: 10px; padding-bottom: 20px; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - scrollbar-gutter: stable; + .with-scroll-shadows(); &:hover { overflow-y: auto; diff --git a/styles/less/sheets/actors/character/biography.less b/styles/less/sheets/actors/character/biography.less index f8d56735..ce52c5af 100644 --- a/styles/less/sheets/actors/character/biography.less +++ b/styles/less/sheets/actors/character/biography.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.biography { @@ -9,10 +10,11 @@ gap: 10px; height: 100%; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 98%, transparent 100%); padding-top: 8px; - padding-bottom: 20px; + padding-bottom: 4px; height: 100%; + scrollbar-gutter: stable; + .with-scroll-shadows(); } .characteristics-section { diff --git a/styles/less/sheets/actors/character/effects.less b/styles/less/sheets/actors/character/effects.less index ae49fa2d..5740f978 100644 --- a/styles/less/sheets/actors/character/effects.less +++ b/styles/less/sheets/actors/character/effects.less @@ -1,15 +1,18 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.effects { + padding-right: 0; + overflow-y: auto; + scrollbar-gutter: stable; + .with-scroll-shadows(); .effects-sections { display: flex; flex-direction: column; gap: 10px; - overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; } } } diff --git a/styles/less/sheets/actors/character/features.less b/styles/less/sheets/actors/character/features.less index 017254a3..ac241c34 100644 --- a/styles/less/sheets/actors/character/features.less +++ b/styles/less/sheets/actors/character/features.less @@ -1,15 +1,18 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.features { + overflow-y: auto; + scrollbar-gutter: stable; + padding-right: 0; + padding-bottom: 4px; + .with-scroll-shadows(); .features-sections { display: flex; flex-direction: column; gap: 10px; - overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; } } } diff --git a/styles/less/sheets/actors/character/index.less b/styles/less/sheets/actors/character/index.less new file mode 100644 index 00000000..f196d5bf --- /dev/null +++ b/styles/less/sheets/actors/character/index.less @@ -0,0 +1,8 @@ +@import './sheet.less'; +@import './biography.less'; +@import './effects.less'; +@import './features.less'; +@import './header.less'; +@import './inventory.less'; +@import './loadout.less'; +@import './sidebar.less'; diff --git a/styles/less/sheets/actors/character/inventory.less b/styles/less/sheets/actors/character/inventory.less index c8d2b584..b07bb6fe 100644 --- a/styles/less/sheets/actors/character/inventory.less +++ b/styles/less/sheets/actors/character/inventory.less @@ -1,15 +1,22 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.character { .tab.inventory { + padding-right: 0; + .search-section { + padding-right: 14px; + } .items-section { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - padding: 20px 0; + scrollbar-gutter: stable; + margin-top: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/loadout.less b/styles/less/sheets/actors/character/loadout.less index a896b92e..528553c2 100644 --- a/styles/less/sheets/actors/character/loadout.less +++ b/styles/less/sheets/actors/character/loadout.less @@ -4,44 +4,7 @@ .application.sheet.daggerheart.actor.dh-style.character { .tab.loadout { .search-section { - display: flex; - align-items: center; - justify-content: space-between; - - .search-bar { - position: relative; - color: light-dark(@dark-blue-50, @beige-50); - width: 80%; - padding-top: 5px; - - input { - border-radius: 50px; - background: light-dark(@dark-blue-10, @golden-10); - border: none; - outline: 2px solid transparent; - transition: all 0.3s ease; - padding: 0 20px; - - &:hover { - outline: 2px solid light-dark(@dark, @golden); - } - - &::-webkit-search-cancel-button { - -webkit-appearance: none; - display: none; - } - } - - .icon { - align-content: center; - height: 32px; - position: absolute; - right: 20px; - font-size: var(--font-size-16); - z-index: 1; - color: light-dark(@dark-blue-50, @beige-50); - } - } + padding-right: 14px; .btn-toggle-view { background: light-dark(@dark-blue-10, @dark-blue); @@ -90,8 +53,10 @@ gap: 10px; height: 100%; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%); - padding: 20px 0; + scrollbar-gutter: stable; + margin-top: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/sheet.less b/styles/less/sheets/actors/character/sheet.less index 68792c99..aebcb9b9 100644 --- a/styles/less/sheets/actors/character/sheet.less +++ b/styles/less/sheets/actors/character/sheet.less @@ -10,28 +10,31 @@ width: 100%; padding-bottom: 0; overflow-x: auto; + } + + .character-sidebar-sheet { + grid-row: 1 / span 2; + grid-column: 1; + display: flex; + flex-direction: column; + } - .character-sidebar-sheet { - grid-row: 1 / span 2; - grid-column: 1; + .character-header-sheet { + position: relative; + grid-row: 1; + grid-column: 2; + } + + .tab { + grid-row: 2; + grid-column: 2; + padding-right: 0; + margin-right: 2px; + margin-bottom: 12px; + &.active { display: flex; flex-direction: column; - } - - .character-header-sheet { - position: relative; - grid-row: 1; - grid-column: 2; - } - - .tab { - grid-row: 2; - grid-column: 2; - &.active { - display: flex; - flex-direction: column; - overflow: hidden; - } + overflow: hidden; } } } diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less index 3c358d8f..c76ee9ff 100644 --- a/styles/less/sheets/actors/character/sidebar.less +++ b/styles/less/sheets/actors/character/sidebar.less @@ -549,8 +549,8 @@ overflow-y: hidden; padding-top: 10px; padding-bottom: 20px; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); scrollbar-gutter: stable; + .with-scroll-shadows(); &:hover { overflow-y: auto; diff --git a/styles/less/sheets/actors/companion/effects.less b/styles/less/sheets/actors/companion/effects.less index 6d7fe061..40973196 100644 --- a/styles/less/sheets/actors/companion/effects.less +++ b/styles/less/sheets/actors/companion/effects.less @@ -1,14 +1,18 @@ @import '../../../utils/colors.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.companion { .tab.effects { + margin-right: 2px; + padding-right: 0; .effects-sections { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; + scrollbar-gutter: stable; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/companion/header.less b/styles/less/sheets/actors/companion/header.less index b4df96bf..6a4e6c3e 100644 --- a/styles/less/sheets/actors/companion/header.less +++ b/styles/less/sheets/actors/companion/header.less @@ -151,7 +151,7 @@ display: flex; gap: 8px; align-items: baseline; - width: 100%; + width: calc(100% - 32px); } } } diff --git a/styles/less/sheets/actors/companion/sheet.less b/styles/less/sheets/actors/companion/sheet.less index f31679ba..7e5fab62 100644 --- a/styles/less/sheets/actors/companion/sheet.less +++ b/styles/less/sheets/actors/companion/sheet.less @@ -10,3 +10,16 @@ background: url('../assets/parchments/dh-parchment-light.png'); } }); + +.application.sheet.daggerheart.actor.dh-style.companion { + .window-content { + display: flex; + } + + .tab.active { + flex: 1; + overflow: hidden; + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/styles/less/sheets/actors/environment/actions.less b/styles/less/sheets/actors/environment/actions.less deleted file mode 100644 index cc8a345a..00000000 --- a/styles/less/sheets/actors/environment/actions.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../../utils/colors.less'; -@import '../../../utils/fonts.less'; - -.application.sheet.daggerheart.actor.dh-style.environment { - .tab.features { - .feature-section { - display: flex; - flex-direction: column; - gap: 10px; - overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; - } - } -} diff --git a/styles/less/sheets/actors/environment/features.less b/styles/less/sheets/actors/environment/features.less new file mode 100644 index 00000000..a8fff527 --- /dev/null +++ b/styles/less/sheets/actors/environment/features.less @@ -0,0 +1,28 @@ +@import '../../../utils/colors.less'; +@import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; + +.application.sheet.daggerheart.actor.dh-style.environment { + .tab.features { + position: relative; + .feature-section { + display: flex; + flex-direction: column; + gap: 10px; + overflow-y: auto; + padding: 4px 8px; + scrollbar-gutter: stable; + .with-scroll-shadows(); + } + > button { + --button-size: 1.75rem; + width: 1.75rem; + position: absolute; + inset: auto 16px 0 auto; + box-shadow: 0 0 5px @light-black; + } + &:has(> button) .feature-section { + padding-bottom: calc(1px + 1.75rem); + } + } +} diff --git a/styles/less/sheets/actors/environment/index.less b/styles/less/sheets/actors/environment/index.less new file mode 100644 index 00000000..8937c129 --- /dev/null +++ b/styles/less/sheets/actors/environment/index.less @@ -0,0 +1,5 @@ +@import './sheet.less'; +@import './features.less'; +@import './header.less'; +@import './potentialAdversaries.less'; +@import './notes.less'; \ No newline at end of file diff --git a/styles/less/sheets/actors/environment/notes.less b/styles/less/sheets/actors/environment/notes.less new file mode 100644 index 00000000..58447c88 --- /dev/null +++ b/styles/less/sheets/actors/environment/notes.less @@ -0,0 +1,11 @@ +@import '../../../utils/mixin.less'; + +.application.sheet.daggerheart.actor.dh-style.environment { + .tab.notes { + padding: 6px 0 4px 15px; + .editor-content { + scrollbar-gutter: stable; + .with-scroll-shadows(); + } + } +} \ No newline at end of file diff --git a/styles/less/sheets/actors/environment/potentialAdversaries.less b/styles/less/sheets/actors/environment/potentialAdversaries.less index f3c5776a..94c1c1fa 100644 --- a/styles/less/sheets/actors/environment/potentialAdversaries.less +++ b/styles/less/sheets/actors/environment/potentialAdversaries.less @@ -1,4 +1,5 @@ @import '../../../utils/colors.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.environment { .tab.potentialAdversaries { @@ -7,8 +8,9 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 0 4px 4px 4px; + scrollbar-gutter: stable; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/environment/sheet.less b/styles/less/sheets/actors/environment/sheet.less index 2d9cc188..02489cac 100644 --- a/styles/less/sheets/actors/environment/sheet.less +++ b/styles/less/sheets/actors/environment/sheet.less @@ -16,6 +16,8 @@ .tab { flex: 1; overflow-y: auto; + padding-right: 0; + margin-right: 2px; &.active { overflow: hidden; diff --git a/styles/less/sheets/actors/party/index.less b/styles/less/sheets/actors/party/index.less new file mode 100644 index 00000000..279c9db2 --- /dev/null +++ b/styles/less/sheets/actors/party/index.less @@ -0,0 +1,5 @@ +@import './sheet.less'; +@import './header.less'; +@import './party-members.less'; +@import './inventory.less'; +@import './notes.less'; \ No newline at end of file diff --git a/styles/less/sheets/actors/party/inventory.less b/styles/less/sheets/actors/party/inventory.less index 8af37a79..4b14e112 100644 --- a/styles/less/sheets/actors/party/inventory.less +++ b/styles/less/sheets/actors/party/inventory.less @@ -1,15 +1,23 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.party { .tab.inventory { + padding-right: 0; + .search-section { + padding-right: 14px; + } + .items-section { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - padding: 20px 0; + scrollbar-gutter: stable; + margin-top: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/party/notes.less b/styles/less/sheets/actors/party/notes.less new file mode 100644 index 00000000..4ef51caa --- /dev/null +++ b/styles/less/sheets/actors/party/notes.less @@ -0,0 +1,12 @@ +@import '../../../utils/mixin.less'; + +.application.sheet.daggerheart.actor.dh-style.party { + .tab.notes { + padding: 16px 0 4px 15px; + .editor-content { + scrollbar-gutter: stable; + padding-left: 8px; + .with-scroll-shadows(); + } + } +} \ No newline at end of file diff --git a/styles/less/sheets/actors/party/party-members.less b/styles/less/sheets/actors/party/party-members.less index dc464291..fe2a004b 100644 --- a/styles/less/sheets/actors/party/party-members.less +++ b/styles/less/sheets/actors/party/party-members.less @@ -4,6 +4,8 @@ .application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers { overflow: auto; + scrollbar-gutter: stable; + .with-scroll-shadows(); .actors-list { display: flex; diff --git a/styles/less/sheets/actors/party/sheet.less b/styles/less/sheets/actors/party/sheet.less index 852b6cfc..4715f8a5 100644 --- a/styles/less/sheets/actors/party/sheet.less +++ b/styles/less/sheets/actors/party/sheet.less @@ -19,8 +19,8 @@ .application.sheet.daggerheart.actor.dh-style.party { .tab { flex: 1; - overflow-y: auto; - scrollbar-gutter: stable; + margin-right: 2px; + padding-right: 8px; &.active { overflow: auto; diff --git a/styles/less/sheets/index.less b/styles/less/sheets/index.less index 7d595614..a4092086 100644 --- a/styles/less/sheets/index.less +++ b/styles/less/sheets/index.less @@ -2,36 +2,16 @@ @import './actors/actor-sheet-shared.less'; -@import './actors/adversary/actions.less'; -@import './actors/adversary/header.less'; -@import './actors/adversary/sheet.less'; -@import './actors/adversary/sidebar.less'; -@import './actors/adversary/effects.less'; - -@import './actors/character/biography.less'; -@import './actors/character/effects.less'; -@import './actors/character/features.less'; -@import './actors/character/header.less'; -@import './actors/character/inventory.less'; -@import './actors/character/loadout.less'; -@import './actors/character/sheet.less'; -@import './actors/character/sidebar.less'; +@import './actors/adversary/index.less'; +@import './actors/character/index.less'; +@import './actors/environment/index.less'; +@import './actors/party/index.less'; @import './actors/companion/details.less'; @import './actors/companion/header.less'; @import './actors/companion/sheet.less'; @import './actors/companion/effects.less'; -@import './actors/environment/actions.less'; -@import './actors/environment/header.less'; -@import './actors/environment/potentialAdversaries.less'; -@import './actors/environment/sheet.less'; - -@import './actors/party/header.less'; -@import './actors/party/party-members.less'; -@import './actors/party/sheet.less'; -@import './actors/party/inventory.less'; - @import './items/beastform.less'; @import './items/class.less'; @import './items/domain-card.less'; diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less index 237a5acb..69c2bf6b 100644 --- a/styles/less/utils/mixin.less +++ b/styles/less/utils/mixin.less @@ -160,3 +160,47 @@ @destination @length ); } + +// Scroll shadows, but only if the browser supports. At the time of writing, this doesn't work on firefox +@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { + @property --fade-start { + syntax: ""; + inherits: false; + initial-value: 0; + } + + @property --fade-end { + syntax: ""; + inherits: false; + initial-value: 0; + } + + @keyframes scrollfade { + 0% { + --fade-start: 0; + } + 10%, 100% { + --fade-start: 10px; + } + 0%, 90% { + --fade-end: 10px; + } + 100% { + --fade-end: 0; + } + } +} + +.with-scroll-shadows() { + animation: scrollfade; + animation-timeline: --scrollfade; + scroll-timeline: --scrollfade y; + mask-image: linear-gradient( + 0deg, + transparent 0%, + black var(--fade-end), + black calc(100% - var(--fade-start)), + transparent 100% + ); +} + diff --git a/templates/sheets/actors/adversary/features.hbs b/templates/sheets/actors/adversary/features.hbs index 3b495e74..685540e7 100644 --- a/templates/sheets/actors/adversary/features.hbs +++ b/templates/sheets/actors/adversary/features.hbs @@ -1,14 +1,20 @@
- {{> 'daggerheart.inventory-items' - title=tabs.features.label - type='feature' - collection=@root.features - hideContextMenu=true - hideModifyControls=true - canCreate=@root.editable - showActions=@root.editable - }} + {{#each @root.features as |item|}} + {{> 'daggerheart.inventory-item' + item=item + type='feature' + actorType=@root.document.type + hideContextMenu=true + hideModifyControls=true + showActions=@root.editable + }} + {{/each}}
-
\ No newline at end of file + {{#if @root.editable}} + + {{/if}} + diff --git a/templates/sheets/actors/adversary/notes.hbs b/templates/sheets/actors/adversary/notes.hbs index a5c3f706..28df7f8e 100644 --- a/templates/sheets/actors/adversary/notes.hbs +++ b/templates/sheets/actors/adversary/notes.hbs @@ -3,10 +3,7 @@ data-tab='{{tabs.notes.id}}' data-group='{{tabs.notes.group}}' > -
- {{localize tabs.notes.label}} - {{formInput notes.field value=notes.value enriched=notes.enriched toggled=true}} -
+ {{formInput notes.field value=notes.value enriched=notes.enriched class="aaa" toggled=true}} {{#if (and showAttribution document.system.attribution.artist)}} diff --git a/templates/sheets/actors/environment/features.hbs b/templates/sheets/actors/environment/features.hbs index 35fcb038..1dbd4b94 100644 --- a/templates/sheets/actors/environment/features.hbs +++ b/templates/sheets/actors/environment/features.hbs @@ -4,14 +4,20 @@ data-group='{{tabs.features.group}}' >
- {{> 'daggerheart.inventory-items' - title=tabs.features.label - type='feature' - collection=@root.features - hideContextMenu=true - hideModifyControls=true - canCreate=@root.editable - showActions=@root.editable - }} -
+ {{#each @root.features as |item|}} + {{> 'daggerheart.inventory-item' + item=item + type='feature' + actorType=@root.document.type + hideContextMenu=true + hideModifyControls=true + showActions=@root.editable + }} + {{/each}} + + {{#if @root.editable}} + + {{/if}} \ No newline at end of file diff --git a/templates/sheets/actors/environment/notes.hbs b/templates/sheets/actors/environment/notes.hbs index 4f6b131e..1acf0e93 100644 --- a/templates/sheets/actors/environment/notes.hbs +++ b/templates/sheets/actors/environment/notes.hbs @@ -3,10 +3,7 @@ data-tab='{{tabs.notes.id}}' data-group='{{tabs.notes.group}}' > -
- {{localize tabs.notes.label}} - {{formInput notes.field value=notes.value enriched=notes.value toggled=true}} -
+ {{formInput notes.field value=notes.value enriched=notes.value toggled=true}} {{#if (and showAttribution document.system.attribution.artist)}} diff --git a/templates/sheets/actors/party/notes.hbs b/templates/sheets/actors/party/notes.hbs index 663a484a..0972bee9 100644 --- a/templates/sheets/actors/party/notes.hbs +++ b/templates/sheets/actors/party/notes.hbs @@ -3,8 +3,5 @@ data-tab='{{tabs.notes.id}}' data-group='{{tabs.notes.group}}' > -
- {{localize tabs.notes.label}} - {{formInput notes.field value=notes.value enriched=notes.value toggled=true}} -
+ {{formInput notes.field value=notes.value enriched=notes.value toggled=true}} \ No newline at end of file