Commit | Line | Data |
---|---|---|
3321b9c6 MW |
1 | .messageGroupList { |
2 | .tabularList { | |
e5359fe5 AE |
3 | .columnSubject { |
4 | flex: 1 1 auto; | |
5 | } | |
8a52619a | 6 | |
e5359fe5 | 7 | .columnStats { |
e5359fe5 | 8 | text-align: center; |
66ba3e76 | 9 | |
b844e0c0 MW |
10 | @include screen-lg { |
11 | flex: 0 0 150px; | |
12 | } | |
13 | ||
14 | @include screen-md-down { | |
15 | flex: 0 0 100px; | |
16 | } | |
e5359fe5 | 17 | } |
8a52619a | 18 | |
e5359fe5 AE |
19 | .columnLastPost { |
20 | flex: 0 0 200px; | |
3321b9c6 | 21 | } |
8a52619a | 22 | |
3321b9c6 MW |
23 | .tabularListRow:not(.tabularListRowHead) { |
24 | .columnStats { | |
25 | position: relative; | |
8a52619a | 26 | |
3321b9c6 MW |
27 | > dl { |
28 | visibility: hidden; | |
29 | } | |
30 | } | |
8a52619a | 31 | |
d0f167f3 MW |
32 | @include screen-lg { |
33 | &:hover .columnStats { | |
34 | > dl { | |
35 | visibility: visible; | |
36 | } | |
8a52619a | 37 | |
d0f167f3 MW |
38 | .messageGroupListStatsSimple { |
39 | display: none; | |
40 | } | |
3321b9c6 MW |
41 | } |
42 | } | |
43 | } | |
44 | } | |
8a52619a | 45 | |
3321b9c6 | 46 | .columnMark > label { |
3321b9c6 MW |
47 | display: block; |
48 | height: 24px; | |
49 | width: 24px; | |
8a52619a | 50 | |
2db06214 MW |
51 | input[type="checkbox"] { |
52 | height: 18px; | |
53 | width: 18px; | |
3321b9c6 MW |
54 | } |
55 | } | |
8a52619a | 56 | |
3321b9c6 MW |
57 | .columnAvatar { |
58 | div { | |
59 | position: relative; | |
60 | width: 48px; | |
61 | height: 48px; | |
3321b9c6 | 62 | } |
8a52619a | 63 | |
3321b9c6 MW |
64 | .myAvatar { |
65 | position: absolute; | |
66 | width: 24px; | |
67 | height: 24px; | |
68 | bottom: -2px; | |
69 | right: -6px; | |
8a52619a | 70 | |
3321b9c6 | 71 | > img { |
1a75e228 | 72 | border: 1px solid var(--wcfContentBackground); |
3321b9c6 MW |
73 | box-sizing: content-box; |
74 | } | |
75 | } | |
76 | } | |
8a52619a | 77 | |
3321b9c6 MW |
78 | .columnSubject { |
79 | overflow: hidden; | |
8a52619a | 80 | |
3321b9c6 | 81 | > h3 { |
3321b9c6 | 82 | > .messageGroupLink { |
5908f54f | 83 | @include wcfFontHeadline; |
3321b9c6 | 84 | } |
8a52619a | 85 | |
3321b9c6 MW |
86 | > .badge.label { |
87 | top: -2px; | |
88 | } | |
89 | } | |
8a52619a | 90 | |
3321b9c6 MW |
91 | > small { |
92 | display: block; | |
93 | } | |
8a52619a | 94 | |
3321b9c6 MW |
95 | > .statusDisplay { |
96 | display: flex; | |
97 | float: right; | |
8a52619a TD |
98 | opacity: 0.75; |
99 | transition: opacity 0.12s; | |
100 | ||
3321b9c6 MW |
101 | > .statusIcons { |
102 | align-items: center; | |
103 | flex: 0 0 auto; | |
8a52619a | 104 | |
3321b9c6 MW |
105 | > li { |
106 | align-items: center; | |
107 | display: flex; | |
108 | } | |
d5a9f466 MW |
109 | |
110 | a { | |
111 | color: inherit; | |
112 | } | |
50cbdea1 AE |
113 | |
114 | .iconFlag { | |
115 | vertical-align: -3px; | |
116 | } | |
3321b9c6 MW |
117 | } |
118 | } | |
8a52619a | 119 | |
3321b9c6 MW |
120 | > .labelList { |
121 | float: right; | |
122 | padding-left: 7px; | |
123 | } | |
124 | } | |
8a52619a | 125 | |
3321b9c6 MW |
126 | .columnLastPost { |
127 | > .box32 { | |
128 | align-items: center; | |
129 | } | |
8a52619a | 130 | |
3321b9c6 | 131 | time { |
1a75e228 | 132 | color: var(--wcfContentDimmedText); |
3321b9c6 | 133 | } |
8a52619a | 134 | |
3321b9c6 MW |
135 | a { |
136 | display: block; | |
137 | overflow: hidden; | |
138 | text-overflow: ellipsis; | |
139 | white-space: nowrap; | |
140 | } | |
141 | } | |
8a52619a | 142 | |
3321b9c6 MW |
143 | // hover |
144 | .tabularListRow:hover, | |
8a52619a TD |
145 | tr:hover { |
146 | // deprecated | |
3321b9c6 MW |
147 | .columnSubject > .statusDisplay { |
148 | opacity: 1; | |
8a52619a | 149 | |
3321b9c6 MW |
150 | > .pagination { |
151 | opacity: 1; | |
152 | } | |
153 | } | |
3321b9c6 | 154 | } |
8a52619a | 155 | |
3321b9c6 | 156 | // new status |
1b87c0bd | 157 | .tabularListColumns.new, |
8a52619a TD |
158 | tr.new { |
159 | // deprecated | |
3321b9c6 | 160 | .columnSubject > h3 > .messageGroupLink { |
c5222ca4 | 161 | font-weight: 600; |
3321b9c6 | 162 | } |
3321b9c6 | 163 | } |
8a52619a | 164 | |
3321b9c6 MW |
165 | .pagination { |
166 | flex: 0 0 auto; | |
167 | opacity: 0; | |
8a52619a TD |
168 | transition: opacity 0.12s; |
169 | ||
5908f54f | 170 | @include wcfFontSmall; |
8a52619a | 171 | |
3321b9c6 MW |
172 | &:not(:last-child) { |
173 | margin-right: 5px; | |
174 | } | |
175 | } | |
8a52619a | 176 | |
06cf7304 MW |
177 | @include screen-md-up { |
178 | .messageGroupCounterMobile, | |
179 | .messageGroupInfoMobile { | |
180 | display: none; | |
181 | } | |
182 | } | |
8a52619a | 183 | |
b844e0c0 | 184 | @include screen-md-down { |
06cf7304 MW |
185 | .tabularListColumns > .columnMark { |
186 | display: none; | |
187 | } | |
8a52619a | 188 | |
06cf7304 | 189 | .tabularListRowHead { |
b844e0c0 MW |
190 | .columnMark { |
191 | display: none; | |
192 | } | |
193 | ||
194 | .columnSubject { | |
195 | padding: 0; | |
196 | } | |
197 | ||
198 | .columnLastPost { | |
199 | flex-basis: auto; | |
200 | padding: 0; | |
201 | } | |
202 | } | |
203 | } | |
204 | ||
205 | @include screen-sm-down { | |
206 | .tabularListRowHead { | |
06cf7304 MW |
207 | .columnStats { |
208 | display: none; | |
209 | } | |
8a52619a | 210 | |
06cf7304 MW |
211 | .columnSubject { |
212 | padding: 0; | |
213 | } | |
8a52619a | 214 | |
06cf7304 MW |
215 | .columnLastPost { |
216 | flex-basis: auto; | |
217 | padding: 0; | |
218 | } | |
219 | } | |
8a52619a | 220 | |
06cf7304 MW |
221 | .tabularListRow:not(.tabularListRowHead) > .tabularListColumns { |
222 | flex-wrap: wrap; | |
223 | justify-content: flex-end; | |
224 | padding: 5px 0; | |
8a52619a | 225 | |
06cf7304 MW |
226 | > li { |
227 | padding: 0; | |
228 | } | |
8a52619a | 229 | |
06cf7304 MW |
230 | .columnAvatar { |
231 | margin-right: 10px; | |
232 | padding: 0; | |
8a52619a | 233 | |
06cf7304 MW |
234 | div { |
235 | height: 32px; | |
236 | width: 32px; | |
237 | } | |
8a52619a | 238 | |
06cf7304 MW |
239 | img { |
240 | max-height: 32px; | |
241 | max-width: 32px; | |
242 | } | |
8a52619a | 243 | |
06cf7304 MW |
244 | .myAvatar { |
245 | display: none; | |
246 | } | |
247 | } | |
8a52619a | 248 | |
06cf7304 MW |
249 | .columnSubject { |
250 | /* 37px = avatar width + margin-right */ | |
251 | flex-basis: calc(100% - 42px); | |
252 | max-width: calc(100% - 42px); | |
8a52619a | 253 | |
06cf7304 MW |
254 | > h3 { |
255 | align-items: flex-start; | |
256 | display: flex; | |
8a52619a | 257 | |
ab460889 | 258 | > .messageGroupLink { |
06cf7304 | 259 | flex: 1 1 auto; |
5b2a97e1 | 260 | line-height: 1.48; |
06cf7304 MW |
261 | overflow: hidden; |
262 | text-overflow: ellipsis; | |
8a52619a | 263 | |
06cf7304 MW |
264 | @include wcfFontDefault; |
265 | } | |
8a52619a | 266 | |
06cf7304 MW |
267 | > .messageGroupCounterMobile { |
268 | flex: 0 0 auto; | |
269 | margin-left: 10px; | |
270 | } | |
271 | } | |
8a52619a | 272 | |
06cf7304 | 273 | .messageGroupInfoMobile { |
1a75e228 | 274 | color: var(--wcfContentDimmedText); |
06cf7304 | 275 | display: flex; |
8a52619a | 276 | |
06cf7304 | 277 | @include wcfFontSmall; |
8a52619a | 278 | |
06cf7304 MW |
279 | > .messageGroupAuthorMobile { |
280 | flex: 1 1 auto; | |
281 | } | |
8a52619a | 282 | |
06cf7304 MW |
283 | > .messageGroupLastPostTimeMobile { |
284 | flex: 0 0 auto; | |
285 | margin-left: 10px; | |
286 | } | |
287 | } | |
8a52619a | 288 | |
06cf7304 MW |
289 | .statusDisplay, |
290 | .messageGroupInfo, | |
291 | .messageGroupTime, | |
292 | .messageGroupEditLink { | |
293 | display: none; | |
294 | } | |
8a52619a | 295 | |
06cf7304 MW |
296 | .labelList { |
297 | float: none; | |
298 | padding-bottom: 2px; | |
299 | padding-left: 0; | |
300 | } | |
301 | } | |
8a52619a | 302 | |
06cf7304 MW |
303 | .columnStats, |
304 | .columnLastPost { | |
305 | display: none; | |
306 | } | |
307 | } | |
308 | } | |
8a52619a | 309 | |
15f0fffa AE |
310 | .tabularListRowHead { |
311 | .columnSort { | |
312 | flex: 1; | |
8a52619a | 313 | |
15f0fffa | 314 | @include wcfFontDefault; |
f4625fe0 AE |
315 | |
316 | fa-icon { | |
1a75e228 | 317 | color: var(--wcfTabularBoxHeadline); |
f4625fe0 | 318 | } |
15f0fffa | 319 | } |
8a52619a | 320 | |
15f0fffa AE |
321 | .columnFilter { |
322 | flex: 0 1 auto; | |
323 | padding-left: 40px; | |
8a52619a | 324 | |
15f0fffa | 325 | @include wcfFontDefault; |
8a52619a | 326 | |
15f0fffa AE |
327 | @include screen-xs { |
328 | display: none; | |
329 | } | |
330 | } | |
8a52619a | 331 | |
15f0fffa AE |
332 | .columnSort, |
333 | .columnFilter { | |
334 | .inlineList > li:not(:last-child) { | |
335 | margin-right: 10px; | |
336 | } | |
337 | } | |
8a52619a | 338 | |
15f0fffa AE |
339 | .columnApplyFilter { |
340 | flex: 0 1 auto; | |
341 | padding-right: 0; | |
342 | } | |
343 | } | |
3321b9c6 MW |
344 | } |
345 | ||
346 | .messageGroupListStatsSimple { | |
1a75e228 | 347 | color: var(--wcfContentDimmedText); |
3321b9c6 MW |
348 | font-size: 1rem; |
349 | left: 50%; | |
350 | position: absolute; | |
351 | top: 50%; | |
352 | transform: translateX(-50%) translateY(-50%); | |
8a52619a | 353 | |
15f0fffa AE |
354 | > .icon { |
355 | color: inherit; | |
356 | } | |
3321b9c6 | 357 | } |
06cf7304 | 358 | |
1dd78392 AE |
359 | @include screen-md-up { |
360 | .contentHeader.messageGroupContentHeader .contentHeaderIcon { | |
361 | position: relative; | |
362 | } | |
363 | } | |
364 | ||
06cf7304 MW |
365 | @include screen-md-down { |
366 | .mobileLinkShadowContainer { | |
367 | position: relative; | |
8a52619a | 368 | |
06cf7304 MW |
369 | > .mobileLinkShadow { |
370 | bottom: 0; | |
371 | left: 0; | |
372 | position: absolute; | |
373 | right: 0; | |
374 | top: 0; | |
375 | } | |
376 | } | |
30f4c4d3 | 377 | } |