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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
|
@import 'nib'
.minicard-wrapper
cursor: pointer
position: relative
display: flex
align-items: center
margin-bottom: 9px
&.placeholder
background: darken(white, 20%)
border-radius: 9px
&.ui-sortable-helper
cursor: grabbing
transform: rotate(4deg)
display: block !important
.and-n-other
width: 100%
height: 16px
padding: 4px
background-color: darken(white, 5%)
text-align: center
border-radius: 3px
.multi-selection-checkbox
display: none
.multi-selection-checkbox + .minicard
margin-left: 8px
.minicard
padding: 6px 8px 2px
position: relative
flex: 1
flex-wrap: wrap
background-color: #fff
min-height: 20px
box-shadow: 0 1px 2px rgba(0,0,0,.15)
border-radius: 2px
color: #4d4d4d
overflow: hidden
transition: transform 0.2s,
border-radius 0.2s
&.linked-board
&.linked-card
.linked-icon
display: inline-block
margin-right: 11px
vertical-align: baseline
font-size: 0.9em
.linked-archived
color: #937760
.is-selected &
transform: translateX(11px)
border-bottom-right-radius: 0
border-top-right-radius: 0
z-index: 25
box-shadow: -2px 1px 2px rgba(0,0,0,.2)
&:hover:not(.minicard-composer),
.is-selected &,
.draggable-hover-card &
background: darken(white, 3%)
.draggable-hover-card &
background: darken(white, 7%)
.minicard-cover
background-position: center
background-repeat: no-repeat
background-size: contain
height: 145px
user-select: none
margin: -6px -8px 6px -8px
border-radius: top 2px
.minicard-labels
float: right
display: flex
flex-wrap: wrap
.minicard-label
width: 11px
height: @width
border-radius: 2px
margin-left: 3px
.minicard-custom-fields
display:block;
.minicard-custom-field
display:flex;
.minicard-custom-field-item
flex-grow: 1
display: block
word-wrap: break-word
max-width: 100px
margin-right: 4px
.handle
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top: 5px;
display:none;
@media only screen and (max-width: 1199px) {
display:block;
}
.fa-arrows
font-size:20px;
color: #ccc;
.minicard-title
p:last-child
margin-bottom: 0
.viewer
display: block
word-wrap: break-word
max-width: 230px
.dates
display: flex;
flex-direction: row;
flex-wrap: wrap;
.date
margin-right: 3px
.badges
float: left
margin-top: 7px
color: darken(white, 50%)
&:empty
display: none
.badge
float: left
margin-right: 11px
margin-bottom: 3px
font-size: 0.9em
&.is-finished
background: #3cb500
padding: 0px 3px
border-radius: 3px
color: white
&:last-of-type
margin-right: 0
.badge-icon,
.badge-text
vertical-align: middle
&.badge-comment
margin-bottom: 0.1rem
.badge-text
font-size: 0.9em
padding-left: 2px
line-height: 14px
.check-list-text
padding-left: 0px
line-height: 12px
.minicard-members
float: right
margin: 2px -8px -2px 0
.member
float: right
border-radius: 50%
height: 28px
width: @height
+ .badges
margin-top: 10px
.minicard-members:empty
display: none
&.minicard-composer
margin-bottom: 10px
textarea.minicard-composer-textarea,
textarea.minicard-composer-textarea:focus
resize: none
background: none
border: none
box-shadow: none
height: auto
margin: 0
padding: 0
max-height: 162px
min-height: 36px
margin-bottom: 20px
overflow-y: auto
.parent-prefix
color: darken(white, 30%)
font-size: 0.9em
.parent-subtext
color: darken(white, 30%)
font-size: 0.9em
@media screen and (max-width: 800px)
.minicard
.is-selected &
transform: translateX(0px)
border-bottom-right-radius: 0
border-top-right-radius: 0
z-index: 15
box-shadow: 0 1px 2px rgba(0,0,0,.15)
minicard-color(background, color...)
background-color: background
if color
color: color //overwrite text for better visibility
&:hover:not(.minicard-composer),
.is-selected &,
.draggable-hover-card &
background: darken(background, 3%)
.draggable-hover-card &
background: darken(background, 7%)
.minicard-green
minicard-color(#3cb500, #ffffff) //White text for better visibility
.minicard-yellow
minicard-color(#fad900)
.minicard-orange
minicard-color(#ff9f19)
.minicard-red
minicard-color(#eb4646, #ffffff) //White text for better visibility
.minicard-purple
minicard-color(#a632db, #ffffff) //White text for better visibility
.minicard-blue
minicard-color(#0079bf, #ffffff) //White text for better visibility
.minicard-pink
minicard-color(#ff78cb)
.minicard-sky
minicard-color(#00c2e0, #ffffff) //White text for better visibility
.minicard-black
minicard-color(#4d4d4d, #ffffff) //White text for better visibility
.minicard-lime
minicard-color(#51e898)
.minicard-silver
minicard-color(#c0c0c0)
.minicard-peachpuff
minicard-color(#ffdab9)
.minicard-crimson
minicard-color(#dc143c, #ffffff) //White text for better visibility
.minicard-plum
minicard-color(#dda0dd)
.minicard-darkgreen
minicard-color(#006400, #ffffff) //White text for better visibility
.minicard-slateblue
minicard-color(#6a5acd, #ffffff) //White text for better visibility
.minicard-magenta
minicard-color(#ff00ff, #ffffff) //White text for better visibility
.minicard-gold
minicard-color(#ffd700)
.minicard-navy
minicard-color(#000080, #ffffff) //White text for better visibility
.minicard-gray
minicard-color(#808080, #ffffff) //White text for better visibility
.minicard-saddlebrown
minicard-color(#8b4513, #ffffff) //White text for better visibility
.minicard-paleturquoise
minicard-color(#afeeee)
.minicard-mistyrose
minicard-color(#ffe4e1)
.minicard-indigo
minicard-color(#4b0082, #ffffff) //White text for better visibility
|
