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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
|
@import colors
.post-list
ul
list-style-type: none
padding: 0
display: flex
align-content: flex-end
flex-wrap: wrap
margin: 0 -1.5em
@media (max-width: 1000px)
margin: 0 -1em
li
position: relative
flex-grow: 1
display: inline-block
text-align: left
min-width: 8em
width: 12vw
&:not(.flexbox-dummy)
min-height: 8em
height: 12vw
.thumbnail-wrapper
display: inline-block
width: 100%
height: 100%
line-height: 80%
font-size: 80%
color: white
outline-offset: -3px
box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
.type, .stats
position: absolute
bottom: 0.5em
padding: 0.33em 0.5em
background: rgba(0,0,0,0.5)
height: 1em
.type
float: left
left: 0.5em
&[data-type=image]
display: none
.stats
float: right
right: 0.5em
text-align: right
i
margin-right: 0.25em
.icon:not(:first-of-type)
margin-left: 1em
.edit-overlay
position: absolute
top: 0.5em
left: 0.5em
.tag-flipper
display: inline-block
padding: 0.5em
box-sizing: border-box
border: 0
&:after
display: inline-block
width: 1em
height: 1em
text-align: center
line-height: 1em
font-size: 2.2em
&.tagged
background: rgba(0, 230, 0, 0.7)
&:after
color: white
content: '-'
&:not(.tagged)
background: rgba(255, 0, 0, 0.7)
&:after
color: white
content: '+'
&[data-disabled]
background: rgba(200, 200, 200, 0.7)
.relation-flipper
display: inline-block
padding: 0.5em
box-sizing: border-box
border: 0
&:after
display: inline-block
width: 1em
height: 1em
text-align: center
line-height: 1em
font-size: 1.6em
&.related
background: rgba(0, 230, 0, 0.7)
&:after
color: white
content: '☑'
&:not(.related)
background: rgba(245, 0, 0, 0.7)
&:after
color: white
content: '☐'
&[data-disabled]
background: rgba(200, 200, 200, 0.7)
.safety-flipper a
display: inline-block
margin: 0.1em
box-sizing: border-box
border: 0
display: inline-block
width: 1.2em
height: 1.2em
text-align: center
line-height: 1em
font-size: 1.6em
border: 3px solid
&.safety-safe
background-color: darken($safety-safe, 5%)
border-color: @background-color
&:not(.active)
background-color: alpha(@background-color, 0.3)
&.safety-sketchy
background-color: $safety-sketchy
border-color: @background-color
&:not(.active)
background-color: alpha(@background-color, 0.3)
&.safety-unsafe
background-color: $safety-unsafe
border-color: @background-color
&:not(.active)
background-color: alpha(@background-color, 0.3)
&[data-disabled]
background: rgba(200, 200, 200, 0.7)
.delete-flipper
display: inline-block
padding: 0.5em
box-sizing: border-box
border: 0
&:after
display: inline-block
width: 1em
height: 1em
text-align: center
line-height: 1em
font-size: 2.2em
&.delete
background: rgba(255, 0, 0, 0.7)
&:after
color: white
font-family: 'Font Awesome 5 Free';
content: "\f1f8"; // fa-trash
font-weight: 900; // not visible at other weights
&:not(.delete)
background: rgba(200, 200, 200, 0.7)
&:after
color: white
content: '-'
.thumbnail
width: 100%
height: 100%
outline-offset: -3px
&:not(.empty)
background-position: 50% 30%
.thumbnail-wrapper.no-tags
.thumbnail
outline: 4px solid $post-thumbnail-no-tags-border-color
&:hover
background: $post-thumbnail-border-color
.thumbnail
opacity: .9
&:hover a, a:active, a:focus
.thumbnail
outline: 4px solid $main-color !important
.post-flow
ul
li
min-width: inherit
width: inherit
&:not(.flexbox-dummy)
height: 14vw
.thumbnail
outline-offset: -1px
.thumbnail-wrapper.no-tags
.thumbnail
outline: 2px solid $post-thumbnail-no-tags-border-color
&:hover a, a:active, a:focus
.thumbnail
outline: 2px solid $main-color !important
.post-list-header
white-space: nowrap
text-align: left
label
display: none !important
form
width: auto
margin-bottom: 0.75em
*
vertical-align: top
@media (max-width: 1000px)
display: block
&.bulk-edit-tags:not(.opened), &.bulk-edit-safety:not(.opened)
float: left
margin-right: 1em
input
margin-bottom: 0.25em
margin-right: 0.25em
input[name=search-text]
width: 25em
@media (max-width: 1000px)
display: block
width: 100%
margin-bottom: 0.5em
.append
@media (max-width: 500px)
margin-left: 0.8em
vertical-align: middle
font-size: 0.95em
color: $inactive-link-color
.bulk-edit-btn-holder, .metrics-btn-holder
&:not(.opened)
.close
display: none
&.opened
.open
display: none
.metrics-block
&.hidden
display: none
label
display: inline !important
margin-left: -0.5em
line-height 1.7em
a.append
line-height 1.7em
padding: 0.2em 0
form, ul
display: flex
flex-wrap: wrap
.metric-list
li
display: inline-block
line-height: 1.7em
margin-right: 0.5em
@media (max-width: 700px)
margin-bottom: 0.5em
border-width: 1px
&.selected
border-style: solid
&.tag-default
background-color: $main-color
&:not(.selected)
border-style: dotted
&.tag-default
border-color: $main-color
li a
vertical-align: middle
padding: 0.2em 0.5em
.bulk-edit-block
&.hidden
display: none
form
&:not(.opened)
display: inline-block
&.opened
display: block
input[type=submit]
margin-right: 1em
.append
margin-left: 0
margin-right: 1em
.bulk-edit
&:not(.opened)
.close
display: none
&.opened
.open
display: none
&.hidden
display: none
.bulk-edit-tags
&.opened
.hint
@media (max-width: 1000px)
display: block
margin-bottom: 0.5em
&:not(.opened)
[type=text],
.start
display: none
.hint
display: none
input[name=tag]
width: 12em
@media (max-width: 1000px)
display: block
width: 100%
margin-bottom: 0.5em
.hint
margin-right: 1em
@media (max-width: 1000px)
margin-left: 0
.bulk-edit-delete
&.opened
.start
@media (max-width: 1000px)
margin-left: 0
&:not(.opened)
.start
display: none
.append.open
@media (max-width: 1000px)
margin-left: 0
.start
margin-left: 1em
.safety
margin-right: 0.25em
&.safety-safe
background-color: $safety-safe
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
&.safety-sketchy
background-color: $safety-sketchy
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
&.safety-unsafe
background-color: $safety-unsafe
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
.icon-button
padding: 0.2em
margin-right: 0.25em
margin-bottom: 0.25em
i
vertical-align: middle
.icon-inline
vertical-align: baseline
margin-left: 0.3em
|
