Commit | Line | Data |
---|---|---|
d45eaff6 MW |
1 | /* ### message groups ### */ |
2 | .messageGroupList { | |
3 | .columnSubject { | |
4 | > .labelList { | |
5 | float: right; | |
6 | padding-left: 7px; | |
7 | } | |
8 | ||
9 | > h3 { | |
10 | > .messageGroupLink { | |
11 | font-size: @wcfTitleFontSize; | |
12 | } | |
13 | ||
14 | > .badge.label { | |
15 | top: -2px; | |
16 | } | |
17 | } | |
18 | ||
19 | > small { | |
20 | display: block; | |
21 | } | |
22 | ||
23 | > nav { | |
24 | font-size: @wcfSmallFontSize; | |
25 | ||
26 | > ul > li { | |
27 | display: inline; | |
28 | } | |
29 | } | |
30 | } | |
31 | ||
32 | tr { | |
33 | &.new .columnSubject > h3 > .messageGroupLink { | |
34 | font-weight: bold; | |
35 | } | |
36 | ||
37 | &.new .columnAvatar div > p > img, | |
38 | &:hover .columnAvatar div > p > img { | |
39 | opacity: 1; | |
40 | } | |
41 | ||
42 | &.messageDisabled { | |
43 | color: @wcfDisabledColor; | |
44 | ||
45 | > td { | |
46 | background-color: @wcfDisabledBackgroundColor !important; | |
47 | } | |
48 | ||
49 | a:not(.badge) { | |
50 | color: @wcfDisabledColor; | |
51 | } | |
52 | } | |
53 | ||
54 | &.messageDeleted { | |
55 | color: @wcfDeletedColor; | |
56 | ||
57 | > td { | |
58 | background-color: @wcfDeletedBackgroundColor !important; | |
59 | } | |
60 | ||
61 | a:not(.badge) { | |
62 | color: @wcfDeletedColor; | |
63 | } | |
64 | } | |
65 | ||
66 | .columnSubject .statusDisplay .pageNavigation { | |
67 | opacity: 0; | |
68 | ||
69 | .transition(opacity, .2s); | |
70 | } | |
71 | ||
72 | &:hover .columnSubject .statusDisplay .pageNavigation { | |
73 | opacity: 1; | |
74 | } | |
75 | ||
76 | &.new .columnAvatar > div { | |
19e5d9ff | 77 | &::after { |
d45eaff6 MW |
78 | color: @wcfLinkColor; |
79 | content: "\f069"; | |
80 | font-family: FontAwesome; | |
81 | font-weight: normal !important; | |
82 | font-style: normal !important; | |
83 | font-size: 14px; | |
84 | position: absolute; | |
85 | text-decoration: none !important; | |
86 | top: -4px; | |
87 | right: -2px; | |
88 | ||
89 | .textShadow(@wcfContainerBackgroundColor); | |
90 | } | |
91 | } | |
92 | } | |
93 | ||
94 | .columnAvatar { | |
95 | div { | |
96 | position: relative; | |
97 | width: 40px; | |
98 | height: 38px; | |
99 | ||
100 | > p > img { | |
101 | opacity: .6; | |
102 | ||
103 | .transition(opacity, .2s); | |
104 | } | |
105 | } | |
106 | ||
107 | .myAvatar { | |
108 | position: absolute; | |
109 | width: 16px; | |
110 | height: 16px; | |
111 | bottom: -2px; | |
112 | left: 24px; | |
113 | opacity: 1; | |
114 | ||
115 | .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px); | |
116 | } | |
117 | } | |
118 | ||
119 | .columnLastPost { | |
120 | white-space: nowrap; | |
18005b5f | 121 | word-wrap: normal; |
d45eaff6 MW |
122 | |
123 | > div > div > small { | |
124 | color: @wcfDimmedColor; | |
125 | } | |
126 | } | |
127 | } | |
128 | ||
129 | /* ### messages ### */ | |
130 | @media only screen and (min-width: 801px) { | |
131 | .messageList { | |
132 | .messageGroupStarter { | |
133 | position: relative; | |
134 | ||
19e5d9ff | 135 | > .message::after { |
d45eaff6 MW |
136 | content: "\f005"; |
137 | font-family: FontAwesome; | |
138 | font-size: 14px; | |
139 | display: block; | |
140 | left: 4px; | |
141 | position: absolute; | |
142 | top: 2px; | |
143 | ||
144 | .textShadow(@wcfSidebarBackgroundColor); | |
145 | } | |
146 | ||
19e5d9ff | 147 | > .message.messageSidebarOrientationRight::after { |
d45eaff6 MW |
148 | left: auto; |
149 | right: 4px; | |
150 | } | |
151 | } | |
152 | } | |
153 | } | |
154 | ||
155 | .message { | |
156 | background-color: @wcfContainerHoverBackgroundColor; | |
157 | border: 1px solid @wcfContainerBorderColor; | |
158 | //overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */ | |
159 | position: relative; | |
160 | ||
161 | &:hover { | |
e62ed7a5 | 162 | .messageHeader .messageQuickOptions > li { |
d45eaff6 MW |
163 | opacity: 1; |
164 | } | |
165 | ||
166 | .messageOptions nav { | |
167 | opacity: 1; | |
168 | } | |
169 | } | |
170 | ||
903f09f4 | 171 | &.messageDisabled:not(.messageReduced) { |
d45eaff6 MW |
172 | background-color: @wcfDisabledBackgroundColor; |
173 | ||
174 | .messageSidebar { | |
175 | color: @wcfDisabledColor; | |
176 | ||
177 | a { | |
178 | color: @wcfDisabledColor; | |
179 | } | |
180 | } | |
181 | } | |
182 | ||
903f09f4 | 183 | &.messageDeleted:not(.messageReduced) { |
d45eaff6 MW |
184 | background-color: @wcfDeletedBackgroundColor; |
185 | ||
186 | .messageSidebar { | |
187 | color: @wcfDeletedColor; | |
188 | ||
189 | a { | |
190 | color: @wcfDeletedColor; | |
191 | } | |
192 | } | |
193 | } | |
194 | ||
903f09f4 | 195 | &.jsMarked:not(.messageReduced) { |
d45eaff6 MW |
196 | background-color: @wcfSelectedBackgroundColor; |
197 | ||
198 | .messageSidebar { | |
199 | color: @wcfSelectedColor; | |
200 | ||
201 | a { | |
202 | color: @wcfSelectedColor; | |
203 | } | |
204 | } | |
205 | } | |
206 | ||
207 | .messageOptions { | |
208 | font-size: @wcfSmallFontSize; | |
209 | position: relative; | |
210 | ||
211 | &.forceHidden nav { | |
38d131ce | 212 | display: none !important; |
d45eaff6 MW |
213 | } |
214 | ||
215 | &.forceOpen nav { | |
216 | opacity: 1; | |
217 | } | |
218 | ||
219 | nav { | |
220 | bottom: -2px; | |
221 | opacity: 0; | |
222 | position: absolute; | |
223 | right: -22px; | |
224 | text-align: right; | |
225 | ||
226 | .transition(opacity, .1s); | |
227 | ||
228 | ul.smallButtons { | |
229 | > li { | |
230 | a.button { | |
8ce85e3a | 231 | border-radius: 0; |
d45eaff6 MW |
232 | } |
233 | } | |
234 | } | |
235 | } | |
236 | } | |
237 | ||
238 | .messageHeader { | |
239 | .messageQuickOptions { | |
240 | float: right; | |
241 | ||
242 | > li { | |
243 | display: inline-block; | |
e62ed7a5 | 244 | opacity: .6; |
d45eaff6 | 245 | |
e62ed7a5 MW |
246 | .transition(opacity, .2s); |
247 | ||
248 | span.icon { | |
249 | color: @wcfDimmedColor; | |
d45eaff6 | 250 | |
e62ed7a5 MW |
251 | .transition(color, .2s); |
252 | } | |
253 | ||
254 | > a:hover > span.icon { | |
255 | color: @wcfLinkColor; | |
d45eaff6 MW |
256 | } |
257 | } | |
258 | ||
259 | input[type=checkbox] { | |
260 | position: relative; | |
261 | top: 1px; | |
262 | } | |
263 | } | |
264 | ||
265 | .permalink { | |
266 | color: @wcfDimmedColor; | |
267 | } | |
268 | } | |
269 | ||
270 | &.dividers { | |
271 | .userCredits { | |
272 | border-top: 1px solid @wcfContainerBorderColor; | |
273 | } | |
274 | } | |
275 | } | |
276 | ||
277 | .touch .message .messageOptions nav { | |
278 | opacity: 1; | |
279 | } | |
280 | ||
281 | @media only screen and (max-width: 800px) { | |
282 | .message { | |
283 | border-width: 1px 0; | |
284 | } | |
285 | } | |
286 | ||
287 | /* sidebars orientations */ | |
288 | .message.messageSidebarOrientationLeft { | |
289 | .messageContent { | |
290 | border-left: 1px solid @wcfContainerBorderColor; | |
291 | margin: 0 0 0 211px; | |
292 | } | |
293 | ||
294 | .messageSidebar { | |
295 | float: left; | |
296 | } | |
297 | } | |
298 | ||
299 | .message.messageSidebarOrientationRight { | |
300 | .messageContent { | |
301 | border-right: 1px solid @wcfContainerBorderColor; | |
302 | margin: 0 211px 0 0; | |
303 | } | |
304 | ||
305 | .messageSidebar { | |
306 | float: right; | |
307 | } | |
308 | } | |
309 | ||
310 | /* pointer */ | |
311 | .message.messageSidebarOrientationLeft, | |
312 | .message.messageSidebarOrientationRight { | |
313 | .messageHeader { | |
19e5d9ff MW |
314 | &::before, |
315 | &::after { | |
d45eaff6 MW |
316 | border-width: 20px; |
317 | content: ""; | |
318 | display: block; | |
319 | height: 0; | |
320 | position: absolute; | |
321 | top: 35px; | |
322 | width: 0; | |
323 | } | |
324 | ||
19e5d9ff | 325 | &::before { |
d45eaff6 MW |
326 | z-index: 100; |
327 | } | |
328 | ||
19e5d9ff | 329 | &::after { |
d45eaff6 MW |
330 | z-index: 101; |
331 | } | |
332 | } | |
333 | } | |
334 | ||
335 | .message.messageSidebarOrientationLeft { | |
336 | .messageHeader { | |
19e5d9ff MW |
337 | &::before, |
338 | &::after { | |
d45eaff6 MW |
339 | border-style: inset solid inset none; |
340 | } | |
341 | ||
19e5d9ff | 342 | &::before { |
d45eaff6 MW |
343 | border-color: transparent @wcfContainerBorderColor transparent transparent; |
344 | left: -20px; | |
345 | } | |
346 | ||
19e5d9ff | 347 | &::after { |
d45eaff6 MW |
348 | border-color: transparent @wcfContainerBackgroundColor transparent transparent; |
349 | left: -19px; | |
350 | } | |
351 | } | |
352 | } | |
353 | ||
354 | .message.messageSidebarOrientationRight { | |
355 | .messageHeader { | |
19e5d9ff MW |
356 | &::before, |
357 | &::after { | |
d45eaff6 MW |
358 | border-style: inset none inset solid; |
359 | } | |
360 | ||
19e5d9ff | 361 | &::before { |
d45eaff6 MW |
362 | border-color: transparent transparent transparent @wcfContainerBorderColor; |
363 | right: -20px; | |
364 | } | |
365 | ||
19e5d9ff | 366 | &::after { |
d45eaff6 MW |
367 | border-color: transparent transparent transparent @wcfContainerBackgroundColor; |
368 | right: -19px; | |
369 | } | |
370 | } | |
371 | } | |
372 | ||
373 | /* new message badge */ | |
374 | .message .newMessageBadge { | |
375 | color: @wcfTabularBoxColor; | |
376 | display: block; | |
377 | font-size: @wcfSmallFontSize; | |
378 | font-weight: bold; | |
379 | padding: 6px 10px; | |
380 | position: absolute; | |
381 | text-transform: uppercase; | |
382 | top: 24px; | |
383 | ||
384 | .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px); | |
385 | .linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%)); | |
386 | .textShadow(darken(@wcfTabularBoxBackgroundColor, 10%)); | |
387 | ||
19e5d9ff | 388 | &::before { |
d45eaff6 MW |
389 | border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%); |
390 | content: ""; | |
391 | display: block; | |
392 | position: absolute; | |
393 | top: -4px; | |
394 | } | |
395 | } | |
396 | ||
397 | .message.messageSidebarOrientationLeft .newMessageBadge { | |
8ce85e3a | 398 | border-radius: 0 5px 5px 0; |
d45eaff6 MW |
399 | left: -219px; |
400 | ||
19e5d9ff | 401 | &::before { |
d45eaff6 MW |
402 | border-left: 6px solid transparent; |
403 | left: 0; | |
404 | } | |
405 | } | |
406 | ||
407 | .message.messageSidebarOrientationRight .newMessageBadge { | |
408 | right: -219px; | |
409 | } | |
410 | ||
411 | .message.messageReduced .newMessageBadge { | |
412 | right: -7px; | |
413 | top: 21px; | |
414 | } | |
415 | ||
416 | .message.messageSidebarOrientationRight, | |
417 | .message.messageReduced { | |
418 | .newMessageBadge { | |
8ce85e3a | 419 | border-radius: 5px 0 0 5px; |
d45eaff6 | 420 | |
19e5d9ff | 421 | &::before { |
d45eaff6 MW |
422 | border-right: 6px solid transparent; |
423 | right: 0; | |
424 | } | |
425 | } | |
426 | } | |
427 | ||
41b01d87 | 428 | .messageBody { |
d45eaff6 MW |
429 | color: @wcfColor; |
430 | display: block; | |
431 | line-height: 1.5; | |
d45eaff6 | 432 | |
d47835d8 | 433 | > div:not(.messageFooter):not(.redactor_box) { |
ffa98b33 MW |
434 | overflow: hidden; |
435 | padding-bottom: @wcfGapMedium; | |
436 | } | |
437 | ||
d45eaff6 MW |
438 | > footer { |
439 | padding-bottom: @wcfGapMedium; | |
440 | } | |
441 | ||
442 | > .messageSignature { | |
443 | color: @wcfDimmedColor; | |
8e40fc29 MS |
444 | |
445 | img { | |
446 | max-height: ~"@{wcf_option_signature_max_image_height}px"; | |
447 | } | |
d45eaff6 MW |
448 | } |
449 | ||
450 | .messageFooter { | |
451 | > *:not(:first-child) { | |
452 | margin-top: @wcfGapSmall; | |
453 | } | |
d45eaff6 MW |
454 | } |
455 | } | |
456 | ||
12783fec MW |
457 | .messageFooterNote { |
458 | border-left: 2px solid @wcfContainerBorderColor; | |
459 | color: @wcfDimmedColor; | |
460 | font-size: @wcfSmallFontSize; | |
461 | padding: @wcfGapTiny @wcfGapSmall; | |
462 | ||
463 | @messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%); | |
050b5ed6 | 464 | .linearGradientNative(~"90deg, @{messageFooterNoteGradientColor} 0%, transparent 40%"); |
12783fec MW |
465 | } |
466 | ||
d47835d8 | 467 | .messageHeader + .messageBody > div:first-child:not(.redactor_box), |
41b01d87 MW |
468 | .messageBody > div:not(.messageFooter):not(:first-child) { |
469 | border-top: 1px dotted @wcfContainerBorderColor; | |
41b01d87 MW |
470 | padding: @wcfGapMedium 0; |
471 | } | |
472 | ||
473 | .message .messageBody { | |
474 | padding: @wcfGapMedium @wcfGapLarge 1px; | |
475 | } | |
476 | ||
d45eaff6 MW |
477 | .message .messageContent { |
478 | background-color: @wcfContainerBackgroundColor; | |
479 | ||
480 | .messageHeader { | |
481 | padding: @wcfGapMedium @wcfGapLarge 0; | |
482 | position: relative; | |
483 | ||
484 | .messageHeadline { | |
485 | > h1 { | |
486 | color: @wcfColor; | |
487 | font-size: @wcfSubHeadlineFontSize; | |
488 | font-weight: bold; | |
489 | overflow: hidden; | |
490 | padding-right: 21px; // reserved space for new badge | |
491 | text-overflow: ellipsis; | |
492 | ||
493 | .textShadow(@wcfContainerBackgroundColor); | |
494 | ||
495 | + p { | |
496 | margin-top: 2px; | |
497 | } | |
498 | } | |
499 | ||
500 | > p { | |
501 | font-size: @wcfSmallFontSize; | |
502 | ||
503 | > .likesBadge { | |
d45eaff6 MW |
504 | margin: -2px 0 -1px 4px; |
505 | } | |
506 | ||
19e5d9ff | 507 | > .username::after { |
d45eaff6 MW |
508 | content: " - "; |
509 | } | |
510 | } | |
511 | } | |
512 | ||
513 | .box32 > .messageHeadline > p:first-child { | |
28283ef7 | 514 | font-size: 1rem; |
d45eaff6 MW |
515 | |
516 | > .username { | |
517 | font-size: @wcfTitleFontSize; | |
518 | font-weight: bold; | |
519 | ||
520 | .textShadow(@wcfContainerBackgroundColor); | |
521 | } | |
522 | ||
523 | > .username { | |
524 | display: block; | |
525 | } | |
526 | ||
19e5d9ff | 527 | > .username::after { |
d45eaff6 MW |
528 | content: ""; |
529 | } | |
530 | ||
531 | > .likesBadge { | |
532 | font-size: @wcfSmallFontSize; | |
533 | top: -1px; | |
534 | } | |
535 | } | |
536 | } | |
537 | } | |
538 | ||
539 | .message .messageSidebar { | |
540 | line-height: 1.3; | |
541 | margin-bottom: -1px; | |
542 | padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge; | |
543 | position: relative; | |
544 | text-align: center; | |
545 | width: 170px; /* Width toggle */ | |
546 | ||
19e5d9ff | 547 | &::after { |
d45eaff6 MW |
548 | clear: both; |
549 | content: ''; | |
550 | display: block; | |
551 | } | |
552 | ||
553 | header .username { | |
554 | color: @wcfLinkColor; | |
555 | font-size: @wcfTitleFontSize; | |
556 | font-weight: bold; | |
557 | padding: 0 3px 1px; | |
558 | ||
559 | .textShadow(@wcfContainerHoverBackgroundColor); | |
560 | ||
561 | a { | |
562 | text-decoration: none; | |
563 | } | |
564 | } | |
565 | ||
566 | .userTitle { | |
567 | margin: 7px 0 0; | |
568 | } | |
569 | ||
570 | .userRank { | |
571 | margin: 2px 0 0; | |
572 | } | |
573 | ||
574 | .userAvatar { | |
575 | display: inline-block; | |
576 | margin: @wcfGapSmall 0 0; | |
577 | position: relative; | |
578 | text-align: left; | |
579 | ||
580 | > .badgeOnline { | |
8ce85e3a | 581 | border-radius: 0 5px 5px 0; |
d45eaff6 MW |
582 | color: rgba(238, 255, 238, 1); |
583 | bottom: 7px; | |
584 | left: -5px; | |
585 | position: absolute; | |
586 | text-transform: uppercase; | |
587 | ||
d45eaff6 MW |
588 | .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px); |
589 | .linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%)); | |
590 | .textShadow(darken(rgba(0, 153, 0, 1), 10%)); | |
591 | ||
19e5d9ff | 592 | &::before { |
d45eaff6 MW |
593 | border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%); |
594 | border-left: 6px solid transparent; | |
595 | content: ""; | |
596 | display: block; | |
597 | left: 0; | |
598 | position: absolute; | |
599 | top: -4px; | |
600 | } | |
601 | } | |
602 | } | |
603 | ||
604 | .userCredits { | |
605 | font-size: @wcfSmallFontSize; | |
606 | margin: @wcfGapSmall 0 0; | |
607 | overflow: hidden; | |
608 | padding: @wcfGapSmall 0 0; | |
609 | ||
610 | .dataList { | |
611 | > dt { | |
42ee7742 | 612 | width: 46%; |
d45eaff6 MW |
613 | } |
614 | ||
615 | > dd { | |
42ee7742 | 616 | margin-left: 49%; |
0f8df254 | 617 | word-wrap: break-word; |
d45eaff6 MW |
618 | } |
619 | } | |
620 | } | |
621 | } | |
622 | ||
623 | .message:not(.messageReduced) .messageOptions { | |
624 | .clearfix(); | |
625 | } | |
626 | ||
627 | .message:not(.messageReduced) .messageBody { | |
628 | .clearfix(); | |
629 | } | |
630 | ||
631 | li:nth-child(2n+1) .message { | |
19e5d9ff | 632 | &.messageSidebarOrientationLeft .messageHeader::after { |
d45eaff6 MW |
633 | border-right-color: @wcfContainerAccentBackgroundColor; |
634 | } | |
635 | ||
19e5d9ff | 636 | &.messageSidebarOrientationRight .messageHeader::after { |
d45eaff6 MW |
637 | border-left-color: @wcfContainerAccentBackgroundColor; |
638 | } | |
639 | ||
640 | .messageContent { | |
641 | background-color: @wcfContainerAccentBackgroundColor; | |
642 | } | |
643 | } | |
644 | ||
645 | .messageReduced { | |
646 | .messageOptions > .breadcrumbs { | |
647 | bottom: 10px; | |
648 | left: 0; | |
649 | opacity: 1; | |
650 | position: relative; | |
651 | } | |
903f09f4 MW |
652 | |
653 | &.messageDisabled { | |
654 | border-color: @wcfDisabledColor; | |
655 | ||
656 | .messageContent { | |
657 | @wcfDisabledBackgroundGradientColor: fade(@wcfDisabledBackgroundColor, 0%); | |
050b5ed6 | 658 | .linearGradientNative(~"180deg, @{wcfDisabledBackgroundColor}, @{wcfDisabledBackgroundGradientColor} 90px"); |
903f09f4 MW |
659 | } |
660 | } | |
661 | ||
662 | &.messageDeleted { | |
663 | border-color: @wcfDeletedColor; | |
664 | ||
665 | .messageContent { | |
666 | @wcfDeletedBackgroundGradientColor: fade(@wcfDeletedBackgroundColor, 0%); | |
050b5ed6 | 667 | .linearGradientNative(~"180deg, @{wcfDeletedBackgroundColor}, @{wcfDeletedBackgroundGradientColor} 90px"); |
903f09f4 MW |
668 | } |
669 | } | |
670 | ||
671 | &.jsMarked { | |
672 | border-color: @wcfSelectedColor; | |
673 | ||
674 | .messageContent { | |
675 | @wcfSelectedBackgroundGradientColor: fade(@wcfSelectedBackgroundColor, 0%); | |
050b5ed6 | 676 | .linearGradientNative(~"180deg, @{wcfSelectedBackgroundColor}, @{wcfSelectedBackgroundGradientColor} 90px"); |
903f09f4 MW |
677 | } |
678 | } | |
d45eaff6 MW |
679 | } |
680 | ||
681 | .messageCollapsed { | |
682 | color: @wcfDimmedColor; | |
683 | opacity: .8; | |
684 | padding: @wcfGapMedium @wcfGapLarge; | |
685 | ||
686 | .transition(opacity, .1s); | |
687 | ||
688 | &:hover { | |
689 | opacity: 1; | |
690 | } | |
691 | ||
692 | &.messageCollapsedExpandable { | |
693 | cursor: pointer; | |
694 | } | |
695 | ||
696 | h1 { | |
697 | font-size: @wcfSmallFontSize; | |
698 | } | |
699 | ||
700 | .messageCounter { | |
701 | padding-top: 3px; | |
702 | } | |
703 | ||
704 | &.jsMarked { | |
705 | background-color: @wcfSelectedBackgroundColor !important; | |
706 | color: @wcfColor; | |
707 | ||
708 | a { | |
709 | color: @wcfColor; | |
710 | } | |
711 | } | |
712 | } | |
713 | ||
714 | @media only screen and (max-width: 800px) { | |
715 | .messageCollapsed { | |
716 | padding: @wcfGapSmall; | |
717 | } | |
718 | } | |
719 | ||
720 | @media only screen and (min-width: 641px) and (max-width: 800px) { | |
721 | .messageCollapsed { | |
722 | padding: @wcfGapSmall @wcfGapMedium; | |
723 | } | |
724 | } | |
725 | ||
726 | /* quick reply and inline editor */ | |
727 | .messageBody > span.icon-spinner { | |
728 | left: 50%; | |
729 | margin: -21px -21px 0 0; | |
730 | position: absolute; | |
731 | top: 50%; | |
732 | } | |
733 | ||
734 | #messageQuickReply { | |
735 | .formSubmit { | |
736 | padding-bottom: @wcfGapMedium; | |
737 | } | |
738 | } | |
739 | ||
740 | /* message quotes */ | |
741 | #showQuotes { | |
742 | bottom: @wcfGapLarge + @wcfGapTiny; | |
743 | cursor: pointer; | |
744 | opacity: .7; | |
745 | position: fixed; | |
746 | right: @wcfGapLarge + @wcfGapTiny; | |
747 | ||
748 | .transition(opacity, .2s); | |
749 | ||
750 | &:hover { | |
751 | opacity: 1; | |
752 | } | |
753 | } | |
754 | ||
755 | #messageQuoteList { | |
756 | max-width: 800px !important; | |
e3369fd2 | 757 | |
d45eaff6 MW |
758 | li { |
759 | &:not(:first-child) { | |
760 | margin-top: @wcfGapSmall; | |
761 | } | |
762 | ||
763 | > span { | |
764 | float: left; | |
765 | width: 40px; | |
766 | ||
767 | > input { | |
768 | vertical-align: bottom; | |
769 | } | |
770 | ||
771 | > span { | |
772 | cursor: pointer; | |
773 | vertical-align: middle; | |
774 | } | |
775 | } | |
776 | ||
777 | div.jsQuote { | |
778 | margin-left: 60px; | |
779 | } | |
780 | ||
781 | div.jsFullQuote { | |
782 | display: none; | |
783 | } | |
784 | } | |
785 | } | |
786 | ||
787 | #quoteManagerCopy { | |
788 | cursor: pointer; | |
789 | ||
790 | .pointer { | |
791 | border-width: 5px 5px 0; | |
792 | bottom: -5px; | |
793 | margin-left: -5px; | |
794 | top: auto; | |
795 | } | |
796 | } | |
797 | ||
798 | /* share buttons */ | |
799 | .messageShareButtons { | |
800 | > ul > li { | |
801 | display: inline-block; | |
802 | ||
803 | > a { | |
804 | text-decoration: none; | |
805 | ||
806 | > .icon { | |
807 | height: 28px; | |
808 | } | |
809 | } | |
810 | ||
811 | > .badge { | |
812 | background-color: @wcfContainerBackgroundColor; | |
813 | border: 1px solid @wcfContainerBorderColor; | |
8ce85e3a | 814 | border-radius: 3px; |
d45eaff6 MW |
815 | color: @wcfColor; |
816 | line-height: 23px; | |
817 | padding: 0 7px; | |
818 | position: relative; | |
819 | vertical-align: 1px; | |
820 | ||
19e5d9ff | 821 | &::before { |
d45eaff6 MW |
822 | border: 6px solid @wcfContainerBorderColor; |
823 | border-color: transparent @wcfContainerBorderColor transparent transparent; | |
824 | content: ""; | |
825 | display: block; | |
826 | height: 0; | |
827 | margin-top: -6px; | |
828 | position: absolute; | |
829 | right: 100%; | |
830 | top: 50%; | |
831 | width: 0; | |
832 | } | |
833 | ||
19e5d9ff | 834 | &::after { |
d45eaff6 MW |
835 | border: 6px solid @wcfContainerBackgroundColor; |
836 | border-color: transparent @wcfContainerBackgroundColor transparent transparent; | |
837 | content: ""; | |
838 | display: block; | |
839 | height: 0; | |
840 | margin-right: -1px; | |
841 | margin-top: -6px; | |
842 | position: absolute; | |
843 | right: 100%; | |
844 | top: 50%; | |
845 | width: 0; | |
846 | } | |
847 | } | |
848 | } | |
849 | ||
850 | .jsShareFacebook { | |
851 | > a > .icon { | |
852 | color: rgb(59, 89, 152); | |
853 | } | |
854 | } | |
855 | ||
856 | .jsShareTwitter { | |
857 | > a > .icon { | |
858 | color: rgb(64, 153, 255); | |
859 | } | |
860 | } | |
861 | ||
862 | .jsShareGoogle { | |
863 | > a > .icon { | |
864 | color: rgb(211, 72, 54); | |
865 | } | |
866 | } | |
867 | ||
868 | .jsShareReddit { | |
869 | > a > img { | |
343d2e4a F |
870 | width: 24px; |
871 | height: 24px; | |
872 | margin: 0 4px 4px; | |
677fb3fd F |
873 | box-shadow: 0 1px 0 rgba(255, 255, 255, .8); |
874 | border-radius: 3px; | |
875 | ||
876 | /* smooth fixes */ | |
877 | background-color: rgba(255, 255, 255, .8); | |
d45eaff6 MW |
878 | } |
879 | } | |
880 | } | |
881 | ||
882 | .contentNavigation > .messageShareButtons { | |
883 | float: right; | |
884 | margin-right: @wcfGapMedium; | |
885 | margin-top: 0; | |
886 | } | |
887 | ||
8ce85e3a MW |
888 | .messageSearchResultList { |
889 | > li > .box48 > div > .containerHeadline > h3 { | |
890 | padding-right: 100px; | |
891 | } | |
892 | } | |
893 | ||
894 | .likeButton.active { | |
895 | .icon { | |
896 | color: rgba(0, 153, 0, 1); | |
897 | } | |
898 | } | |
899 | ||
900 | .dislikeButton.active { | |
901 | .icon { | |
902 | color: rgba(204, 0, 0, 1); | |
903 | } | |
904 | } | |
905 | ||
5e18a011 AE |
906 | /* redactor fixes */ |
907 | .redactor_editor { | |
6ed8e515 AE |
908 | padding: 10px !important; |
909 | ||
910 | & + textarea { | |
911 | background-color: rgba(255, 255, 255, 1) !important; | |
912 | border: 1px solid rgba(238, 238, 238, 1) !important; | |
913 | color: @wcfColor !important; | |
914 | padding: 10px !important; | |
915 | z-index: 1 !important; | |
916 | } | |
917 | ||
6cdbbbae MW |
918 | ul, |
919 | ol { | |
920 | .nativeList; | |
921 | } | |
922 | ||
923 | ul { | |
924 | list-style-type: disc; | |
925 | } | |
926 | ||
927 | ol { | |
928 | list-style-type: decimal; | |
929 | } | |
930 | } | |
931 | ||
d47835d8 AE |
932 | .redactor_toolbar { |
933 | background-color: @wcfButtonBackgroundColor !important; | |
934 | ||
935 | &:after { | |
936 | display: inline !important; | |
937 | } | |
938 | ||
939 | > li { | |
22459e14 | 940 | &:last-of-type, |
d47835d8 AE |
941 | &.separator { |
942 | border-right: 1px solid @wcfButtonBorderColor; | |
943 | } | |
944 | ||
945 | > a { | |
946 | background-color: @wcfButtonBackgroundColor; | |
947 | color: rgba(51, 51, 51, 1) !important; | |
948 | ||
949 | .textShadow(@wcfButtonBackgroundColor); | |
950 | ||
6ed8e515 AE |
951 | &> i { |
952 | height: 14px; | |
953 | width: 12px; | |
954 | ||
955 | &:before { | |
956 | color: rgba(51, 51, 51, 1) !important; | |
957 | } | |
d47835d8 AE |
958 | } |
959 | ||
6ed8e515 | 960 | &:not(.redactor_button_disabled):hover { |
d47835d8 AE |
961 | background-color: rgba(204, 204, 204, 1) !important; |
962 | color: rgba(51, 51, 51, 1) !important; | |
963 | ||
964 | .textShadow(@wcfButtonHoverBackgroundColor); | |
965 | ||
966 | > i:before { | |
967 | color: rgba(51, 51, 51, 1) !important; | |
968 | } | |
969 | } | |
970 | ||
22459e14 | 971 | &.fa-redactor-btn:before { |
d47835d8 AE |
972 | content: ""; |
973 | } | |
974 | } | |
975 | } | |
976 | } | |
977 | ||
67837071 AE |
978 | .redactorAttachmentContainer { |
979 | background-color: rgba(255, 255, 255, 1); | |
980 | border: 1px solid rgba(238, 238, 238, 1); | |
981 | border-top-width: 0; | |
982 | padding: 7px 14px 7px; | |
983 | } | |
984 | ||
5e18a011 AE |
985 | .redactor_dropdown_box_wsmiley > ul > li:not(:last-child) { |
986 | margin-right: 3px !important; | |
987 | } | |
988 | ||
989 | .redactor_dropdown_box_fontcolor { | |
990 | width: 192px !important; | |
991 | ||
992 | > a:not(:last-child) { | |
993 | border: 2px solid rgba(255, 255, 255, 1); | |
994 | float: left; | |
995 | font-size: 0; | |
996 | height: 20px; | |
997 | padding: 0 !important; | |
998 | margin: 0; | |
999 | width: 20px; | |
1000 | } | |
1001 | ||
1002 | > a:last-child { | |
1003 | border: 2px solid rgba(255, 255, 255, 1); | |
1004 | border-bottom-width: 0; | |
1005 | clear: both; | |
1006 | display: block; | |
1007 | font-size: .85rem; | |
1008 | padding: 2px 4px; | |
1009 | text-align: center; | |
1010 | } | |
e0265650 | 1011 | } |
1012 | ||
6158e84d | 1013 | @media screen and (max-width: 800px), print { |
d45eaff6 MW |
1014 | .message.messageSidebarOrientationLeft, |
1015 | .message.messageSidebarOrientationRight { | |
1016 | .messageContent { | |
1017 | border: 0; | |
1018 | margin: 0; | |
1019 | } | |
1020 | ||
1021 | .messageSidebar { | |
1022 | float: none; | |
a78137a1 | 1023 | min-height: 37px; |
d45eaff6 MW |
1024 | } |
1025 | ||
1026 | .messageHeader { | |
19e5d9ff MW |
1027 | &::before, |
1028 | &::after { | |
d45eaff6 MW |
1029 | display: none; |
1030 | } | |
1031 | } | |
1032 | } | |
1033 | ||
1034 | .message .messageHeader .messageQuickOptions, | |
1035 | .message .messageBody .messageSignature, | |
1036 | .message .messageSidebar .userCredits { | |
1037 | display: none; | |
1038 | } | |
1039 | ||
1040 | .message .messageSidebar { | |
1041 | padding: 7px; | |
1042 | text-align: left; | |
1043 | width: auto; | |
1044 | ||
1045 | > div { | |
1046 | margin-left: 40px; | |
1047 | } | |
1048 | ||
1049 | .userAvatar { | |
1050 | left: 7px; | |
1051 | position: absolute; | |
1052 | top: 0; | |
1053 | ||
1054 | img { | |
1055 | height: 32px !important; | |
1056 | width: 32px !important; | |
1057 | } | |
1058 | ||
1059 | > .badgeOnline { | |
1060 | display: none; | |
1061 | } | |
1062 | } | |
1063 | ||
1064 | .userTitle { | |
1065 | margin-top: -2px; | |
1066 | } | |
1067 | } | |
1068 | ||
1069 | /* reduce paddings */ | |
1070 | .message .messageContent .messageHeader { | |
1071 | padding: 7px 7px 0; | |
1072 | } | |
1073 | ||
1074 | .message .messageBody { | |
1075 | padding: 7px; | |
1076 | } | |
1077 | ||
1078 | .message .messageBody > div:not(.messageFooter) { | |
1079 | padding: 7px 0; | |
1080 | } | |
1081 | ||
1082 | .message .messageBody > footer { | |
1083 | padding: 0; | |
1084 | position: absolute; | |
1085 | right: 7px; | |
1086 | top: 7px; | |
1087 | } | |
1088 | ||
1089 | .message .messageOptions nav { | |
1090 | opacity: 1; | |
1091 | position: static; | |
1092 | text-align: left; | |
1093 | } | |
1094 | ||
d45eaff6 MW |
1095 | .message .newMessageBadge { |
1096 | display: none; | |
1097 | } | |
1098 | } | |
1099 | ||
6158e84d | 1100 | @media screen and (min-width: 641px) and (max-width: 800px), print { |
d45eaff6 MW |
1101 | .message .messageSidebar, |
1102 | .message .messageContent .messageHeader, | |
1103 | .message .messageBody { | |
1104 | padding-left: @wcfGapMedium; | |
1105 | padding-right: @wcfGapMedium; | |
1106 | } | |
1107 | ||
1108 | .message .messageSidebar { | |
1109 | .userAvatar { | |
1110 | left: @wcfGapMedium; | |
1111 | } | |
1112 | } | |
1113 | ||
1114 | .message .messageBody > footer { | |
1115 | right: @wcfGapMedium; | |
1116 | } | |
1117 | } | |
8ce85e3a | 1118 | |
25ab93da MW |
1119 | @media only screen and (max-width: 800px) { |
1120 | .moderationList { | |
1121 | thead { | |
1122 | display: none; | |
1123 | } | |
1124 | ||
1125 | tbody { | |
1126 | .columnAssignedUserID, | |
1127 | .columnLastChangeTime { | |
1128 | display: none; | |
1129 | } | |
1130 | } | |
1131 | } | |
1132 | } |