From de2697fd147cc2ea3829c9e66ccaa831d6ebe986 Mon Sep 17 00:00:00 2001
From: memorydream <34763046+memorydream@users.noreply.github.com>
Date: Tue, 17 May 2022 15:38:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=AD=8C=E8=AF=8D=E9=A1=B5=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E6=95=88=E6=9E=9C=E7=BC=BA=E9=99=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/lyrics.vue | 67 +++++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index 346af1b510..2f5b7da1f7 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -192,16 +192,18 @@
               @click="clickLyricLine(line.time)"
               @dblclick="clickLyricLine(line.time, true)"
             >
-              <span v-if="line.contents[0]">{{ line.contents[0] }}</span>
-              <br />
-              <span
-                v-if="
-                  line.contents[1] &&
-                  $store.state.settings.showLyricsTranslation
-                "
-                class="translation"
-                >{{ line.contents[1] }}</span
-              >
+              <div class="content">
+                <span v-if="line.contents[0]">{{ line.contents[0] }}</span>
+                <br />
+                <span
+                  v-if="
+                    line.contents[1] &&
+                    $store.state.settings.showLyricsTranslation
+                  "
+                  class="translation"
+                  >{{ line.contents[1] }}</span
+                >
+              </div>
             </div>
           </div>
         </transition>
@@ -697,20 +699,23 @@ export default {
       &:hover {
         background: var(--color-secondary-bg-for-transparent);
       }
-      &:active {
-        transform: scale(0.95);
-      }
 
-      span {
-        opacity: 0.28;
-        cursor: default;
-        font-size: 0.9em;
+      .content {
+        transform-origin: center left;
+        transform: scale(0.95);
         transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      }
 
-      span.translation {
-        opacity: 0.2;
-        font-size: 0.825em;
+        span {
+          opacity: 0.28;
+          cursor: default;
+          font-size: 1em;
+          transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        span.translation {
+          opacity: 0.2;
+          font-size: 0.925em;
+        }
       }
     }
 
@@ -722,18 +727,16 @@ export default {
       margin-top: 0.1em;
     }
 
-    .highlight {
-      transform-origin: center left;
-      transform: scale(1.05);
-    }
-
-    .highlight span {
-      opacity: 0.98;
-      display: inline-block;
-    }
+    .highlight div.content {
+      transform: scale(1);
+      span {
+        opacity: 0.98;
+        display: inline-block;
+      }
 
-    .highlight span.translation {
-      opacity: 0.65;
+      span.translation {
+        opacity: 0.65;
+      }
     }
   }