1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { space } from '#/styles/tokens.css';
export const container = style({
display: 'flex',
flexDirection: 'row',
gap: space.md,
alignItems: 'flex-start',
marginRight: space.lg,
marginBottom: space.lg,
marginLeft: space.lg,
borderBottomWidth: 1,
borderBottomStyle: 'solid',
borderBottomColor: vars.palette.contrast_200,
paddingBottom: space.lg,
cursor: 'pointer',
userSelect: 'text',
});
export const content = style({
display: 'flex',
flex: 1,
flexDirection: 'column',
gap: space._2xs,
});
export const header = style({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingRight: space.xs,
});
export const name = style({
flexShrink: 1,
});
export const badge = style({
paddingLeft: space.xs,
});
export const bodyRow = style({
display: 'flex',
flexDirection: 'row',
gap: space.md,
});
export const flexGrow = style({
flex: 1,
flexGrow: 1,
});
export const imagesContainer = style({
display: 'flex',
position: 'relative',
flexDirection: 'column',
flexShrink: 0,
borderRadius: 4,
width: 64,
height: 64,
overflow: 'hidden',
});
export const image = style({
flexBasis: 0,
flexGrow: 1,
width: '100%',
minWidth: 0,
height: '100%',
minHeight: 0,
objectFit: 'cover',
});
export const imagesRow = style({
display: 'flex',
flexBasis: 0,
flexDirection: 'row',
flexGrow: 1,
gap: 2,
});
export const imagesCol = style({
display: 'flex',
flexBasis: 0,
flexDirection: 'column',
flexGrow: 1,
gap: 2,
});
export const imageOverlayWrapper = style({
display: 'flex',
position: 'relative',
flex: 1,
flexDirection: 'column',
flexGrow: 1,
});
export const imageOverlay = style({
display: 'flex',
position: 'absolute',
inset: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
});