Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/lyrics/lyrics.module.css

@@ -0,0 +1,49 @@
+.actions-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 50;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+        opacity: 1 !important;
+    }
+
+    &:focus-within {
+        opacity: 1 !important;
+    }
+}
+
+.lyrics-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+        .actions-container {
+            opacity: 0.6;
+        }
+    }
+}
+
+.scroll-container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    mask-image: linear-gradient(
+        180deg,
+        transparent 5%,
+        rgb(0 0 0 / 100%) 20%,
+        rgb(0 0 0 / 100%) 85%,
+        transparent 95%
+    );
+}