78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
 
|
import { style } from '@vanilla-extract/css';
|
||
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
||
|
|
|
||
|
|
const BAR_HEIGHT = toRem(32);
|
||
|
|
const CONTROL_WIDTH = toRem(46);
|
||
|
|
|
||
|
|
export const TitleBar = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'stretch',
|
||
|
|
flexShrink: 0,
|
||
|
|
height: BAR_HEIGHT,
|
||
|
|
width: '100%',
|
||
|
|
backgroundColor: color.SurfaceVariant.Container,
|
||
|
|
color: color.SurfaceVariant.OnContainer,
|
||
|
|
borderBottom: `${toRem(1)} solid ${color.SurfaceVariant.ContainerLine}`,
|
||
|
|
// Sit above app content but never intercept scroll etc. below the bar.
|
||
|
|
userSelect: 'none',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
// The draggable region carries `data-tauri-drag-region`; it must expand to fill
|
||
|
|
// the free space so most of the bar is grabbable.
|
||
|
|
export const DragRegion = style({
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
flexGrow: 1,
|
||
|
|
minWidth: 0,
|
||
|
|
gap: config.space.S200,
|
||
|
|
paddingInline: config.space.S300,
|
||
|
|
});
|
||
|
|
|
||
|
|
export const Brand = style({
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: config.space.S200,
|
||
|
|
// Children shouldn't swallow the drag; the region itself owns the attribute.
|
||
|
|
pointerEvents: 'none',
|
||
|
|
});
|
||
|
|
|
||
|
|
export const Controls = style({
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'stretch',
|
||
|
|
flexShrink: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
export const ControlButton = style([
|
||
|
|
DefaultReset,
|
||
|
|
{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
width: CONTROL_WIDTH,
|
||
|
|
height: '100%',
|
||
|
|
padding: 0,
|
||
|
|
border: 'none',
|
||
|
|
cursor: 'pointer',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
color: 'inherit',
|
||
|
|
transition: 'background-color 100ms ease',
|
||
|
|
selectors: {
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: color.SurfaceVariant.ContainerLine,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
export const ControlButtonClose = style({
|
||
|
|
selectors: {
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: color.Critical.Main,
|
||
|
|
color: color.Critical.OnMain,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|