Begin skins frontend

packages/ui/src/components/base/ScrollablePanel.vue

@@ -55,6 +55,7 @@ onUnmounted(() => {
   }
 })
 function updateFade(scrollTop, offsetHeight, scrollHeight) {
+  console.log(scrollTop, offsetHeight, scrollHeight)
   scrollableAtBottom.value = Math.ceil(scrollTop + offsetHeight) >= scrollHeight
   scrollableAtTop.value = scrollTop <= 0
 }
@@ -64,6 +65,18 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
 </script>
 
 <style lang="scss" scoped>
+@property --_top-fade-height {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --_bottom-fade-height {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
 .scrollable-pane-wrapper {
   display: flex;
   flex-direction: column;
@@ -75,27 +88,23 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   display: flex;
   overflow: hidden;
   position: relative;
+  transition: --_top-fade-height 0.05s linear, --_bottom-fade-height 0.05s linear;
 
-  --_fade-height: 4rem;
+  --_fade-height: 3rem;
+
+  mask-image: linear-gradient(
+      transparent,
+      rgb(0 0 0 / 100%) var(--_top-fade-height, 0%),
+      rgb(0 0 0 / 100%) calc(100% - var(--_bottom-fade-height, 0%)),
+      transparent 100%
+  );
 
   &.top-fade {
-    mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height));
+    --_top-fade-height: var(--_fade-height);
   }
 
   &.bottom-fade {
-    mask-image: linear-gradient(
-      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
-      transparent 100%
-    );
-  }
-
-  &.top-fade.bottom-fade {
-    mask-image: linear-gradient(
-      transparent,
-      rgb(0 0 0 / 100%) var(--_fade-height),
-      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
-      transparent 100%
-    );
+    --_bottom-fade-height: var(--_fade-height);
   }
 }
 .scrollable-pane {