pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use scale instead of font-size for active lyric

Browse source
This commit is contained in:
jeffvli 2023-06-04 15:45:55 -07:00 • committed by Jeff
parent 48dfd469ed
commit cf43bf360e
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/features/lyrics/lyric-line.tsx
View file

@ -8,19 +8,19 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
const StyledText = styled(TextTitle)` const StyledText = styled(TextTitle)`
color: var(--main-fg); color: var(--main-fg);
font-weight: 100; font-weight: 400;
font-size: 2vmax; font-size: 2.5vmax;
line-height: 3.5vmax; line-height: 1.5;
transform: scale(0.95);
opacity: 0.5; opacity: 0.5;
&.active { &.active {
font-weight: 800; font-weight: 800;
font-size: 2.5vmax; transform: scale(1);
line-height: 4vmax;
opacity: 1; opacity: 1;
} }
transition: opacity 0.3s ease-in-out, font-size 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
`; `;
export const LyricLine = ({ text, ...props }: LyricLineProps) => { export const LyricLine = ({ text, ...props }: LyricLineProps) => {