9f9173c691
* URL preview - WIP * fix url preview regex * update url match regex * add url preview components * add scroll btn url preview holder * add message body component * add url preview toggle in settings * update url regex * improve url regex * increase thumbnail size in url preview * hide url preview in encrypted rooms * add encrypted room url preview toggle
46 lines
994 B
TypeScript
46 lines
994 B
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const UrlPreview = style([
|
|
DefaultReset,
|
|
{
|
|
width: toRem(400),
|
|
minHeight: toRem(102),
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R300,
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const UrlPreviewImg = style([
|
|
DefaultReset,
|
|
{
|
|
width: toRem(100),
|
|
height: toRem(100),
|
|
objectFit: 'cover',
|
|
objectPosition: 'left',
|
|
backgroundPosition: 'start',
|
|
flexShrink: 0,
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const UrlPreviewContent = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S200,
|
|
},
|
|
]);
|
|
|
|
export const UrlPreviewDescription = style([
|
|
DefaultReset,
|
|
{
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 2,
|
|
WebkitBoxOrient: 'vertical',
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|