Merge pull request #713 from Bottersnike/fix/table-banner-gradient

client/src/_style/base.scss

@@ -63,3 +63,24 @@
 .display-block {
 	display: block;
 }
+
+.banner-td {
+	position: relative;
+	z-index: 1;
+
+	&::before {
+		content: "";
+		display: block;
+		background-image: var(--banner-url);
+		mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: inherit;
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+	}
+}

client/src/components/tables/cells/TitleCell.tsx

@@ -28,14 +28,14 @@ export default function TitleCell({
 	let center = false;
 
 	if (game === "popn" && chart) {
-		backgroundImage = `linear-gradient(to left, rgba(19, 19, 19, 0.8), rgba(19, 19, 19, 1)), url(${ToCDNURL(
+		backgroundImage = `url(${ToCDNURL(
 			`/misc/popn/banners/${(chart as any).data.inGameID}.png`
 		)})`;
 	} else if (game === "itg") {
 		const banner = (song as SongDocument<"itg">).data.banner;
 
 		if (banner) {
-			backgroundImage = `linear-gradient(to left, rgba(19, 19, 19, 0.8), rgba(19, 19, 19, 1)), url(${ToCDNURL(
+			backgroundImage = `url(${ToCDNURL(
 				`/misc/itg/banners/${encodeURIComponent(banner)}.png`
 			)})`;
 			center = true;
@@ -48,11 +48,10 @@ export default function TitleCell({
 				textAlign: "left",
 				minWidth: "140px",
 				maxWidth: "300px",
-				backgroundRepeat: "no-repeat",
-				backgroundSize: "cover",
-				backgroundImage,
+				["--banner-url" as string]: backgroundImage,
 				backgroundPosition: center ? "center" : undefined,
 			}}
+			className="banner-td"
 		>
 			{game === "popn" && (
 				<>