94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
|
|
// Desktop / tablet floating media window — a draggable overlay that
|
|
// sits ON TOP of the app (portaled to #portalContainer) instead of the
|
|
// old right-side flex pane. Position + size are owned by the component
|
|
// (inline `style`); chrome is deliberately minimal: a thin drag bar +
|
|
// close, plus a subtle resize grip. Zoom is wheel-only, navigation is
|
|
// keyboard / hover-chevrons (both live in `MediaViewerBody`).
|
|
export const floating = style({
|
|
position: 'fixed',
|
|
// Above normal app chrome (call rail, headers); folds modals/overlays
|
|
// still portal above this (zIndex.Max), which is correct for dialogs
|
|
// over the window.
|
|
zIndex: config.zIndex.Z400,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
backgroundColor: color.Background.Container,
|
|
color: color.Background.OnContainer,
|
|
borderRadius: toRem(12),
|
|
overflow: 'hidden',
|
|
boxShadow: config.shadow.E400,
|
|
border: `1px solid ${color.SurfaceVariant.Container}`,
|
|
});
|
|
|
|
// The only drag-to-move origin. `touch-action: none` so a touch-drag on
|
|
// a tablet moves the window instead of scrolling the page behind.
|
|
export const dragBar = style({
|
|
flexShrink: 0,
|
|
height: toRem(32),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: config.space.S200,
|
|
paddingLeft: config.space.S300,
|
|
paddingRight: config.space.S100,
|
|
cursor: 'move',
|
|
userSelect: 'none',
|
|
touchAction: 'none',
|
|
backgroundColor: color.Surface.Container,
|
|
borderBottom: `1px solid ${color.SurfaceVariant.Container}`,
|
|
});
|
|
|
|
// Faint filename — present but unobtrusive; doubles as part of the
|
|
// grab surface.
|
|
export const title = style({
|
|
flex: '1 1 auto',
|
|
minWidth: 0,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
fontSize: toRem(12),
|
|
color: color.Surface.OnContainer,
|
|
opacity: 0.7,
|
|
});
|
|
|
|
export const body = style({
|
|
position: 'relative',
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
});
|
|
|
|
// Subtle bottom-right corner resize affordance — no button, just a
|
|
// draggable corner that brightens on hover.
|
|
export const resizeGrip = style({
|
|
position: 'absolute',
|
|
right: 0,
|
|
bottom: 0,
|
|
width: toRem(20),
|
|
height: toRem(20),
|
|
cursor: 'nwse-resize',
|
|
touchAction: 'none',
|
|
zIndex: 3,
|
|
selectors: {
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
right: toRem(3),
|
|
bottom: toRem(3),
|
|
width: toRem(9),
|
|
height: toRem(9),
|
|
borderRight: `2px solid ${color.Surface.OnContainer}`,
|
|
borderBottom: `2px solid ${color.Surface.OnContainer}`,
|
|
borderBottomRightRadius: toRem(3),
|
|
opacity: 0.25,
|
|
transition: 'opacity 140ms ease',
|
|
},
|
|
'&:hover::after': { opacity: 0.6 },
|
|
},
|
|
});
|