128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
// Mobile members horseshoe — exact mirror of the 1:1 profile
|
|
// horseshoe in `RoomViewProfilePanel.css.ts`. Same silhouette
|
|
// wrapper geometry, same handle, same chatBody gap + radius
|
|
// constants — both ends of the chat read with identical visual
|
|
// language. Kept as a separate file (rather than reusing the profile
|
|
// CSS) because the two horseshoes can diverge in the future without
|
|
// rippling regressions through the other surface.
|
|
|
|
import { style } from '@vanilla-extract/css';
|
|
import { color, toRem } from 'folds';
|
|
|
|
// Re-export the two horseshoe constants from the profile panel so any
|
|
// future tweak (e.g. radius=28 trial) lives in one place.
|
|
export { HORSESHOE_GAP_PX, HORSESHOE_RADIUS_PX } from './RoomViewProfilePanel.css';
|
|
|
|
// Re-export the avatar-full-view styles from the profile panel — both
|
|
// the embedded user-profile branch (tap on member row → tap on avatar)
|
|
// and the group-hero branch (tap on group avatar) use the same
|
|
// silhouette-filling overlay treatment. Keeping the styles in one
|
|
// place ensures the two surfaces stay visually identical.
|
|
export { avatarFullView, avatarFullImage, avatarFullFallback } from './RoomViewProfilePanel.css';
|
|
|
|
export const container = style({
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
minWidth: 0,
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
export const silhouette = style({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexShrink: 0,
|
|
overflow: 'hidden',
|
|
backgroundColor: color.Background.Container,
|
|
willChange: 'border-bottom-left-radius, border-bottom-right-radius',
|
|
});
|
|
|
|
export const panelViewport = style({
|
|
position: 'relative',
|
|
width: '100%',
|
|
overflow: 'hidden',
|
|
willChange: 'height',
|
|
touchAction: 'pan-y',
|
|
userSelect: 'none',
|
|
});
|
|
|
|
// Anchor at the top so the list slides downward as the viewport grows
|
|
// — title strip + first group label become visible first. Mirrors the
|
|
// profile panel's emerge direction. `padding-top: var(--vojo-safe-top)`
|
|
// keeps the list clear of the Android status-bar icons in the open
|
|
// state.
|
|
export const panelContent = style({
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
boxSizing: 'border-box',
|
|
paddingTop: 'var(--vojo-safe-top, 0px)',
|
|
});
|
|
|
|
export const panelInner = style({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
});
|
|
|
|
// Wrapper around the `MembersList` so the host can switch overflow on
|
|
// when content exceeds the safety cap. Same idiom as `panelScroll` in
|
|
// the profile panel — the list owns its own scroll, but at the rail
|
|
// boundary the host still hides chrome and toggles overflow.
|
|
export const panelScroll = style({
|
|
flex: 1,
|
|
minHeight: 0,
|
|
scrollbarWidth: 'none',
|
|
selectors: {
|
|
'&::-webkit-scrollbar': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const panelHandle = style({
|
|
flexShrink: 0,
|
|
height: toRem(20),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
cursor: 'grab',
|
|
touchAction: 'none',
|
|
selectors: {
|
|
'&:active': { cursor: 'grabbing' },
|
|
},
|
|
});
|
|
|
|
export const panelHandleBar = style({
|
|
width: toRem(36),
|
|
height: toRem(4),
|
|
borderRadius: toRem(4),
|
|
backgroundColor: color.Surface.ContainerLine,
|
|
});
|
|
|
|
export const headerViewport = style({
|
|
flexShrink: 0,
|
|
overflow: 'hidden',
|
|
willChange: 'height',
|
|
userSelect: 'none',
|
|
});
|
|
|
|
export const headerViewportInner = style({
|
|
boxSizing: 'border-box',
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
paddingTop: 'var(--vojo-safe-top, 0px)',
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
});
|
|
|
|
export const chatBody = style({
|
|
display: 'flex',
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
minWidth: 0,
|
|
minHeight: 0,
|
|
willChange: 'margin-top, border-top-left-radius, border-top-right-radius',
|
|
});
|