From 3fbc1e97c6f458b2b6f3f83d33d33f663680820d Mon Sep 17 00:00:00 2001 From: Carlos Fernandez Date: Sun, 31 May 2026 06:29:54 -0400 Subject: [PATCH] Replace scroll shadows with scroll animation timeline (#1951) --- styles/less/dialog/level-up/sheet.less | 3 +- .../dialog/level-up/summary-container.less | 2 +- styles/less/global/elements.less | 2 +- .../sheets/actors/actor-sheet-shared.less | 31 ++++++------- .../less/sheets/actors/adversary/effects.less | 3 +- .../sheets/actors/adversary/features.less | 3 +- .../less/sheets/actors/adversary/index.less | 2 + .../less/sheets/actors/adversary/notes.less | 3 ++ .../less/sheets/actors/adversary/sidebar.less | 3 +- .../sheets/actors/character/biography.less | 3 +- .../less/sheets/actors/character/effects.less | 3 +- .../sheets/actors/character/features.less | 3 +- .../sheets/actors/character/inventory.less | 6 ++- .../less/sheets/actors/character/loadout.less | 45 ++----------------- .../less/sheets/actors/character/sidebar.less | 2 +- .../less/sheets/actors/companion/effects.less | 2 +- .../sheets/actors/environment/features.less | 5 ++- .../environment/potentialAdversaries.less | 4 +- styles/less/sheets/actors/npc/features.less | 4 +- .../less/sheets/actors/party/inventory.less | 6 ++- styles/less/ui/item-browser/item-browser.less | 2 + styles/less/utils/mixin.less | 44 ++++++++++++++++++ 22 files changed, 102 insertions(+), 79 deletions(-) create mode 100644 styles/less/sheets/actors/adversary/notes.less diff --git a/styles/less/dialog/level-up/sheet.less b/styles/less/dialog/level-up/sheet.less index c663f304..9ebd9331 100644 --- a/styles/less/dialog/level-up/sheet.less +++ b/styles/less/dialog/level-up/sheet.less @@ -14,8 +14,7 @@ .tab.active { flex: 1; overflow: auto; - scrollbar-width: thin; - scrollbar-color: light-dark(@dark-blue, @golden) transparent; + .with-scroll-shadows(); } div[data-application-part='form'] { diff --git a/styles/less/dialog/level-up/summary-container.less b/styles/less/dialog/level-up/summary-container.less index 97353ba7..de7c9f4a 100644 --- a/styles/less/dialog/level-up/summary-container.less +++ b/styles/less/dialog/level-up/summary-container.less @@ -18,7 +18,7 @@ overflow: auto; padding: 10px 0; max-height: 700px; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); + .with-scroll-shadows(); .level-achievements-container, .level-advancements-container { diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less index 7af8becd..e57ba50d 100755 --- a/styles/less/global/elements.less +++ b/styles/less/global/elements.less @@ -283,7 +283,7 @@ } &.fit-height { - height: 95%; + flex: 1; } &.flex { diff --git a/styles/less/sheets/actors/actor-sheet-shared.less b/styles/less/sheets/actors/actor-sheet-shared.less index 470067ca..b3eb0469 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: 10px 10px 0; + + .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/effects.less b/styles/less/sheets/actors/adversary/effects.less index fbf74249..4aa44e51 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,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/adversary/features.less b/styles/less/sheets/actors/adversary/features.less index af870d9b..447d050e 100644 --- a/styles/less/sheets/actors/adversary/features.less +++ b/styles/less/sheets/actors/adversary/features.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.adversary { .tab.features { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/adversary/index.less b/styles/less/sheets/actors/adversary/index.less index a1ab41c7..28ff9d22 100644 --- a/styles/less/sheets/actors/adversary/index.less +++ b/styles/less/sheets/actors/adversary/index.less @@ -3,3 +3,5 @@ @import './sheet.less'; @import './sidebar.less'; @import './effects.less'; +@import './notes.less'; + diff --git a/styles/less/sheets/actors/adversary/notes.less b/styles/less/sheets/actors/adversary/notes.less new file mode 100644 index 00000000..a95d070e --- /dev/null +++ b/styles/less/sheets/actors/adversary/notes.less @@ -0,0 +1,3 @@ +.application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active { + padding-bottom: 20px; +} 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..8548a2fb 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,10 @@ 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; height: 100%; + .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..0ab1007d 100644 --- a/styles/less/sheets/actors/character/effects.less +++ b/styles/less/sheets/actors/character/effects.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.effects { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/features.less b/styles/less/sheets/actors/character/features.less index 017254a3..52b41826 100644 --- a/styles/less/sheets/actors/character/features.less +++ b/styles/less/sheets/actors/character/features.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.features { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/inventory.less b/styles/less/sheets/actors/character/inventory.less index c8d2b584..fcfbbee9 100644 --- a/styles/less/sheets/actors/character/inventory.less +++ b/styles/less/sheets/actors/character/inventory.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.inventory { @@ -8,8 +9,9 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - padding: 20px 0; + margin-top: 20px; + padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/character/loadout.less b/styles/less/sheets/actors/character/loadout.less index a896b92e..fa3e0176 100644 --- a/styles/less/sheets/actors/character/loadout.less +++ b/styles/less/sheets/actors/character/loadout.less @@ -1,48 +1,10 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .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); - } - } - .btn-toggle-view { background: light-dark(@dark-blue-10, @dark-blue); border: 1px solid @color-border; @@ -90,8 +52,9 @@ gap: 10px; height: 100%; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%); - padding: 20px 0; + margin-top: 20px; + padding-bottom: 20px; + .with-scroll-shadows(); } } } 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..c0cac669 100644 --- a/styles/less/sheets/actors/companion/effects.less +++ b/styles/less/sheets/actors/companion/effects.less @@ -7,8 +7,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); padding-bottom: 20px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/environment/features.less b/styles/less/sheets/actors/environment/features.less index cc8a345a..84cf26f8 100644 --- a/styles/less/sheets/actors/environment/features.less +++ b/styles/less/sheets/actors/environment/features.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.environment { .tab.features { @@ -8,8 +9,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/environment/potentialAdversaries.less b/styles/less/sheets/actors/environment/potentialAdversaries.less index f3c5776a..f112c0d2 100644 --- a/styles/less/sheets/actors/environment/potentialAdversaries.less +++ b/styles/less/sheets/actors/environment/potentialAdversaries.less @@ -7,8 +7,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/npc/features.less b/styles/less/sheets/actors/npc/features.less index 107b5a06..a579d9f8 100644 --- a/styles/less/sheets/actors/npc/features.less +++ b/styles/less/sheets/actors/npc/features.less @@ -11,8 +11,8 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%); - padding-bottom: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/sheets/actors/party/inventory.less b/styles/less/sheets/actors/party/inventory.less index 8af37a79..444c6a57 100644 --- a/styles/less/sheets/actors/party/inventory.less +++ b/styles/less/sheets/actors/party/inventory.less @@ -1,5 +1,6 @@ @import '../../../utils/colors.less'; @import '../../../utils/fonts.less'; +@import '../../../utils/mixin.less'; .application.sheet.daggerheart.actor.dh-style.party { .tab.inventory { @@ -8,8 +9,9 @@ flex-direction: column; gap: 10px; overflow-y: auto; - mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%); - padding: 20px 0; + margin-top: 20px; + padding-bottom: 4px; + .with-scroll-shadows(); } } } diff --git a/styles/less/ui/item-browser/item-browser.less b/styles/less/ui/item-browser/item-browser.less index 1387f444..aac63d7a 100644 --- a/styles/less/ui/item-browser/item-browser.less +++ b/styles/less/ui/item-browser/item-browser.less @@ -1,5 +1,6 @@ @import '../../utils/colors.less'; @import '../../utils/fonts.less'; +@import '../../utils/mixin.less'; .application.daggerheart.dh-style.compendium-browser { border: initial; @@ -242,6 +243,7 @@ .compendium-sidebar > .folder-list { overflow-y: auto; scrollbar-gutter: stable; + .with-scroll-shadows(); } .item-list-header, diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less index 237a5acb..18b1f9a6 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: 12px; + } + 0%, 90% { + --fade-end: 12px; + } + 100% { + --fade-end: 0; + } + } +} + +.with-scroll-shadows() { + animation: scrollfade; + animation-timeline: --scrollfade; + animation-range: entry 0% exit 100%; + scroll-timeline: --scrollfade y; + mask-image: linear-gradient( + 0deg, + transparent 0%, + black var(--fade-end), + black calc(100% - var(--fade-start)), + transparent 100% + ); +}