初次提交

2026-09-06 08:19:02 +08:00
commit 4ce4649aaf
1061 changed files with 337258 additions and 0 deletions
@@ -0,0 +1,197 @@
+/*
+    给各个内部元素使用的样式
+*/
+
+/* 给每行歌词应用的样式 */
+.lyricLine {
+  position: absolute;
+  backface-visibility: hidden;
+  transform-origin: left;
+  width: var(--amll-lp-width, 100%);
+  min-width: var(--amll-lp-width, 100%);
+  max-width: var(--amll-lp-width, 100%);
+  width: 100%;
+  height: fit-content;
+  padding: 0.5em 1em;
+  contain: content;
+  will-change: transform;
+  transition:
+    opacity 0.25s,
+    filter 0.2s,
+    background-color 0.25s,
+    box-shadow 0.25s;
+  box-sizing: border-box;
+  border-radius: 0.25em;
+
+  padding-left: 1em;
+  padding-right: 1em;
+
+  @media screen and (max-width: 500px) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &.dirty {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &:has(> *):hover {
+    background-color: var(--amll-lp-hover-bg-color, #fff1);
+    /* box-shadow: 0 0 0 4px var(--amll-lp-hover-bg-color, #fff1); */
+  }
+
+  &:has(> *):active {
+    background-color: var(--amll-lp-hover-bg-color, #ffffff05);
+    /* box-shadow: 0 0 0 var(--amll-lp-hover-bg-color, #fff1); */
+  }
+}
+
+.lyricBgLine {
+  opacity: 0.0001;
+  font-size: max(calc(1em * var(--amll-lp-bg-line-scale, 0.7)), 10px);
+  transition:
+    opacity 0.25s,
+    scale 0.5s,
+    filter 0.2s,
+    background-color 0.25s,
+    box-shadow 0.25s;
+  /* 因为字体大小缩小了，故内边距要和主行字体大小统一，行边距计算公式为 100% / font-size 转 em 单位 */
+  padding: 1vh calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, 0.7));
+
+  &.active {
+    transition:
+      opacity 0.5s 0.25s,
+      scale 1.5s cubic-bezier(0, 1, 0, 1) 0.25s,
+      filter 0.2s,
+      background-color 0.25s,
+      box-shadow 0.25s;
+    opacity: 0.4;
+  }
+}
+
+:global(.amll-lyric-player) {
+  &:hover .lyricLine {
+    filter: unset !important;
+  }
+
+  &.hasDuetLine {
+    .lyricLine:not(.lyricDuetLine) {
+      padding-right: 15%;
+    }
+
+    .lyricDuetLine {
+      padding-left: 15%;
+    }
+  }
+
+  &:not(:global(.playing)) > .lyricBgLine {
+    opacity: 0.4;
+  }
+}
+
+.lyricDuetLine {
+  text-align: right;
+  transform-origin: right;
+}
+
+.lyricMainLine {
+  transition: opacity 0.3s 0.1s;
+  margin: -1em;
+  padding: 1em;
+  /* 为主歌词行增加文字阴影，以提升亮色背景下的可读性 */
+  text-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.6),
+    0 0 10px rgba(0, 0, 0, 0.5);
+
+  & span {
+    display: inline-block;
+  }
+
+  .romanWord {
+    font-size: 0.5em;
+    line-height: 1em;
+  }
+
+  & > span,
+  span.emphasizeWrapper {
+    white-space: pre-wrap;
+    display: inline-block;
+    padding: 1em;
+    margin: -1em;
+    will-change: transform;
+
+    &.emphasize,
+    span.emphasize {
+      padding: 1em;
+      margin: -1em;
+      backface-visibility: hidden;
+
+      & > span {
+        padding: 1em;
+        margin: -1em;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+    }
+  }
+}
+
+.lyricSubLine {
+  font-size: max(0.5em, 10px);
+  line-height: 1.5em;
+  transition: opacity 0.2s 0.25s;
+  opacity: 0.3;
+  /* 为副歌词行增加轻度文字阴影，避免白字贴白背景 */
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.disableSpring > * {
+  transition:
+    filter 0.25s,
+    transform 0.5s,
+    background-color 0.25s,
+    box-shadow 0.25s;
+}
+
+.interludeDots {
+  height: clamp(0.5em, 1vh, 3em);
+  transition: opacity 0.25s;
+  transform-origin: center;
+  width: fit-content;
+  padding: 2.5% 0.75em;
+  position: absolute;
+  display: flex;
+  gap: 0.25em;
+  left: 0;
+  opacity: 0;
+
+  &.enabled {
+    opacity: 1;
+  }
+
+  & > * {
+    width: clamp(0.5em, 1vh, 3em);
+    height: clamp(0.5em, 1vh, 3em);
+    display: inline-block;
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    background-color: var(--amll-lp-color, white);
+    margin-right: 4px;
+  }
+
+  &.duet {
+    right: 0;
+    transform-origin: center;
+  }
+}
+
+@supports (mix-blend-mode: plus-lighter) {
+  .lyricSubLine {
+    opacity: 0.3;
+  }
+}
+
+.tmpDisableTransition {
+  transition: none !important;
+}