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

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

@ -91,7 +91,7 @@
} else { } else {
blurRadius = Math.min(offset * blurRatio, 16); blurRadius = Math.min(offset * blurRatio, 16);
} }
if (scrolling) blurRadius=0; if (scrolling) blurRadius = 0;
ref.style.filter = `blur(${blurRadius}px)`; ref.style.filter = `blur(${blurRadius}px)`;
} }
} }
@ -152,12 +152,12 @@
}} }}
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}
class="absolute w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] h-full class="absolute w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] h-full
-translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)] z-[100] " -translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)] z-[100]"
> >
</span> </span>
{#if debugMode} {#if debugMode}
@ -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,13 +203,12 @@
{/if} {/if}
</div> </div>
<style> <style>
.text-glow { .text-glow {
text-shadow: text-shadow:
0 0 3px #ffffff2c, 0 0 3px #ffffff2c,
0 0 6px #ffffff2c, 0 0 6px #ffffff2c,
0 15px 30px rgba(0, 0, 0, 0.11), 0 15px 30px rgba(0, 0, 0, 0.11),
0 5px 15px rgba(0, 0, 0, 0.08); 0 5px 15px rgba(0, 0, 0, 0.08);
} }
</style> </style>

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

@ -28,7 +28,13 @@ h2 {
body, body,
html { html {
position: fixed; position: fixed;
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.