119 lines
2.3 KiB
TypeScript
119 lines
2.3 KiB
TypeScript
 
|
import { style } from '@vanilla-extract/css';
|
||
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
||
|
|
|
||
|
|
export const Wrap = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
display: 'block',
|
||
|
|
width: toRem(480),
|
||
|
|
maxWidth: '100%',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const Grid = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
display: 'grid',
|
||
|
|
gap: toRem(3),
|
||
|
|
width: '100%',
|
||
|
|
borderRadius: config.radii.R400,
|
||
|
|
overflow: 'hidden',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const Cell = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
position: 'relative',
|
||
|
|
aspectRatio: '1 / 1',
|
||
|
|
minWidth: 0,
|
||
|
|
padding: 0,
|
||
|
|
border: 'none',
|
||
|
|
cursor: 'pointer',
|
||
|
|
backgroundColor: color.SurfaceVariant.Container,
|
||
|
|
color: color.SurfaceVariant.OnContainer,
|
||
|
|
overflow: 'hidden',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
selectors: {
|
||
|
|
'&:focus-visible': {
|
||
|
|
outline: `${config.borderWidth.B600} solid ${color.Primary.Main}`,
|
||
|
|
outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const CellImg = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
position: 'absolute',
|
||
|
|
inset: 0,
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
objectFit: 'cover',
|
||
|
|
display: 'block',
|
||
|
|
transition: 'transform 150ms',
|
||
|
|
selectors: {
|
||
|
|
[`${Cell}:hover &`]: {
|
||
|
|
transform: 'scale(1.03)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const CellBlur = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
position: 'absolute',
|
||
|
|
inset: 0,
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const PlayBadge = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
position: 'absolute',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
width: toRem(36),
|
||
|
|
height: toRem(36),
|
||
|
|
borderRadius: config.radii.Pill,
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.55)',
|
||
|
|
color: 'white',
|
||
|
|
pointerEvents: 'none',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const Footer = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: config.space.S200,
|
||
|
|
marginTop: config.space.S100,
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const FooterButton = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
background: 'none',
|
||
|
|
border: 'none',
|
||
|
|
padding: 0,
|
||
|
|
cursor: 'pointer',
|
||
|
|
color: 'inherit',
|
||
|
|
textDecoration: 'underline',
|
||
|
|
textDecorationColor: 'transparent',
|
||
|
|
selectors: {
|
||
|
|
'&:hover, &:focus-visible': {
|
||
|
|
textDecorationColor: 'currentColor',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|