c53adbc7e8
 
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { cssVarV2 } from '@toeverything/theme/v2';
|
|
import { style } from '@vanilla-extract/css';
|
|
|
|
export const trackStyle = style({
|
|
width: '100%',
|
|
height: '1px',
|
|
position: 'relative',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '12px 0',
|
|
cursor: 'pointer',
|
|
});
|
|
export const fakeTrackStyle = style({
|
|
width: '100%',
|
|
height: '1px',
|
|
backgroundColor: cssVarV2('layer/insideBorder/border'),
|
|
position: 'relative',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
});
|
|
|
|
export const filledTrackStyle = style({
|
|
height: '100%',
|
|
backgroundColor: cssVarV2('icon/primary'),
|
|
borderRadius: '1px',
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0',
|
|
});
|
|
|
|
export const thumbStyle = style({
|
|
width: '14px',
|
|
height: '14px',
|
|
backgroundColor: cssVarV2('icon/primary'),
|
|
borderRadius: '50%',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
cursor: 'pointer',
|
|
});
|
|
|
|
export const nodeStyle = style({
|
|
width: '8px',
|
|
height: '8px',
|
|
border: '2px solid transparent',
|
|
backgroundColor: cssVarV2('layer/insideBorder/border'),
|
|
borderRadius: '50%',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
cursor: 'pointer',
|
|
transform: 'translate(-50%, -50%)',
|
|
selectors: {
|
|
'&[data-active="true"]': {
|
|
backgroundColor: cssVarV2('icon/primary'),
|
|
},
|
|
},
|
|
});
|