From 76736a35bfc9c3080b31bb2b646367704443d74c Mon Sep 17 00:00:00 2001
From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com>
Date: Sat, 26 Feb 2022 05:06:32 +0300
Subject: [PATCH] Add fadeout in the search

---
 public/src/css/search.css   | 10 ++++++++++
 public/src/css/view.css     |  4 ++--
 public/src/js/songselect.js |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/src/css/search.css b/public/src/css/search.css
index 624a911..d353b2d 100644
--- a/public/src/css/search.css
+++ b/public/src/css/search.css
@@ -110,6 +110,16 @@
 	width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em);
 }
 
+.song-search-result-info::after {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 2em;
+	height: 100%;
+}
+
 .song-search-result-subtitle {
     display: block;
     font-size: 0.8em;
diff --git a/public/src/css/view.css b/public/src/css/view.css
index 7b20e5d..709009f 100644
--- a/public/src/css/view.css
+++ b/public/src/css/view.css
@@ -209,11 +209,11 @@ kbd{
 	right: 0;
 	width: 40px;
 	height: 100%;
-	background-image: linear-gradient(90deg, transparent, #f6ead4 90%);
+	background-image: linear-gradient(90deg, rgba(246, 234, 212, 0), #f6ead4 90%);
 }
 .view-content:not(:hover) .setting-box.selected .setting-name::after,
 .setting-box:hover .setting-name::after{
-	background-image: linear-gradient(90deg, transparent, #ffb547 90%);
+	background-image: linear-gradient(90deg, rgba(255, 181, 71, 0), #ffb547 90%);
 }
 .setting-value{
 	display: flex;
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 51500e5..10db167 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -99,6 +99,7 @@ class SongSelect{
 			document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }')
 			document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-title::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
 			document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-subtitle::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
+			document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-info::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), ' + skin.background + ' 90%) }')
 		})
 
 		this.font = strings.font