54 lines
2 KiB
TypeScript
54 lines
2 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
|
|
// Settings-window shell (room / space settings) — the self-styled Vojo card
|
|
// vocabulary (AiChatPrivacy / LogoutDialog): own surface, 16px radius,
|
|
// hairline border, deep shadow. Replaces the stock folds `Modal` whose flat
|
|
// square-ish chrome read as the old cinny dialog. The card only provides
|
|
// the shell; the content inside (PageRoot nav + page) paints its own panel
|
|
// tones.
|
|
export const Card = style({
|
|
width: `calc(100vw - 2 * ${config.space.S400})`,
|
|
maxWidth: toRem(860),
|
|
height: '85vh',
|
|
maxHeight: toRem(700),
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
backgroundColor: color.Background.Container,
|
|
borderRadius: toRem(16),
|
|
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
|
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
|
|
'@media': {
|
|
// Narrow viewports: the window goes (near) full-screen — the rounded
|
|
// floating card needs breathing room it doesn't have on a phone.
|
|
// `--vojo-safe-top` is reset to 0 INSIDE the card (the TSX), so the
|
|
// status-bar clearance comes straight from env() here — the card is
|
|
// genuinely top-of-screen in this branch.
|
|
'screen and (max-width: 600px)': {
|
|
width: '100vw',
|
|
maxWidth: '100vw',
|
|
height: '100dvh',
|
|
maxHeight: '100dvh',
|
|
borderRadius: 0,
|
|
border: 'none',
|
|
paddingTop: 'env(safe-area-inset-top, 0px)',
|
|
},
|
|
},
|
|
});
|
|
|
|
// Single-pane variant (room settings): no nav column, so the two-pane
|
|
// width reads as a stretched empty form. 560px ≈ the page pane's share of
|
|
// the wide layout (860 minus the ~300px nav). The media override keeps the
|
|
// phone branch full-screen — this class is emitted after `Card`, so its
|
|
// base maxWidth would otherwise beat Card's `100vw` media rule in the
|
|
// cascade.
|
|
export const CardNarrow = style({
|
|
maxWidth: toRem(560),
|
|
'@media': {
|
|
'screen and (max-width: 600px)': {
|
|
maxWidth: '100vw',
|
|
},
|
|
},
|
|
});
|