NScrollText: add fade in/out effect

Modules/Bar/Widgets/ActiveWindow.qml

@@ -254,6 +254,8 @@ Item {
 
         NScrollText {
           id: titleContainer
+          showGradientMasks: true
+          gradientColor: Style.capsuleColor
           text: windowTitle
           Layout.alignment: Qt.AlignVCenter
           maxWidth: {

Modules/Bar/Widgets/MediaMini.qml

@@ -322,6 +322,8 @@ Item {
         // Scrolling title
         NScrollText {
           id: titleContainer
+          showGradientMasks: true
+          gradientColor: Style.capsuleColor
           Layout.fillWidth: true
           Layout.alignment: Qt.AlignVCenter
           Layout.preferredHeight: capsuleHeight

Modules/Panels/Media/MediaPlayerPanel.qml

@@ -285,6 +285,8 @@ SmartPanel {
               spacing: 0
 
               NScrollText {
+                showGradientMasks: true
+                gradientColor: Color.mSurfaceVariant
                 Layout.fillWidth: true
                 maxWidth: parent.width
                 text: {
@@ -314,6 +316,8 @@ SmartPanel {
               }
 
               NScrollText {
+                showGradientMasks: true
+                gradientColor: Color.mSurfaceVariant
                 Layout.fillWidth: true
                 maxWidth: parent.width
                 text: {

Modules/Panels/Wallpaper/WallpaperPanel.qml

@@ -785,6 +785,8 @@ SmartPanel {
           text: isBrowseMode ? currentBrowsePath : WallpaperService.getMonitorDirectory(targetScreen?.name ?? "")
           Layout.fillWidth: true
           scrollMode: NScrollText.ScrollMode.Hover
+          showGradientMasks: true
+          gradientColor: Color.mSurfaceVariant
           NText {
             text: isBrowseMode ? currentBrowsePath : WallpaperService.getMonitorDirectory(targetScreen?.name ?? "")
             pointSize: Style.fontSizeS

Widgets/NScrollText.qml

@@ -123,6 +123,10 @@ Item {
     }
   }
 
+  property bool showGradientMasks: false
+  property color gradientColor: "transparent"
+  property real gradientWidth: 12
+
   RowLayout {
     id: scrollContainer
     height: parent.height
@@ -170,4 +174,45 @@ Item {
       easing.type: Easing.Linear
     }
   }
+
+  Rectangle {
+    anchors.left: parent.left
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    width: root.gradientWidth
+    z: 1
+    visible: root.showGradientMasks && (root.contentWidth > root.width)
+    opacity: root.state === NScrollText.ScrollState.Scrolling ? Math.min(1.0, -scrollContainer.x / (root.gradientWidth * 1.5)) : 0
+    gradient: Gradient {
+      orientation: Gradient.Horizontal
+      GradientStop {
+        position: 0.0
+        color: root.gradientColor
+      }
+      GradientStop {
+        position: 1.0
+        color: "transparent"
+      }
+    }
+  }
+
+  Rectangle {
+    anchors.right: parent.right
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    width: root.gradientWidth
+    z: 1
+    visible: root.showGradientMasks && (root.contentWidth > root.width)
+    gradient: Gradient {
+      orientation: Gradient.Horizontal
+      GradientStop {
+        position: 0.0
+        color: "transparent"
+      }
+      GradientStop {
+        position: 1.0
+        color: root.gradientColor
+      }
+    }
+  }
 }