alikia2x/aquavox
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

update: font and style

Browse Source
This commit is contained in:
alikia2x (寒寒) 2024-11-08 20:45:29 +08:00
parent 630692b507
commit 2d10240983
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
4 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/core/components/lyrics/lyricLine.svelte
View File

@ -152,7 +152,7 @@
}} }}
style="transform: translate3d({positionX}px, {positionY}px, 0); transition-property: text-shadow; style="transform: translate3d({positionX}px, {positionY}px, 0); transition-property: text-shadow;
transition-duration: 0.36s; transition-timing-function: ease-out; transition-duration: 0.36s; transition-timing-function: ease-out;
transform-origin: center left;" transform-origin: center left; font-family: LyricFont, sans-serif;"
> >
<span <span
bind:this={clickMask} bind:this={clickMask}
@ -166,14 +166,19 @@
</span> </span>
{/if} {/if}
{#if line.words !== undefined && line.words.length > 0} {#if line.words !== undefined && line.words.length > 0}
<span <span class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 `}>
class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 `}
>
{#each line.words as word} {#each line.words as word}
{#if word.word} {#if word.word}
{#each word.word.split("") as chr, i} {#each word.word.split('') as chr, i}
<span <span
class={(line.start <= progress && progress <= line.end && progress > (word.endTime - word.startTime) * ((i)/word.word.length) + word.startTime ? "opacity-100 text-glow" : "opacity-35") + " inline-block duration-300"} class={(line.start <= progress &&
progress <= line.end &&
progress > (word.endTime - word.startTime) * (i / word.word.length) + word.startTime
? 'opacity-100 text-glow'
: 'opacity-35') + ' inline-block ' +
(((word.endTime - word.startTime) > 0.6) ? '' : 'duration-200')}
style={((word.endTime - word.startTime) < 0.3) ? '' :
`transition-duration: ${(word.endTime - word.startTime) / 1.3}s;`}
> >
{chr} {chr}
</span> </span>
@ -183,7 +188,8 @@
</span> </span>
{:else} {:else}
<span <span
class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 duration-200 ${line.start <= progress && progress <= line.end ? "opacity-100 text-glow" : "opacity-35"}`} class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 duration-200
${line.start <= progress && progress <= line.end ? 'opacity-100 text-glow' : 'opacity-35'}`}
> >
{line.text} {line.text}
</span> </span>
@ -197,7 +203,6 @@
{/if} {/if}
</div> </div>
<style> <style>
.text-glow { .text-glow {
text-shadow: text-shadow:

6
packages/web/src/app.css
View File

@ -32,3 +32,9 @@ html {
overflow: hidden; overflow: hidden;
overscroll-behavior: none; overscroll-behavior: none;
} }
@font-face {
font-family: 'LyricFont';
src: url('/font.otf') format('opentype');
font-weight: 600; /* Semibold weight */
}

2
packages/web/src/app.html
View File

@ -3,8 +3,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!-- <link rel="icon" href="%sveltekit.assets%/favicon.png" /> --> <!-- <link rel="icon" href="%sveltekit.assets%/favicon.png" /> -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AquaVox</title> <title>AquaVox</title>
%sveltekit.head% %sveltekit.head%

BIN
packages/web/static/font.otf Normal file
View File

Binary file not shown.