54 lines
2 KiB
TypeScript
54 lines
2 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
||
import { color, config, toRem } from 'folds';
|
||
|
||
// Small uniform rounding on ALL four corners (R400 = 8px) — the old
|
||
// asymmetric "notch toward sender" corner is gone; previews now read as
|
||
// plain rounded thumbnails on both own and peer sides.
|
||
const StreamMediaCornerSmall = config.radii.R400;
|
||
const StreamMediaCornerRound = config.radii.R500;
|
||
|
||
export const StreamMediaBubble = style({
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
backgroundColor: color.SurfaceVariant.Container,
|
||
maxWidth: '100%',
|
||
boxSizing: 'border-box',
|
||
flexShrink: 0,
|
||
borderRadius: StreamMediaCornerSmall,
|
||
// 1px frame drawn ABOVE the image via a pseudo-element. `inset
|
||
// box-shadow` would sit on the bg layer and get hidden by the
|
||
// `<img>` filling 100% × 100%; a real `border` would push the
|
||
// image's coordinate space and re-introduce the 1px chip-alignment
|
||
// offset we just removed. The pseudo sits at z-index 1 (above
|
||
// image's auto-stacked 0, below the username overlay at z 2),
|
||
// inherits the bubble's border-radius, and is pointer-events:none so
|
||
// clicks pass through to the image.
|
||
selectors: {
|
||
'&::after': {
|
||
content: '""',
|
||
position: 'absolute',
|
||
inset: 0,
|
||
border: `1.2px solid ${color.Surface.Container}`,
|
||
borderRadius: 'inherit',
|
||
pointerEvents: 'none',
|
||
zIndex: 1,
|
||
},
|
||
},
|
||
});
|
||
|
||
// Caption mini-bubble under the image. Keeps a slightly larger R500 radius,
|
||
// intentionally distinct from the preview bubble's uniform R400.
|
||
export const StreamMediaCaption = style({
|
||
marginTop: toRem(4),
|
||
backgroundColor: color.SurfaceVariant.Container,
|
||
color: color.SurfaceVariant.OnContainer,
|
||
border: `1px solid ${color.Surface.Container}`,
|
||
borderRadius: StreamMediaCornerRound,
|
||
paddingLeft: config.space.S300,
|
||
paddingRight: config.space.S300,
|
||
paddingTop: config.space.S200,
|
||
paddingBottom: config.space.S200,
|
||
maxWidth: '100%',
|
||
width: 'fit-content',
|
||
boxSizing: 'border-box',
|
||
});
|