Make sheet tab scrollbars stable and remove fieldsets

styles/less/global/elements.less

@@ -261,13 +261,15 @@
 
     fieldset {
         align-items: center;
+        margin: 0;
         margin-top: 5px;
         border-radius: 6px;
         border-color: @color-fieldset-border;
 
         &.glassy {
             background-color: light-dark(@dark-blue-10, @golden-10);
-            border-color: transparent;
+            border: none;
+            padding-inline: 10px;
 
             legend {
                 padding: 2px 12px;
@@ -512,7 +514,7 @@
         height: 1px;
         width: 100%;
         border-bottom: 1px solid @color-border;
-        mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+        mask-image: linear-gradient(270deg, transparent 0%, black 35%, black 50%, black 65%, transparent 100%);
     }
 
     side-line-div {
@@ -546,50 +548,6 @@
         transform-origin: top;
     }
 
-    .item-buttons {
-        grid-column: span 3;
-        display: flex;
-        gap: 8px;
-        flex-wrap: wrap;
-        margin-top: 2px;
-
-        .item-button {
-            display: flex;
-            border: 1px solid light-dark(#18162e, #18162e);
-            color: light-dark(#18162e, #18162e);
-            outline: none;
-            box-shadow: none;
-            border-radius: 6px;
-
-            button {
-                border-radius: 3px 0px 0px 3px;
-                color: light-dark(@dark-blue, @dark-blue);
-                white-space: nowrap;
-                border: 0;
-
-                &:hover {
-                    color: @color-text-emphatic;
-                }
-
-                &:not(:first-child) {
-                    padding: 6px;
-                    background: light-dark(@dark-blue-10, @golden-secondary);
-                    border-radius: 0px 3px 3px 0px;
-                    color: light-dark(@dark-blue, @dark-golden);
-
-                    &:hover {
-                        background: light-dark(@light-black, @dark-blue);
-                        color: light-dark(@dark-blue, @golden-secondary);
-                    }
-                }
-            }
-
-            .spacer {
-                border-right: 1px solid black;
-                content: '';
-            }
-        }
-    }
     .artist-attribution {
         width: 100%;
         display: flex;
@@ -597,7 +555,7 @@
         font-style: italic;
         font-family: @font-body;
         margin-top: 4px;
-        color: light-dark(#14142599, #efe6d850);
+        color: @color-text-subtle;
         font-size: var(--font-size-12);
         padding-left: 3px;
     }

styles/less/global/global.less

@@ -96,7 +96,7 @@
             flex-wrap: wrap;
             font-size: var(--font-size-12);
             justify-content: start;
-            padding: 3px 5px;
+            padding: 2px 5px;
         }
     }
 }

styles/less/global/inventory-item.less

@@ -45,8 +45,11 @@
 
             .item-main {
                 border-radius: 5px;
+
+                // Make hover extend out of bounds.
+                // Because of this extra spacing, the scroll container parent needs some padding
                 padding: 2px;
-                margin: -2px;
+                margin: -2px -2px 0 -2px;
             }
 
             &:hover {
@@ -271,6 +274,50 @@
                 grid-area: labels;
             }
         }
+
+        .item-buttons {
+            grid-column: span 3;
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+
+            .item-button {
+                display: flex;
+                border: 1px solid light-dark(#18162e, #18162e);
+                color: light-dark(#18162e, #18162e);
+                outline: none;
+                box-shadow: none;
+                border-radius: 6px;
+
+                button {
+                    border-radius: 3px 0px 0px 3px;
+                    color: light-dark(@dark-blue, @dark-blue);
+                    white-space: nowrap;
+                    border: 0;
+
+                    &:hover {
+                        color: @color-text-emphatic;
+                    }
+
+                    &:not(:first-child) {
+                        padding: 6px;
+                        background: light-dark(@dark-blue-10, @golden-secondary);
+                        border-radius: 0px 3px 3px 0px;
+                        color: light-dark(@dark-blue, @dark-golden);
+
+                        &:hover {
+                            background: light-dark(@light-black, @dark-blue);
+                            color: light-dark(@dark-blue, @golden-secondary);
+                        }
+                    }
+                }
+
+                .spacer {
+                    border-right: 1px solid black;
+                    content: '';
+                }
+            }
+        }
     }
 
     .card-item {

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;

styles/less/sheets/actors/actor-sheet-shared.less

@@ -18,6 +18,8 @@
 });
 
 .application.sheet.daggerheart.actor.dh-style {
+    --side-indent: 16px;
+
     .portrait img,
     .profile {
         width: 100%;
@@ -39,6 +41,33 @@
 
     .window-header > .attribution-header-label {
         margin-right: var(--spacer-4);
+        pointer-events: none;
+    }
+
+    .tab-navigation {
+        margin-bottom: 0;
+    }
+
+    .tab {
+        padding: 0;
+        .search-section {
+            padding: var(--spacer-16) 12px var(--spacer-8) 10px;
+        }
+
+        .scroll-container {
+            scrollbar-gutter: stable;
+            overflow-y: auto;
+            .with-scroll-shadows();
+
+            padding: var(--spacer-16) calc(var(--side-indent) - var(--scrollbar-width)) 4px var(--side-indent);
+
+            > fieldset:first-child {
+                margin-top: 0;
+            }
+        }
+        .scroll-container:not(:first-child) {
+            padding-top: var(--spacer-8); // nested have less top padding
+        }
     }
 
     .tab.inventory {
@@ -46,7 +75,7 @@
             display: grid;
             grid-template-columns: 1fr 1fr 1fr 1fr;
             gap: 10px;
-            padding: 10px 10px 0;
+            padding: var(--spacer-8) var(--side-indent) var(--spacer-12) var(--side-indent);
 
             .input {
                 color: light-dark(@dark, @beige);
@@ -94,7 +123,6 @@
             position: relative;
             color: light-dark(@dark-blue-50, @beige-50);
             width: 100%;
-            padding-top: 5px;
 
             input {
                 border-radius: 50px;

styles/less/sheets/actors/adversary/effects.less

@@ -7,9 +7,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/adversary/features.less

@@ -8,9 +8,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/adversary/header.less

@@ -7,7 +7,7 @@
         width: 100%;
 
         > *:not(line-div, .tab-navigation) {
-            padding-left: 15px;
+            padding-left: var(--side-indent);
             padding-right: 15px;
         }
 

styles/less/sheets/actors/adversary/notes.less

@@ -1,3 +0,0 @@
-.application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active {
-    padding-bottom: 20px;
-}

styles/less/sheets/actors/adversary/sheet.less

@@ -33,6 +33,8 @@
             overflow: hidden;
             display: flex;
             flex-direction: column;
+            margin: 0 0 10px 0;
+            position: relative;
         }
     }
 }

styles/less/sheets/actors/character/biography.less

@@ -8,17 +8,11 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            height: 100%;
+            flex: 1;
-            overflow-y: auto;
-            padding-top: 8px;
-            padding-bottom: 20px;
-            height: 100%;
-            .with-scroll-shadows();
         }
 
         .characteristics-section {
             gap: 20px;
-            padding: 0 10px;
         }
 
         .biography-section {

styles/less/sheets/actors/character/effects.less

@@ -8,9 +8,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/character/features.less

@@ -8,9 +8,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/character/header.less

@@ -19,16 +19,19 @@
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .character-header-sheet {
-        padding: 0 15px;
         padding-top: var(--header-height);
         width: 100%;
         
+        > *:not(line-div, .tab-navigation) {
+            margin-left: var(--side-indent);
+            margin-right: 15px;
+        }
+
         .name-row {
             display: flex;
             gap: 6px;
             align-items: start;
             justify-content: space-between;
-            padding: 0;
             padding-top: 5px;
             flex: 1;
 
@@ -100,8 +103,8 @@
         .character-details {
             display: flex;
             justify-content: space-between;
-            padding: 5px 0;
+            margin-top: 5px;
-            margin-bottom: 8px;
+            margin-bottom: 10px;
             font-size: var(--font-size-12);
             color: @color-text-emphatic;
 
@@ -130,7 +133,6 @@
         .character-row {
             display: flex;
             align-items: center;
-            padding: 0;
             margin-bottom: 12px;
 
             .resource-section {
@@ -218,7 +220,6 @@
 
         .character-traits {
             display: flex;
-            padding: 0;
             margin-bottom: 15px;
             justify-content: space-between;
             max-width: 38.5rem;
@@ -325,5 +326,9 @@
                 }
             }
         }
+
+        .tab-navigation button[data-action="openSettings"] {
+            margin-right: 12px;
+        }
     }
 }

styles/less/sheets/actors/character/index.less

@@ -1,8 +1,8 @@
+@import './sheet.less';
 @import './biography.less';
 @import './effects.less';
 @import './features.less';
 @import './header.less';
 @import './inventory.less';
 @import './loadout.less';
-@import './sheet.less';
 @import './sidebar.less';

styles/less/sheets/actors/character/inventory.less

@@ -8,10 +8,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/character/loadout.less

@@ -50,11 +50,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            height: 100%;
-            overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/character/sheet.less

@@ -2,6 +2,8 @@
 @import '../../../utils/fonts.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
+    --side-indent: 16px;
+
     .window-content {
         display: grid;
         grid-template-columns: 275px 1fr;
@@ -10,28 +12,34 @@
         width: 100%;
         padding-bottom: 0;
         overflow-x: auto;
+    }
     
-        .character-sidebar-sheet {
+    .character-sidebar-sheet {
-            grid-row: 1 / span 2;
+        grid-row: 1 / span 2;
-            grid-column: 1;
+        grid-column: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .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;
-        }
+            overflow: hidden;
-
+            margin: 0 0 10px 0;
-        .character-header-sheet {
+            padding: 0;
             position: relative;
-            grid-row: 1;
-            grid-column: 2;
-        }
-
-        .tab {
-            grid-row: 2;
-            grid-column: 2;
-            &.active {
-                display: flex;
-                flex-direction: column;
-                overflow: hidden;
-            }
         }
     }
 }

styles/less/sheets/actors/companion/effects.less

@@ -1,13 +1,17 @@
 @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;
-            padding-bottom: 20px;
+            padding-bottom: 4px;
+            scrollbar-gutter: stable;
             .with-scroll-shadows();
         }
     }

styles/less/sheets/actors/environment/features.less

@@ -8,9 +8,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/environment/header.less

@@ -138,10 +138,11 @@
         }
 
         .environment-navigation {
-            padding: 0 20px;
+            padding-right: 20px;
 
             .tab-navigation {
                 margin-top: 0;
+                margin-bottom: 0;
             }
         }
     }

styles/less/sheets/actors/environment/index.less

@@ -1,4 +1,4 @@
+@import './sheet.less';
 @import './features.less';
 @import './header.less';
 @import './potentialAdversaries.less';
-@import './sheet.less';

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 {
@@ -6,9 +7,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/party/index.less

@@ -1,4 +1,4 @@
+@import './sheet.less';
 @import './header.less';
 @import './party-members.less';
-@import './sheet.less';
 @import './inventory.less';

styles/less/sheets/actors/party/inventory.less

@@ -8,10 +8,6 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
         }
     }
 }

styles/less/sheets/actors/party/party-members.less

@@ -2,8 +2,30 @@
 @import '../../../utils/fonts.less';
 @import '../../../utils/mixin.less';
 
-.application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers {
+.application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers.active {
-    overflow: auto;
+    padding: var(--spacer-8) 4px 0 10px;
+    scrollbar-gutter: stable;
+    .with-scroll-shadows();
+
+    .actions-section {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 10px;
+        margin-bottom: 10px;
+        gap: 20px;
+        background-color: light-dark(@dark-blue-10, @golden-10);
+
+        button {
+            span {
+                font-size: 12px;
+            }
+        }
+
+        .active-action {
+            animation: glow 0.75s infinite alternate;
+        }
+    }
 
     .actors-list {
         display: flex;

styles/less/sheets/actors/party/sheet.less

@@ -17,35 +17,10 @@
 });
 
 .application.sheet.daggerheart.actor.dh-style.party {
-    .tab {
+    .tab.active {
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
         flex: 1;
-        overflow-y: auto;
-        scrollbar-gutter: stable;
-
-        &.active {
-            overflow: auto;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .actions-section {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 10px;
-            margin-bottom: 10px;
-            gap: 20px;
-            background-color: light-dark(@dark-blue-10, @golden-10);
-
-            button {
-                span {
-                    font-size: 12px;
-                }
-            }
-
-            .active-action {
-                animation: glow 0.75s infinite alternate;
-            }
-        }
     }
 }

styles/less/utils/mixin.less

@@ -174,10 +174,10 @@
             --fade-start: 0;
         }
         10%, 100% {
-            --fade-start: 12px;
+            --fade-start: 14px;
         }
         0%, 90% {
-            --fade-end: 12px;
+            --fade-end: 14px;
         }
         100% {
             --fade-end: 0;

templates/sheets/actors/adversary/effects.hbs

@@ -1,6 +1,6 @@
 <section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
     data-group='{{tabs.effects.group}}'>
-    <div class="effects-sections">
+    <div class="effects-sections scroll-container">
         {{> 'daggerheart.inventory-items'
         title='DAGGERHEART.GENERAL.activeEffects'
         type='effect'

templates/sheets/actors/adversary/features.hbs

@@ -1,14 +1,17 @@
-<section class='tab {{tabs.features.cssClass}} {{tabs.features.id}}' data-tab='{{tabs.features.id}}'
+<section 
-    data-group='{{tabs.features.group}}'>
+    class="tab {{tabs.features.cssClass}} {{tabs.features.id}}"
-    <div class="feature-section">
+    data-tab="{{tabs.features.id}}"
-        {{> 'daggerheart.inventory-items'
+    data-group="{{tabs.features.group}}">
-            title=tabs.features.label
+    <div class="feature-section scroll-container">
-            type='feature'
+        {{#each @root.features as |item|}}
-            collection=@root.features
+            {{> "daggerheart.inventory-item"
-            hideContextMenu=true
+                item=item
-            hideModifyControls=true
+                type="feature"
-            canCreate=@root.editable
+                actorType=@root.document.type
-            showActions=@root.editable
+                hideContextMenu=true
-        }}
+                hideModifyControls=true
+                showActions=@root.editable
+            }}
+        {{/each}}
     </div>
 </section>

templates/sheets/actors/character/biography.hbs

@@ -1,9 +1,9 @@
 <section
-    class='tab {{tabs.biography.cssClass}} {{tabs.biography.id}}'
+    class="tab {{tabs.biography.cssClass}} {{tabs.biography.id}}"
-    data-tab='{{tabs.biography.id}}'
+    data-tab="{{tabs.biography.id}}"
     data-group='{{tabs.biography.group}}'
 >
-    <div class="items-section">
+    <div class="items-section scroll-container">
         <div class="characteristics-section flexrow">
             <div class="input">
                 <span>{{localize 'DAGGERHEART.ACTORS.Character.pronouns'}}</span>

templates/sheets/actors/character/effects.hbs

@@ -1,7 +1,7 @@
 <section class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}' data-tab='{{tabs.effects.id}}'
     data-group='{{tabs.effects.group}}'>
 
-    <div class="effects-sections">
+    <div class="effects-sections scroll-container">
         {{> 'daggerheart.inventory-items'
         title='DAGGERHEART.GENERAL.activeEffects'
         type='effect'

templates/sheets/actors/character/features.hbs

@@ -1,21 +1,23 @@
-<section class='tab {{tabs.features.cssClass}} {{tabs.features.id}}' data-tab='{{tabs.features.id}}'
+<section 
-    data-group='{{tabs.features.group}}'>
+    class="tab {{tabs.features.cssClass}} {{tabs.features.id}}"
-    <div class="features-sections">
+    data-tab="{{tabs.features.id}}"
+    data-group="{{tabs.features.group}}">
+    <div class="features-section scroll-container">
         {{#each document.system.sheetLists as |category|}}
-            {{#if (eq category.type 'feature' )}}
+            {{#if (eq category.type "feature" )}}
-                {{> 'daggerheart.inventory-items'
+                {{> "daggerheart.inventory-items"
                     title=category.title
-                    type='feature'
+                    type="feature"
-                    actorType='character'
+                    actorType="character"
                     collection=category.values
                     canCreate=@root.editable
                     showActions=@root.editable
                 }}
                 {{else if category.values}}
-                {{> 'daggerheart.inventory-items'
+                {{> "daggerheart.inventory-items"
                     title=category.title
-                    type='feature'
+                    type="feature"
-                    actorType='character'
+                    actorType="character"
                     collection=category.values
                     canCreate=false
                     showActions=@root.editable

templates/sheets/actors/character/header.hbs

@@ -79,8 +79,6 @@
                 {{/if}}
             </div>
         {{/if}}
-
-
     </div>
 
     <div class="character-row">

templates/sheets/actors/character/inventory.hbs

@@ -16,7 +16,7 @@
         {{> "systems/daggerheart/templates/sheets/global/partials/gold.hbs" currencies=inventory.currencies}}
     {{/if}}
 
-    <div class="items-section">
+    <div class="items-section scroll-container">
         {{> 'daggerheart.inventory-items'
         title='TYPES.Item.weapon'
         type='weapon'

templates/sheets/actors/character/loadout.hbs

@@ -20,7 +20,7 @@
         </button>
     </div>
 
-    <div class="items-section">
+    <div class="items-section scroll-container">
         {{> 'daggerheart.inventory-items'
         title='DAGGERHEART.GENERAL.Tabs.loadout'
         type='domainCard'

templates/sheets/actors/environment/features.hbs

@@ -1,17 +1,18 @@
 <section
-    class='tab {{tabs.features.cssClass}} {{tabs.features.id}}'
+    class="tab {{tabs.features.cssClass}} {{tabs.features.id}}"
-    data-tab='{{tabs.features.id}}'
+    data-tab="{{tabs.features.id}}"
-    data-group='{{tabs.features.group}}'
+    data-group="{{tabs.features.group}}"
 >
-    <div class="feature-section">
+    <div class="feature-section scroll-container">
-        {{> 'daggerheart.inventory-items'
+        {{#each @root.features as |item|}}
-        title=tabs.features.label
+            {{> "daggerheart.inventory-item"
-        type='feature'
+                item=item
-        collection=@root.features
+                type="feature"
-        hideContextMenu=true
+                actorType=@root.document.type
-        hideModifyControls=true
+                hideContextMenu=true
-        canCreate=@root.editable
+                hideModifyControls=true
-        showActions=@root.editable
+                showActions=@root.editable
-        }}
+            }}
+        {{/each}}
     </div>
 </section>

templates/sheets/actors/environment/potentialAdversaries.hbs

@@ -3,7 +3,7 @@
     data-tab='{{tabs.potentialAdversaries.id}}'
     data-group='{{tabs.potentialAdversaries.group}}'
 >    
-    <div class="items-section">
+    <div class="items-section scroll-container">
         {{#each document.system.potentialAdversaries as |category categoryId|}}
             {{> 'daggerheart.inventory-items'
             title=category.label

templates/sheets/actors/party/inventory.hbs

@@ -19,7 +19,7 @@
         {{> "systems/daggerheart/templates/sheets/global/partials/gold.hbs" currencies=inventory.currencies}}
     {{/if}}
 
-    <div class="items-section">
+    <div class="items-section scroll-container">
         {{> 'daggerheart.inventory-items'
         title='TYPES.Item.weapon'
         type='weapon'