From b3cf2ac67ead0296a09ff2e8bbb2fcdac9675301 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Tue, 30 Jan 2024 00:45:16 +0100
Subject: [PATCH] Switch to mask-image for fade-off effect in tabs

---
 scss/components/_tabBar.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/scss/components/_tabBar.scss b/scss/components/_tabBar.scss
index a9c9d4cb58..96df50749b 100644
--- a/scss/components/_tabBar.scss
+++ b/scss/components/_tabBar.scss
@@ -197,18 +197,13 @@
 	}
 	
 	.tab-name {
-		background: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px) text;
 		flex: 1 1 100%;
 		line-height: 1.38461538em;
 		margin-inline-start: 4px;
 		overflow: hidden;
 		text-align: left;
-		-webkit-text-fill-color: transparent;
 		white-space: nowrap;
-
-		@include state('.tab:first-child') {
-			background: linear-gradient(to left, transparent 0px, var(--fill-primary) 10px) text;
-		}
+		mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
 	}
 
 	.tab-icon {