Styling pass for scrollbars, fieldsets, and scroll shadows

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,

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

@@ -42,7 +42,7 @@
             display: grid;
             grid-template-columns: 1fr 1fr 1fr 1fr;
             gap: 10px;
-            padding: 10px 10px 0;
+            padding: 12px 12px 0 10px;
 
             .input {
                 color: light-dark(@dark, @beige);

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

@@ -8,7 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 20px;
+            padding-bottom: 4px;
+            scrollbar-gutter: stable;
             .with-scroll-shadows();
         }
     }

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

@@ -3,14 +3,27 @@
 @import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
-    .tab.features {
+    .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;
-            padding-bottom: 20px;
+            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);
+        }
     }
 }

styles/less/sheets/actors/adversary/index.less

@@ -1,7 +1,6 @@
-@import './features.less';
-@import './header.less';
 @import './sheet.less';
+@import './header.less';
+@import './features.less';
 @import './sidebar.less';
 @import './effects.less';
 @import './notes.less';
-

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

@@ -1,3 +1,7 @@
 .application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active {
-    padding-bottom: 20px;
+    padding: 6px 0 4px 15px;
+    .editor-content {
+        scrollbar-gutter: stable;
+        .with-scroll-shadows();
+    }
 }

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

@@ -9,28 +9,31 @@
         height: 100%;
         width: 100%;
         padding-bottom: 0;
+    }
 
-        .adversary-sidebar-sheet {
+    .adversary-sidebar-sheet {
-            grid-row: 1 / span 2;
+        grid-row: 1 / span 2;
-            grid-column: 1;
+        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;
-        }
+            padding-right: 0;
-
+            margin-right: 2px;
-        .adversary-header-sheet {
+            margin-bottom: 16px;
-            grid-row: 1;
-            grid-column: 2;
-        }
-
-        .tab {
-            grid-row: 2;
-            grid-column: 2;
-            &.active {
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-            }
         }
     }
 }

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

@@ -11,8 +11,9 @@
             height: 100%;
             overflow-y: auto;
             padding-top: 8px;
-            padding-bottom: 20px;
+            padding-bottom: 4px;
             height: 100%;
+            scrollbar-gutter: stable;
             .with-scroll-shadows();
         }
 

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

@@ -10,6 +10,7 @@
             gap: 10px;
             overflow-y: auto;
             padding-bottom: 20px;
+            scrollbar-gutter: stable;
             .with-scroll-shadows();
         }
     }

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

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

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

@@ -5,6 +5,7 @@
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.loadout {
         .search-section {
+            padding-right: 14px;
             .btn-toggle-view {
                 background: light-dark(@dark-blue-10, @dark-blue);
                 border: 1px solid @color-border;
@@ -52,8 +53,9 @@
             gap: 10px;
             height: 100%;
             overflow-y: auto;
+            scrollbar-gutter: stable;
             margin-top: 20px;
-            padding-bottom: 20px;
+            padding-bottom: 4px;
             .with-scroll-shadows();
         }
     }

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 {
+    .character-header-sheet {
-            grid-row: 1 / span 2;
+        position: relative;
-            grid-column: 1;
+        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;
-
-        .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;
-            }
         }
     }
 }

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

@@ -4,13 +4,25 @@
 
 .application.sheet.daggerheart.actor.dh-style.environment {
     .tab.features {
+        position: relative;
         .feature-section {
             display: flex;
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
+            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);
+        }
     }
 }

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

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

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();
+        }
+    }
+}

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,7 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
+            padding: 0 4px 4px 4px;
+            scrollbar-gutter: stable;
             .with-scroll-shadows();
         }
     }

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;

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

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

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

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

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();
+        }
+    }
+}

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

@@ -4,6 +4,7 @@
 
 .application.sheet.daggerheart.actor.dh-style.party .tab.partyMembers {
     overflow: auto;
+    .with-scroll-shadows();
 
     .actors-list {
         display: flex;

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

@@ -21,6 +21,8 @@
         flex: 1;
         overflow-y: auto;
         scrollbar-gutter: stable;
+        margin-right: 2px;
+        padding-right: 8px;
 
         &.active {
             overflow: auto;

templates/sheets/actors/adversary/features.hbs

@@ -1,14 +1,20 @@
 <section class='tab {{tabs.features.cssClass}} {{tabs.features.id}}' data-tab='{{tabs.features.id}}'
     data-group='{{tabs.features.group}}'>
     <div class="feature-section">
-        {{> '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>
+    {{#if @root.editable}}
+        <button data-action="createDoc" data-document-class="Item" data-type="feature" data-tooltip="{{localize 'DOCUMENT.Create' type=(localize 'TYPES.Item.feature')}}">
+            <i class="fa-solid fa-plus icon-button"></i>
+        </button>
+    {{/if}}
+</section>

templates/sheets/actors/adversary/notes.hbs

@@ -3,10 +3,7 @@
     data-tab='{{tabs.notes.id}}'
     data-group='{{tabs.notes.group}}'
 >
-    <fieldset class="fit-height">
+    {{formInput notes.field value=notes.value enriched=notes.enriched class="aaa" toggled=true}}
-        <legend>{{localize tabs.notes.label}}</legend>
-        {{formInput notes.field value=notes.value enriched=notes.enriched toggled=true}}
-    </fieldset>
 
     {{#if (and showAttribution document.system.attribution.artist)}}
         <label class="artist-attribution">{{localize "DAGGERHEART.GENERAL.artistAttribution" artist=document.system.attribution.artist}}</label>

templates/sheets/actors/environment/features.hbs

@@ -4,14 +4,20 @@
     data-group='{{tabs.features.group}}'
 >
     <div class="feature-section">
-        {{> '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
-        }}
+            }}
-    </div>
+        {{/each}}
+    </div>    
+    {{#if @root.editable}}
+        <button data-action="createDoc" data-document-class="Item" data-type="feature" data-tooltip="{{localize 'DOCUMENT.Create' type=(localize 'TYPES.Item.feature')}}">
+            <i class="fa-solid fa-plus icon-button"></i>
+        </button>
+    {{/if}}
 </section>

templates/sheets/actors/environment/notes.hbs

@@ -3,10 +3,7 @@
     data-tab='{{tabs.notes.id}}'
     data-group='{{tabs.notes.group}}'
 >
-    <fieldset class="fit-height">
+    {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-        <legend>{{localize tabs.notes.label}}</legend>
-        {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-    </fieldset>
 
     {{#if (and showAttribution document.system.attribution.artist)}}
         <label class="artist-attribution">{{localize "DAGGERHEART.GENERAL.artistAttribution" artist=document.system.attribution.artist}}</label>

templates/sheets/actors/party/notes.hbs

@@ -3,8 +3,5 @@
     data-tab='{{tabs.notes.id}}'
     data-group='{{tabs.notes.group}}'
 >
-    <fieldset class="fit-height">
+    {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-        <legend>{{localize tabs.notes.label}}</legend>
-        {{formInput notes.field value=notes.value enriched=notes.value toggled=true}}
-    </fieldset>
 </section>