forked from github/cinny
84 lines
1.6 KiB
TypeScript
84 lines
1.6 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const YouTubeCard = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'inline-block',
|
|
width: '100%',
|
|
maxWidth: toRem(480),
|
|
borderRadius: config.radii.R300,
|
|
overflow: 'hidden',
|
|
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
backgroundColor: '#000',
|
|
},
|
|
]);
|
|
|
|
export const YouTubeFrame = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'relative',
|
|
width: '100%',
|
|
aspectRatio: '16 / 9',
|
|
},
|
|
]);
|
|
|
|
export const YouTubeThumbButton = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
padding: 0,
|
|
border: 'none',
|
|
background: '#000',
|
|
cursor: 'pointer',
|
|
overflow: 'hidden',
|
|
|
|
':hover': {
|
|
filter: 'brightness(1.05)',
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const YouTubeThumbImg = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'block',
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
},
|
|
]);
|
|
|
|
export const YouTubePlayOverlay = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: toRem(64),
|
|
height: toRem(64),
|
|
borderRadius: '50%',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: '#fff',
|
|
pointerEvents: 'none',
|
|
},
|
|
]);
|
|
|
|
export const YouTubeIframe = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
border: 'none',
|
|
},
|
|
]);
|