38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, toRem } from 'folds';
|
|
import { VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';
|
|
|
|
// Right-side media pane. Much wider than the profile pane —
|
|
// images need room to read comfortably. `clamp(480px, 50vw, 880px)`
|
|
// gives a generous minimum on narrow desktops while capping width
|
|
// on ultra-wide displays.
|
|
//
|
|
// Left edge rounded (TL + BL) to carve across the 12px horseshoe
|
|
// void gap rendered by `Room.tsx` — same design language as the
|
|
// profile pane and the page-nav <-> chat split.
|
|
//
|
|
// `Background.Container` (#0d0e11) chosen for the dark image
|
|
// backdrop — same logic as the mobile silhouette bg.
|
|
export const panel = style({
|
|
flexShrink: 0,
|
|
width: `clamp(${toRem(480)}, 50vw, ${toRem(880)})`,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: color.Background.Container,
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
|
|
borderBottomLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
|
|
});
|
|
|
|
// Body fills the remaining vertical space below `MediaViewerBody`'s
|
|
// own header. The pane has no separate `PageHeader` strip — the
|
|
// viewer body owns its chrome (close button, title, action row) so
|
|
// the header sits flush with the rounded TL corner.
|
|
export const body = style({
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
});
|