mirror of https://git.sr.ht/~ashkeel/strimertul
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import { styled } from '~/ui/theme';
|
|
|
|
export const RewardItemContainer = styled('article', {
|
|
backgroundColor: '$gray2',
|
|
margin: '0.5rem 0',
|
|
padding: '0.5rem',
|
|
borderLeft: '5px solid $teal8',
|
|
borderRadius: '0.25rem',
|
|
borderBottom: '1px solid $gray4',
|
|
transition: 'all 50ms',
|
|
'&:hover': {
|
|
backgroundColor: '$gray3',
|
|
},
|
|
variants: {
|
|
status: {
|
|
enabled: {},
|
|
disabled: {
|
|
borderLeftColor: '$red6',
|
|
backgroundColor: '$gray3',
|
|
color: '$gray10',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export const RewardHeader = styled('header', {
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
alignItems: 'center',
|
|
marginBottom: '0.4rem',
|
|
});
|
|
|
|
export const RewardName = styled('span', {
|
|
color: '$gray12',
|
|
flex: 1,
|
|
fontWeight: 'bold',
|
|
variants: {
|
|
status: {
|
|
enabled: {},
|
|
disabled: {
|
|
color: '$gray9',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
export const RewardDescription = styled('span', {
|
|
flex: 1,
|
|
fontSize: '0.9rem',
|
|
color: '$gray11',
|
|
});
|
|
export const RewardActions = styled('div', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.25rem',
|
|
});
|
|
export const RewardID = styled('code', {
|
|
fontFamily: 'Space Mono',
|
|
color: '$teal11',
|
|
});
|
|
export const RewardCost = styled('div', {
|
|
fontSize: '0.9rem',
|
|
marginRight: '0.5rem',
|
|
});
|
|
export const RewardIcon = styled('div', {
|
|
width: '32px',
|
|
height: '32px',
|
|
backgroundColor: '$gray4',
|
|
borderRadius: '0.25rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
});
|