fix: 歌词页视觉效果缺陷 (#1649)

src/views/lyrics.vue

@@ -192,6 +192,7 @@
               @click="clickLyricLine(line.time)"
               @dblclick="clickLyricLine(line.time, true)"
             >
+              <div class="content">
                 <span v-if="line.contents[0]">{{ line.contents[0] }}</span>
                 <br />
                 <span
@@ -204,6 +205,7 @@
                 >
               </div>
             </div>
+          </div>
         </transition>
       </div>
       <div class="close-button" @click="toggleLyrics">
@@ -697,20 +699,23 @@ export default {
       &:hover {
         background: var(--color-secondary-bg-for-transparent);
       }
-      &:active {
+
+      .content {
+        transform-origin: center left;
         transform: scale(0.95);
-      }
+        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
         span {
           opacity: 0.28;
           cursor: default;
-        font-size: 0.9em;
+          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.825em;
+          font-size: 0.925em;
+        }
       }
     }
 
@@ -722,20 +727,18 @@ export default {
       margin-top: 0.1em;
     }
 
-    .highlight {
-      transform-origin: center left;
-      transform: scale(1.05);
-    }
-
-    .highlight span {
+    .highlight div.content {
+      transform: scale(1);
+      span {
         opacity: 0.98;
         display: inline-block;
       }
 
-    .highlight span.translation {
+      span.translation {
         opacity: 0.65;
       }
     }
+  }
 
   ::-webkit-scrollbar {
     display: none;