@applemusic-like-lyrics/core 0.5.0 → 0.5.2

package/dist/style.css

@@ -29,76 +29,46 @@
     --amll-lp-line-padding-x: 0;
   }
 }
-.FmKaba_lyricLine {
-  backface-visibility: hidden;
-  transform-origin: 0;
-  width: var(--amll-lp-width, 100%);
-  min-width: var(--amll-lp-width, 100%);
-  max-width: var(--amll-lp-width, 100%);
-  contain: content;
-  will-change: transform;
+.FmKaba_lyricLineWrapper {
   box-sizing: border-box;
-  border-radius: .25em;
   width: 100%;
-  height: fit-content;
-  padding: .5em 1em;
-  transition: opacity .25s, filter .2s, background-color .25s, box-shadow .25s;
+  padding: .4em var(--lyric-line-padding-x);
+  will-change: transform, opacity, filter;
+  border-radius: .25em;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .3em;
+  transition: opacity .4s, filter .4s, background-color .25s;
+  display: flex;
   position: absolute;
+  top: 0;
+  left: 0;
 
-  @media screen and (width <= 500px) {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  &.FmKaba_dirty {
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  &:has( > *):hover {
+  &:hover {
     background-color: var(--amll-lp-hover-bg-color, #fff1);
   }
 
-  &:has( > *):active {
+  &:active {
     background-color: var(--amll-lp-hover-bg-color, #ffffff05);
   }
 }
 
-.FmKaba_lyricBgLine {
-  opacity: .0001;
-  font-size: max(calc(1em * var(--amll-lp-bg-line-scale, .7)), 10px);
-  padding: 1vh
-		calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, .7));
-  transition: opacity .25s, scale .5s, filter .2s, background-color .25s, box-shadow .25s;
-
-  & .FmKaba_lyricMainLine {
-    padding: 1.2em 1em;
-  }
-
-  &.FmKaba_active {
-    opacity: .4;
-    transition: opacity .5s .25s, scale 1.5s cubic-bezier(0, 1, 0, 1) .25s, filter .2s, background-color .25s, box-shadow .25s;
-  }
-}
-
-.amll-lyric-player {
-  &:hover .FmKaba_lyricLine {
-    filter: unset !important;
-  }
-
-  &.FmKaba_hasDuetLine {
-    & .FmKaba_lyricLine:not(.FmKaba_lyricDuetLine) {
-      padding-right: 15%;
-    }
-
-    & .FmKaba_lyricDuetLine {
-      padding-left: 15%;
-    }
-  }
-
-  &:not(.playing) > .FmKaba_lyricBgLine {
-    opacity: .4;
-  }
+.FmKaba_lyricLine {
+  box-sizing: border-box;
+  width: var(--amll-lp-width, 100%);
+  min-width: var(--amll-lp-width, 100%);
+  max-width: var(--amll-lp-width, 100%);
+  contain: layout style paint;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 40px;
+  backface-visibility: hidden;
+  transform-origin: 0;
+  will-change: transform, filter, opacity;
+  height: fit-content;
+  margin: -.2em;
+  padding: .2em;
+  transition: box-shadow .25s;
+  position: relative;
 }
 
 .FmKaba_lyricDuetLine {
@@ -107,6 +77,7 @@
 }
 
 .FmKaba_lyricMainLine {
+  contain: layout style;
   margin: -1em;
   padding: 1em;
   transition: opacity .3s .1s;
@@ -147,8 +118,9 @@
 
   & > span, & span.FmKaba_emphasizeWrapper {
     white-space: pre-wrap;
-    will-change: transform;
     vertical-align: bottom;
+    will-change: transform, text-shadow;
+    contain: layout style;
     margin: -1em;
     padding: 1em;
     display: inline-block;
@@ -159,7 +131,7 @@
       padding: 1em;
 
       & > span {
-        will-change: transform;
+        will-change: transform, text-shadow;
         backface-visibility: hidden;
         margin: -1em;
         padding: 1em;
@@ -168,20 +140,89 @@
   }
 }
 
+.FmKaba_lyricBgLine {
+  opacity: .4;
+  font-size: max(calc(1em * var(--amll-lp-bg-line-scale, .7)), 10px);
+  transition: background-color .25s, box-shadow .25s;
+
+  & .FmKaba_lyricMainLine {
+    padding: 1.2em 1em;
+  }
+
+  &.FmKaba_active {
+    opacity: .4;
+    transition: background-color .25s, box-shadow .25s;
+  }
+}
+
 .FmKaba_lyricSubLine {
   opacity: .3;
   font-size: max(.5em, 10px);
   line-height: 1.5em;
   transition: opacity .2s .25s;
+
+  @supports (mix-blend-mode: plus-lighter) {
+    opacity: .3;
+  }
 }
 
-.FmKaba_disableSpring > * {
-  transition: filter .25s, transform .5s, background-color .25s, box-shadow .25s;
+.FmKaba_bottomLine {
+  cursor: default;
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 1.8em;
+
+  &:empty {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    display: none;
+  }
+}
+
+.FmKaba_bgWrapper {
+  top: 100%;
+  left: var(--lyric-line-padding-x);
+  z-index: -1;
+  align-items: inherit;
+  width: calc(100% - var(--lyric-line-padding-x) * 2);
+  visibility: visible;
+  pointer-events: auto;
+  opacity: 0;
+  transform-origin: 0 0;
+  flex-direction: column;
+  transition: opacity .3s;
+  display: flex;
+  position: absolute;
+}
+
+.FmKaba_bgWrapperTop {
+  transform-origin: 0 100%;
+  width: 100%;
+  margin-top: -999px;
+  position: relative;
+  top: auto;
+  bottom: auto;
+  left: 0;
+}
+
+.FmKaba_bgWrapperActive {
+  opacity: 1;
+  width: 100%;
+  position: relative;
+  top: auto;
+  bottom: auto;
+  left: 0;
+}
+
+.FmKaba_bgWrapperHidden {
+  visibility: hidden;
+  pointer-events: none;
 }
 
 .FmKaba_interludeDots {
-  transform-origin: center;
   opacity: 0;
+  transform-origin: center;
   gap: .25em;
   width: fit-content;
   height: clamp(.5em, 1vh, 3em);
@@ -196,8 +237,8 @@
   }
 
   & > * {
-    aspect-ratio: 1;
     background-color: var(--amll-lp-color, white);
+    aspect-ratio: 1;
     border-radius: 50%;
     width: clamp(.5em, 1vh, 3em);
     height: clamp(.5em, 1vh, 3em);
@@ -211,26 +252,53 @@
   }
 }
 
-@supports (mix-blend-mode: plus-lighter) {
-  .FmKaba_lyricSubLine {
-    opacity: .3;
-  }
+.FmKaba_disableSpring > *, .FmKaba_disableSpring .FmKaba_lyricLine {
+  transition: filter .25s, transform .5s, background-color .25s, box-shadow .25s;
 }
 
 .FmKaba_tmpDisableTransition {
   transition: none !important;
 }
 
-.FmKaba_bottomLine {
-  cursor: default;
-  padding-top: 0;
-  padding-bottom: 0;
-  line-height: 1.8em;
-}
+.amll-lyric-player {
+  --lyric-line-padding-x: 1em;
+
+  @media screen and (width <= 500px) {
+    --lyric-line-padding-x: 20px;
+  }
+
+  &:hover .FmKaba_lyricLine, &:hover .FmKaba_lyricLineWrapper {
+    filter: unset !important;
+  }
+
+  &:not(.FmKaba_playing) .FmKaba_bgWrapper {
+    opacity: 1;
+    width: 100%;
+    position: relative;
+    top: auto;
+    bottom: auto;
+    left: 0;
+  }
+
+  &.FmKaba_hasDuetLine {
+    & .FmKaba_lyricLine:not(.FmKaba_lyricDuetLine) {
+      padding-right: 15%;
+    }
+
+    & .FmKaba_lyricDuetLine {
+      padding-left: 15%;
+    }
+
+    & .FmKaba_lyricLineWrapper:has(.FmKaba_lyricDuetLine) {
+      align-items: flex-end;
+
+      & .FmKaba_bgWrapper {
+        transform-origin: 100% 0;
+      }
 
-.FmKaba_bottomLine:empty {
-  height: 0;
-  margin: 0;
-  padding: 0;
-  display: none;
+      & .FmKaba_bgWrapperTop {
+        transform-origin: 100% 100%;
+      }
+    }
+  }
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@applemusic-like-lyrics/core",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
   "repository": {
     "url": "https://github.com/amll-dev/applemusic-like-lyrics.git",
     "directory": "packages/core",
     "type": "git"
   },
-  "license": "GPL-3.0",
+  "license": "AGPL-3.0-only",
   "nx": {
     "tags": [
       "library"
@@ -58,8 +58,8 @@
     "stats.js": "^0.17.0",
     "typedoc": "^0.28.18",
     "typedoc-plugin-markdown": "^4.11.0",
-    "@tsdown/css": "^0.21.9",
-    "tsdown": "^0.21.9"
+    "@tsdown/css": "^0.22.0",
+    "tsdown": "^0.22.0"
   },
   "peerDependencies": {
     "@pixi/app": "*",