src/app/components/LRCPlayer.styles.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import styled, { css } from "styled-components";

interface LineProps {
  $active: boolean;
  $next: boolean;
  $animate: boolean;
  $lrcColor: string;
  $fontColor: string;
}

export const Line = styled.div<LineProps>`
  min-height: 10px;
  padding: 14px 30px;

  font-size: 40px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-align: center;
  color: ${({ $fontColor }) => $fontColor};

  background: ${({ $lrcColor }) => `linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 50%,
    ${$lrcColor} 50%
  )`};
  background-size: 200% 100%;
  background-position: right bottom;

  ${({ $animate }) =>
    $animate &&
    css`
      transition:
        color 0.3s ease,
        background-position 0.5s ease;
    `}

  ${({ $active }) =>
    $active &&
    css`
      color: rgb(50, 50, 50);
      font-weight: 700;
      background-position: left bottom;
    `}
`;