Open-LLM-VTuber-Web/src/renderer/src/components/canvas/canvas-styles.tsx at 4c2dddb1015b457845c75e2ffcafd7353204002e · Open-LLM-VTuber/Open-LLM-VTuber-Web · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
export const canvasStyles = {
  background: {
    container: {
      position: 'relative',
      width: '100%',
      height: '100%',
      overflow: 'hidden',
      pointerEvents: 'auto',
    },
    image: {
      position: 'absolute',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      objectFit: 'cover',
      zIndex: 1,
    },
    video: {
      position: 'absolute' as const,
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      objectFit: 'cover' as const,
      zIndex: 1,
      transform: 'scaleX(-1)' as const,
    },
  },
  canvas: {
    container: {
      position: 'relative',
      width: '100%',
      height: '100%',
      zIndex: '1',
      pointerEvents: 'auto',
    },
  },
  subtitle: {
    container: {
      backgroundColor: 'rgba(0, 0, 0, 0.35)',
      backdropFilter: 'blur(16px) saturate(180%)',
      WebkitBackdropFilter: 'blur(16px) saturate(180%)',
      border: '1px solid rgba(255, 255, 255, 0.12)',
      padding: '15px 30px',
      borderRadius: '16px',
      minWidth: '60%',
      maxWidth: '95%',
      boxShadow: '0 4px 30px rgba(0, 0, 0, 0.15)',
    },
    text: {
      color: 'white',
      fontSize: '1.5rem',
      textAlign: 'center',
      lineHeight: '1.4',
      whiteSpace: 'pre-wrap',
    },
  },
  wsStatus: {
    container: {
      position: 'relative',
      // top: '20px',
      // left: '20px',
      zIndex: 2,
      padding: '8px 16px',
      borderRadius: '20px',
      fontSize: '14px',
      fontWeight: 'medium',
      color: 'white',
      transition: 'all 0.2s',
      cursor: 'pointer',
      userSelect: 'none',
      _hover: {
        opacity: 0.8,
      },
    },
  },
};