Files
app/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts
T

78 lines
1.8 KiB
TypeScript

export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
VIDEO: {
container: {
flex: 2,
padding: '10px',
minWidth: '300px',
},
iframe: {
width: '100%',
height: '100%',
border: 'none',
},
},
TRANSCRIPT: {
container: {
flex: 1,
padding: '10px',
overflowY: 'auto',
maxHeight: '100%',
minWidth: '200px',
backgroundColor: 'var(--cc-navy-50)',
borderLeft: '1px solid var(--cc-border)',
},
title: {
margin: '0 0 10px 0',
fontSize: '16px',
fontWeight: 'bold',
color: 'var(--cc-text-primary)',
},
line: {
padding: '5px',
marginBottom: '5px',
borderRadius: '4px',
fontSize: '14px',
color: 'var(--cc-text-primary)',
backgroundColor: 'var(--cc-bg-canvas)',
border: '1px solid var(--cc-border-strong)',
},
activeLine: {
backgroundColor: 'var(--cc-navy-50)',
border: '1px solid var(--cc-action-primary)',
color: 'var(--cc-action-primary)',
fontWeight: 'bold',
boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
transform: 'scale(1.02)',
transition: 'all 0.2s ease-in-out',
},
timestamp: {
color: 'var(--cc-text-tertiary)',
marginRight: '8px',
fontWeight: 'bold',
},
loading: {
color: 'var(--cc-text-muted)',
fontStyle: 'italic',
},
},
TOOLS: {
container: {
padding: '10px',
display: 'flex',
flexDirection: 'column' as const,
gap: '10px',
},
button: {
padding: '8px 12px',
backgroundColor: 'var(--cc-navy-50)',
border: '1px solid var(--cc-border)',
borderRadius: '4px',
cursor: 'pointer',
color: 'var(--cc-text-primary)',
fontSize: '14px',
'&:hover': {
backgroundColor: 'var(--cc-border-strong)',
},
},
},
} as const