98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
import { define } from '@because/forge'
|
|
import { theme } from '../themes'
|
|
|
|
export const ErrorBox = define('ErrorBox', {
|
|
padding: '10px 12px',
|
|
background: theme('colors-errorBg'),
|
|
border: `1px solid ${theme('colors-errorBorder')}`,
|
|
borderRadius: 6,
|
|
color: theme('colors-error'),
|
|
fontSize: 14,
|
|
})
|
|
|
|
export const NetworkItem = define('NetworkItem', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '12px 16px',
|
|
cursor: 'pointer',
|
|
borderBottom: `1px solid ${theme('colors-border')}`,
|
|
selectors: {
|
|
'&:hover': { background: theme('colors-bgHover') },
|
|
'&:last-child': { borderBottom: 'none' },
|
|
},
|
|
})
|
|
|
|
export const NetworkListWrap = define('NetworkListWrap', {
|
|
maxHeight: 320,
|
|
overflowY: 'auto',
|
|
border: `1px solid ${theme('colors-border')}`,
|
|
borderRadius: theme('radius-md'),
|
|
})
|
|
|
|
export const NetworkMeta = define('NetworkMeta', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
color: theme('colors-textMuted'),
|
|
fontSize: 13,
|
|
})
|
|
|
|
export const NetworkName = define('NetworkName', {
|
|
fontWeight: 500,
|
|
})
|
|
|
|
export const SignalBarSegment = define('SignalBarSegment', {
|
|
width: 3,
|
|
borderRadius: 1,
|
|
variants: {
|
|
level: {
|
|
active: { background: theme('colors-statusRunning') },
|
|
inactive: { background: theme('colors-border') },
|
|
},
|
|
},
|
|
})
|
|
|
|
export const SignalBarsWrap = define('SignalBarsWrap', {
|
|
display: 'inline-flex',
|
|
alignItems: 'flex-end',
|
|
gap: 2,
|
|
height: 14,
|
|
})
|
|
|
|
export const Spinner = define('Spinner', {
|
|
width: 32,
|
|
height: 32,
|
|
border: `3px solid ${theme('colors-border')}`,
|
|
borderTopColor: theme('colors-statusRunning'),
|
|
borderRadius: '50%',
|
|
margin: '0 auto 16px',
|
|
animation: 'spin 0.8s linear infinite',
|
|
})
|
|
|
|
export const SpinnerWrap = define('SpinnerWrap', {
|
|
padding: '32px 0',
|
|
textAlign: 'center',
|
|
})
|
|
|
|
export const SuccessCheck = define('SuccessCheck', {
|
|
width: 48,
|
|
height: 48,
|
|
background: theme('colors-statusRunning'),
|
|
color: theme('colors-bg'),
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
borderRadius: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: '0 auto 12px',
|
|
})
|
|
|
|
export const WifiColumn = define('WifiColumn', {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 16,
|
|
maxWidth: 400,
|
|
})
|