Styling pass for scrollbars, fieldsets, and scroll shadows

styles/less/global/elements.less

@@ -261,10 +261,14 @@
 
     fieldset {
         align-items: center;
-        margin-top: 5px;
         border-radius: 6px;
         border-color: @color-fieldset-border;
 
+        /* Left and right side spacing is set up so that content starts at 15px left indent */
+        margin-top: 5px;
+        padding-inline: 7px;
+        margin-inline: 6px;
+
         &.glassy {
             background-color: light-dark(@dark-blue-10, @golden-10);
             border-color: transparent;
@@ -501,7 +505,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 {

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

@@ -39,6 +39,7 @@
 
     .window-header > .attribution-header-label {
         margin-right: var(--spacer-4);
+        pointer-events: none;
     }
 
     .tab.inventory {
@@ -46,7 +47,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

@@ -3,13 +3,20 @@
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
     .tab.effects {
+        margin-top: var(--spacer-12);
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        .with-scroll-shadows();
         .effects-sections {
             display: flex;
             flex-direction: column;
             gap: 10px;
-            overflow-y: auto;
+        }
-            padding-bottom: 20px;
+        fieldset {
-            .with-scroll-shadows();
+            margin-right: 0; // scroll gutter compensation
+            &:first-child {
+                margin-top: 0;
+            }
         }
     }
 }

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

@@ -3,14 +3,17 @@
 @import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
-    .tab.features {
+    .tab.features.active {
+        position: relative;
+        margin-top: var(--spacer-8);
+        padding: var(--spacer-8) 2px 0 var(--left-indent);
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        .with-scroll-shadows();
         .feature-section {
             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(--left-indent);
             padding-right: 15px;
         }
 
@@ -75,6 +75,7 @@
 
         .tab-navigation {
             margin-top: 0;
+            margin-bottom: 0;
             button[data-action="openSettings"] {
                 margin-right: 12px;
             }

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,8 @@
 .application.sheet.daggerheart.actor.dh-style.adversary .tab.notes.active {
-    padding-bottom: 20px;
+    padding-top: var(--spacer-16);
+    padding-left: var(--left-indent);
+    .editor-content {
+        scrollbar-gutter: stable;
+        .with-scroll-shadows();
+    }
 }

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

@@ -2,6 +2,8 @@
 @import '../../../utils/fonts.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
+    --left-indent: 15px;
+
     .window-content {
         display: grid;
         grid-template-columns: 275px 1fr;
@@ -9,28 +11,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: 0;
-
+            margin-right: 1px;
-        .adversary-header-sheet {
+            margin-bottom: 12px;
-            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 {
+    .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;
-
-        .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,12 +4,14 @@
 
 .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();
         }
     }

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,15 @@
 <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>

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,15 @@
     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>

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>