117 lines
2.3 KiB
TypeScript
117 lines
2.3 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const TikTokEmbed = style([
|
|
DefaultReset,
|
|
{
|
|
width: toRem(360),
|
|
maxWidth: '100%',
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R300,
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const TikTokEmbedHeader = style([
|
|
DefaultReset,
|
|
{
|
|
padding: `${config.space.S200} ${config.space.S300}`,
|
|
backgroundColor: color.SurfaceVariant.ContainerActive,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: config.space.S200,
|
|
},
|
|
]);
|
|
|
|
export const TikTokEmbedInfo = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: config.space.S100,
|
|
flex: 1,
|
|
minWidth: 0,
|
|
},
|
|
]);
|
|
|
|
export const TikTokEmbedTitle = style({
|
|
color: color.Primary.Main,
|
|
textDecoration: 'none',
|
|
fontWeight: config.fontWeight.W500,
|
|
':hover': {
|
|
textDecoration: 'underline',
|
|
},
|
|
});
|
|
|
|
export const TikTokEmbedAuthor = style({
|
|
color: color.SurfaceVariant.OnContainer,
|
|
textDecoration: 'none',
|
|
opacity: 0.8,
|
|
':hover': {
|
|
textDecoration: 'underline',
|
|
opacity: 1,
|
|
},
|
|
});
|
|
|
|
export const TikTokEmbedLink = style({
|
|
color: color.Success.Main,
|
|
textDecoration: 'none',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
':hover': {
|
|
textDecoration: 'underline',
|
|
},
|
|
});
|
|
|
|
export const TikTokThumbnailContainer = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'relative',
|
|
width: '100%',
|
|
height: toRem(550),
|
|
backgroundColor: '#000',
|
|
display: 'block',
|
|
},
|
|
]);
|
|
|
|
export const TikTokThumbnailButton = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'relative',
|
|
width: '100%',
|
|
height: toRem(550),
|
|
border: 'none',
|
|
padding: 0,
|
|
cursor: 'pointer',
|
|
backgroundColor: '#000',
|
|
display: 'block',
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const TikTokThumbnail = style([
|
|
DefaultReset,
|
|
{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'block',
|
|
objectFit: 'cover',
|
|
objectPosition: 'center',
|
|
},
|
|
]);
|
|
|
|
export const TikTokEmbedContainer = style([
|
|
DefaultReset,
|
|
{
|
|
width: '100%',
|
|
height: toRem(550),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#000',
|
|
},
|
|
]);
|