styles/less/dialog/level-up/sheet.less

@@ -14,7 +14,8 @@
     .tab.active {
         flex: 1;
         overflow: auto;
-        .with-scroll-shadows();
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
     }
 
     div[data-application-part='form'] {

styles/less/dialog/level-up/summary-container.less

@@ -18,7 +18,7 @@
         overflow: auto;
         padding: 10px 0;
         max-height: 700px;
-        .with-scroll-shadows();
+        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
 
         .level-achievements-container,
         .level-advancements-container {

styles/less/global/elements.less

@@ -283,7 +283,7 @@
         }
 
         &.fit-height {
-            flex: 1;
+            height: 95%;
         }
 
         &.flex {

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

@@ -38,23 +38,11 @@
     }
 
     .tab.inventory {
-        .gold-section {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
+        .search-section {
+            display: flex;
             gap: 10px;
-            padding: 10px 10px 0;
-
-            .input {
-                color: light-dark(@dark, @beige);
-            }
+            align-items: center;
         }
-    }
-
-    .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);
@@ -84,11 +72,22 @@
                 height: 32px;
                 position: absolute;
                 right: 20px;
-                font-size: var(--font-size-16);
+                font-size: 16px;
                 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 {

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

@@ -1,5 +1,4 @@
 @import '../../../utils/colors.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
     .tab.effects {
@@ -8,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();
         }
     }
 }

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.adversary {
     .tab.features {
@@ -9,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();
         }
     }
 }

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

@@ -3,5 +3,3 @@
 @import './sheet.less';
 @import './sidebar.less';
 @import './effects.less';
-@import './notes.less';
-

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/sidebar.less

@@ -286,8 +286,9 @@
             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;

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.biography {
@@ -10,10 +9,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 {

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.effects {
@@ -9,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();
         }
     }
 }

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.features {
@@ -9,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();
         }
     }
 }

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.character {
     .tab.inventory {
@@ -9,9 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            padding: 20px 0;
         }
     }
 }

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

@@ -1,10 +1,48 @@
 @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;
@@ -52,9 +90,8 @@
             gap: 10px;
             height: 100%;
             overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 20px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
+            padding: 20px 0;
         }
     }
 }

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;

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

styles/less/sheets/actors/companion/sheet.less

@@ -10,16 +10,3 @@
         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;
-    }
-}

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.environment {
     .tab.features {
@@ -9,8 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
         }
     }
 }

styles/less/sheets/actors/environment/potentialAdversaries.less

@@ -7,8 +7,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
         }
     }
 }

styles/less/sheets/actors/npc/features.less

@@ -11,8 +11,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%);
+            padding-bottom: 20px;
         }
     }
 }

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

@@ -1,6 +1,5 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
-@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.party {
     .tab.inventory {
@@ -9,9 +8,8 @@
             flex-direction: column;
             gap: 10px;
             overflow-y: auto;
-            margin-top: 20px;
-            padding-bottom: 4px;
-            .with-scroll-shadows();
+            mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+            padding: 20px 0;
         }
     }
 }

styles/less/ui/item-browser/item-browser.less

@@ -1,6 +1,5 @@
 @import '../../utils/colors.less';
 @import '../../utils/fonts.less';
-@import '../../utils/mixin.less';
 
 .application.daggerheart.dh-style.compendium-browser {
     border: initial;
@@ -243,7 +242,6 @@
         .compendium-sidebar > .folder-list {
             overflow-y: auto;
             scrollbar-gutter: stable;
-            .with-scroll-shadows();
         }
 
         .item-list-header,

styles/less/utils/mixin.less

@@ -160,47 +160,3 @@
         @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: "<length>";
-        inherits: false;
-        initial-value: 0;
-    }
-
-    @property --fade-end {
-        syntax: "<length>";
-        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%
-    );
-}