MDL-64129 messaging: messaging accordion
[moodle.git] / theme / bootstrapbase / less / moodle / message.less
CommitLineData
879e2bef 1/** The message area **/
99c7f0a7
RW
2.setSelectedContact() {
3 background-color: #4f94cd;
4 color: #fff;
5 border: none;
6
7 .information {
8 .lastmessage {
9 color: #fff;
10 }
11 }
12 .picture {
13 border: none;
14 }
15}
16
065fd120 17.messaging-area-container {
4d0fa501 18 margin-bottom: 30px;
16245a40 19
4d0fa501
RW
20 .status {
21 .online-text {
22 display: none;
7b55aaa1 23 color: #7d7;
4d0fa501 24 }
16245a40 25
4d0fa501
RW
26 .offline-text {
27 color: #ff6961;
28 }
16245a40 29
4d0fa501
RW
30 &.online {
31 .online-text {
d0f3b5f0 32 display: inherit;
16245a40 33 }
4d0fa501 34 .offline-text {
16245a40
MN
35 display: none;
36 }
4d0fa501
RW
37 }
38 }
16245a40 39
4d0fa501
RW
40 a,
41 .btn.btn-link {
42 color: #4f94cd;
43 }
16245a40 44
4d0fa501
RW
45 .messaging-area {
46 border: 1px solid #e3e3e3;
47 clear: both;
48 border-radius: 4px;
16245a40 49
fce0f1c2
DW
50 img {
51 max-width: 100%;
52 }
53
065fd120 54 .contacts-area {
4d0fa501 55 border-right: 1px solid #e3e3e3;
065fd120 56 height: 600px;
c3e72743
DW
57 @media (max-height: 670px) {
58 height: 500px;
59 }
99c7f0a7
RW
60 width: 280px;
61 display: inline-block;
62 box-sizing: border-box;
879e2bef 63
cd03b8d7
MN
64 &.searchfilter {
65
66 .searchtextarea {
67 height: 80px;
68 }
69
70 .searcharea {
71 height: 470px;
72 }
73 }
74
75 .searchtextarea {
065fd120
MN
76 padding: 5px;
77 text-align: center;
4d0fa501
RW
78 height: 50px;
79 box-sizing: border-box;
80 line-height: 50px;
81 background-color: #fff;
82 transition: background-color linear 0.2s;
83
84 input {
85 background-color: #f5f5f5;
86 border: 0;
87 width: 90%;
4d0fa501
RW
88 box-shadow: none;
89 transition: background-color linear 0.2s;
90
91 &:focus {
4d0fa501
RW
92 box-shadow: none;
93 }
94 }
95
96 &.searching {
97 background-color: #f5f5f5;
98 transition: background-color linear 0.2s;
99
100 input {
101 background-color: #fff;
102 transition: background-color linear 0.2s;
103 }
104 }
cd03b8d7
MN
105
106 .searchfilterarea {
107 line-height: 20px;
d14207fd 108 cursor: pointer;
cd03b8d7
MN
109
110 .searchfilter {
111 float: left;
112 }
113
114 .searchfilterdelete {
115 float: left;
116 margin-left: 5px;
cd03b8d7
MN
117 }
118 }
119 }
120
121 .searcharea {
122
123 .heading {
124 text-align: center;
125 border-top: 1px solid black;
126 border-bottom: 1px solid black;
127 font-size: 14px;
128 font-weight: bold;
129 }
130
131 .course {
132 text-align: center;
133
134 &:hover {
135 background-color: #4f94cd;
136 color: #fff;
137 border: none;
138 cursor: pointer;
139 }
140 }
c9ead36a
MN
141
142 .noresults {
143 padding-top: 20px;
144 text-align: center;
145 }
879e2bef
MN
146 }
147
065fd120 148 .contacts {
4d0fa501 149 height: 500px;
c3e72743
DW
150 @media (max-height: 670px) {
151 height: 400px;
152 }
ab95d755 153 overflow-y: auto;
99c7f0a7 154 -webkit-overflow-scrolling: touch;
879e2bef 155
4d1b76ee
MN
156 .nocontacts {
157 padding-top: 20px;
158 text-align: center;
159 }
160
065fd120 161 .contact {
4d0fa501
RW
162 height: 66px;
163 cursor: pointer;
164 border-bottom: 1px solid #e3e3e3;
165 box-sizing: border-box;
166
6c3b9541 167 &.unread {
61868b79
RW
168 background-color: #f1f1f1;
169
99c7f0a7
RW
170 .picture {
171 border-color: #f1f1f1;
172 }
173
61868b79 174 .information {
99c7f0a7 175 width: 60%;
61868b79
RW
176 }
177
178 .unread-count-container {
179 display: inline-block;
99c7f0a7
RW
180 width: 15%;
181 float: left;
61868b79 182 }
6c3b9541
MN
183 }
184
065fd120 185 &:hover {
4d0fa501 186 .setSelectedContact();
b1e3f761 187 background-color: #79b5e6;
065fd120 188 }
879e2bef 189
99c7f0a7 190 &.selected {
4d0fa501
RW
191 .setSelectedContact();
192 }
193
194 .picture {
195 line-height: 66px;
196 text-align: center;
4d0fa501
RW
197 height: 66px;
198 border-bottom: 1px solid #fff;
99c7f0a7
RW
199 width: 25%;
200 float: left;
201 display: inline-block;
202 box-sizing: border-box;
4d0fa501
RW
203
204 img {
205 border-radius: 50%;
206 height: 54px;
207 }
879e2bef
MN
208 }
209
065fd120 210 .information {
4d0fa501
RW
211 padding: 6px 0;
212 height: 66px;
99c7f0a7
RW
213 width: 75%;
214 float: left;
215 display: inline-block;
216 box-sizing: border-box;
065fd120
MN
217
218 .name {
219 font-weight: bold;
09c3c732
RW
220
221 img {
222 vertical-align: baseline;
223 }
065fd120
MN
224 }
225
226 .lastmessage {
227 word-wrap: break-word;
4d0fa501
RW
228 margin: 0;
229 height: 40px;
230 line-height: 17px;
231 overflow: hidden;
232 text-overflow: ellipsis;
233 white-space: nowrap;
234 color: #a1a1a1;
235 padding-right: 10px;
065fd120 236 }
879e2bef 237 }
61868b79
RW
238
239 .unread-count-container {
240 display: none;
241 line-height: 66px;
242 text-align: center;
99c7f0a7 243 box-sizing: border-box;
61868b79 244 }
879e2bef
MN
245 }
246 }
879e2bef 247
4d0fa501
RW
248 .setSelectedTab() {
249 color: #4f94cd;
250 }
251
065fd120 252 .tabs {
4d0fa501
RW
253 border-top: 1px solid #e3e3e3;
254 height: 50px;
255 box-sizing: border-box;
879e2bef 256
065fd120 257 .tab {
4d0fa501
RW
258 cursor: pointer;
259 height: 100%;
260 background-color: #f5f5f5;
261 margin: 0;
262 width: 50%;
263 text-align: center;
99c7f0a7 264 float: left;
4d0fa501 265
065fd120 266 &:hover {
4d0fa501 267 .setSelectedTab();
065fd120 268 }
879e2bef 269
4d0fa501
RW
270 .tabimage {
271 height: 30px;
272 line-height: 30px;
273
274 img {
275 height: 20px;
276 }
277 }
065fd120 278 }
879e2bef 279
4d0fa501
RW
280 .tab.selected {
281 .setSelectedTab();
065fd120 282 }
4d0fa501 283 }
879e2bef 284 }
879e2bef 285
065fd120 286 .messages-area {
99c7f0a7 287 width: ~"calc(100% - 280px)";
4d0fa501 288 height: 600px;
c3e72743
DW
289 @media (max-height: 670px) {
290 height: 500px;
291 }
4d0fa501
RW
292 box-sizing: border-box;
293 margin: 0;
294 position: relative;
99c7f0a7
RW
295 float: right;
296
297 .btn-container {
298 position: absolute;
299 top: 0;
300 left: 0;
301 padding-left: 15px;
302 font-weight: normal;
303
304 &.view-toggle {
305 display: none;
306 }
307
308 &.delete-all {
309 display: none;
310 }
311 }
312
313 .profile-header {
314 height: 50px;
315 line-height: 50px;
316 display: none;
317
318 .btn-container {
319 display: block;
320
321 .btn-link {
322 padding: 0;
323 line-height: inherit;
324 }
325 }
326 }
4d0fa501 327
065fd120 328 .profile {
4d0fa501 329 padding: 30px;
065fd120 330 font-size: 16px;
99c7f0a7 331 height: 600px;
c3e72743
DW
332 @media (max-height: 670px) {
333 height: 500px;
334 }
99c7f0a7
RW
335 box-sizing: border-box;
336 overflow-y: auto;
337 -webkit-overflow-scrolling: touch;
c6e97f54 338
4d0fa501
RW
339 .user-container {
340 height: 100px;
341
342 .profile-picture {
343 border-radius: 50%;
344 max-height: 100px;
345 display: inline-block;
346 }
347
348 .name-container {
349 display: inline-block;
350 vertical-align: top;
351 margin-top: 20px;
352 margin-left: 10px;
353
354 .name {
355 font-weight: bold;
356 display: block;
357 }
358
359 .status {
360 display: block;
361 font-size: 14px;
362 }
065fd120 363 }
c6e97f54 364 }
c6e97f54 365
065fd120 366 .information {
4d0fa501
RW
367 margin: 0;
368 display: inline-block;
369 float: right;
370 margin-top: 20px;
371 font-size: 14px;
443dbb82 372 list-style: none;
4d0fa501 373
443dbb82 374 .name {
4d0fa501
RW
375 display: inline-block;
376 font-weight: bold;
377 text-align: right;
378 margin-right: 10px;
379 }
c6e97f54 380
443dbb82 381 .value {
4d0fa501 382 display: inline-block;
065fd120 383 }
c6e97f54 384 }
c6e97f54 385
065fd120 386 .actions {
4d0fa501
RW
387 padding-top: 80px;
388
389 .separator {
390 border-bottom: 1px solid #e3e3e3;
391 margin-bottom: 20px;
392 padding-bottom: 5px;
393
394 a {
395 &.danger {
396 color: #ff6961;
397 }
398 }
399 }
065fd120 400 }
c6e97f54 401 }
879e2bef 402
4d0fa501
RW
403 .messages-header {
404 height: 50px;
879e2bef 405 font-weight: bold;
4d0fa501
RW
406 line-height: 50px;
407 box-sizing: border-box;
408 border-bottom: 1px solid #e3e3e3;
409 text-align: center;
410 position: relative;
411
99c7f0a7
RW
412 .btn-link {
413 padding: 0;
414 line-height: inherit;
415 }
416
4d0fa501
RW
417 .delete-instructions {
418 display: none;
419 }
420
421 .name-container {
422 padding-top: 9px;
423 display: inline-block;
424
425 .name {
426 line-height: 20px;
427 }
428
429 .status {
430 line-height: 12px;
431 font-size: 12px;
432 font-weight: normal;
433 }
434 }
435
436 .actions {
437 position: absolute;
438 top: 0;
439 right: 0;
440 padding-right: 15px;
441 font-weight: normal;
442
443 .cancel-messages-delete {
444 display: none;
445 }
446 }
879e2bef
MN
447 }
448
065fd120
MN
449 .messages {
450 height: 500px;
c3e72743
DW
451 @media (max-height: 670px) {
452 height: 400px;
453 }
065fd120 454 overflow-y: auto;
99c7f0a7
RW
455 overflow-x: hidden;
456 -webkit-overflow-scrolling: touch;
4d0fa501 457 box-sizing: border-box;
99c7f0a7 458 padding: 20px;
879e2bef 459
065fd120
MN
460 .blocktime {
461 clear: both;
065fd120 462 text-align: center;
4d0fa501
RW
463 color: #a1a1a1;
464 font-size: 12px;
465 margin: 5px 0;
3090f52f 466 }
879e2bef 467
065fd120 468 .message {
3090f52f 469
065fd120
MN
470 .deletemessagecheckbox {
471 display: none;
4d0fa501
RW
472 text-align: center;
473 padding-top: 5px;
065fd120 474 }
3090f52f 475
065fd120 476 .content {
4d0fa501
RW
477 border: 1px solid #e3e3e3;
478 padding: 10px;
065fd120 479 margin-bottom: 5px;
4d0fa501 480 font-size: 12px;
065fd120 481 word-wrap: break-word;
4d0fa501
RW
482 max-width: 55%;
483 border-radius: 4px;
484 position: relative;
485
486 .text {
54d83992
RW
487 display: block;
488
4d0fa501
RW
489 p {
490 margin: 0;
491 }
492 }
493
494 .timesent {
495 font-size: 10px;
496 color: #a1a1a1;
99c7f0a7 497 float: right;
4d0fa501 498 }
065fd120
MN
499 }
500
501 .content.left {
502 float: left;
503 }
504
505 .content.right {
506 float: right;
507 }
3090f52f 508 }
879e2bef 509 }
879e2bef 510
4d0fa501 511 .response {
99c7f0a7 512 display: table;
4d0fa501 513 border-bottom-right-radius: 4px;
99c7f0a7 514 padding: 10px 10px 9px;
4d0fa501
RW
515 position: absolute;
516 bottom: 0;
517 left: 0;
518 width: 100%;
519 line-height: 28px;
520 text-align: center;
521 border-top: 1px solid #e3e3e3;
522 box-sizing: border-box;
523 background-color: #fff;
524 transition: background-color linear 0.2s;
525
526 .delete-confirmation {
527 display: none;
528
529 .btn.btn-link.confirm {
530 border: 1px solid #4f94cd;
531 border-radius: 4px;
532
533 &:hover {
534 background-color: #4f94cd;
535 color: #fff;
536 text-shadow: none;
537 }
538 }
539 }
540
99c7f0a7
RW
541 .message-box {
542 display: table-row;
4d0fa501 543
99c7f0a7
RW
544 .message-text-container {
545 display: table-cell;
546
547 textarea {
548 width: 100%;
549 margin: 0;
550 resize: none;
551 border: none;
552 box-shadow: none;
553 box-sizing: border-box;
554 background-color: #f5f5f5;
555 transition: background-color linear 0.2s;
556
557 &:focus {
558 box-shadow: none;
559 }
560 }
561 }
562
563 .send-button-container {
564 display: table-cell;
565 width: 1px;
4d0fa501
RW
566 }
567 }
568
569 &.messaging {
570 background-color: #f5f5f5;
571 transition: background-color linear 0.2s;
572
99c7f0a7
RW
573 .message-box {
574 .message-text-container {
575 textarea {
576 background-color: #fff;
577 transition: background-color linear 0.2s;
578 }
579 }
4d0fa501
RW
580 }
581 }
582 }
583
584 &.editing {
585 .messages-header {
99c7f0a7
RW
586 .btn-container {
587 &.view-all {
588 display: none;
589 }
590
591 &.delete-all {
592 display: block;
593 }
594 }
595
4d0fa501
RW
596 .delete-instructions {
597 display: block;
598 }
599
600 .name-container {
601 display: none;
602 }
603
604 .actions {
605 .messages-delete {
606 display: none;
607 }
608
609 .cancel-messages-delete {
610 display: block;
611 }
612 }
613 }
614
615 .messages {
616 .message {
617 cursor: pointer;
618
619 &[aria-checked="true"] {
620 .content {
621 background-color: #4f94cd;
622 border-color: #4f94cd;
623 color: #fff;
624
625 .timesent {
626 color: #fff;
627 }
628 }
629 }
b1e3f761
RW
630
631 &[aria-checked="false"] {
632 .content {
633 &:hover {
634 background-color: #79b5e6;
635 color: #fff;
636
637 .timesent {
638 color: #fff;
639 }
640 }
641 }
642 }
4d0fa501
RW
643 }
644 }
645
646 .response {
647 .delete-confirmation {
648 display: block;
649 }
650
651 .message-box {
652 display: none;
653 }
654 }
065fd120 655 }
879e2bef
MN
656 }
657 }
658}
659
a0eabdd3 660.preferences-container {
efa07907
RW
661 .container-fluid {
662 padding: 0;
663
664 .span6 {
665 min-height: 20px;
666 }
667 }
668 .align-bottom {
669 vertical-align: bottom;
670 }
a0eabdd3
RW
671 .preference-table {
672 border: 1px solid #ddd;
673
efa07907
RW
674 thead {
675 th {
676 text-align: center;
8c125526
RW
677
678 .config-warning {
679 display: none;
680 }
681
682 &.unconfigured {
683 .config-warning {
684 display: inline-block;
685 }
686 }
efa07907
RW
687 }
688 }
a0eabdd3
RW
689 tr {
690 td {
691 &:not(:first-child) {
692 width: 150px;
693 text-align: center;
694 }
695 &:nth-child(even) {
696 background-color: #f7f7f7;
697 }
698 }
699 th:nth-child(even) {
700 background-color: #f7f7f7;
701 }
702 }
703 .preference-row {
963ba889
RW
704 .hover-tooltip-container {
705 display: inline-block;
706 }
707
a0eabdd3
RW
708 .preference-name {
709 vertical-align: middle;
a0eabdd3
RW
710 }
711 .disabled-message {
a0eabdd3
RW
712 text-align: center;
713 height: 30px;
714 line-height: 30px;
715 }
716 .preference-state {
717 margin: 0;
718 padding: 0;
719 display: inline-block;
720 vertical-align: middle;
721
efa07907
RW
722 input[type="checkbox"]:checked + .preference-state-status-container {
723 background-color: #5cb85c;
724
725 .on-text {
726 display: inline-block;
727 }
728 .off-text {
729 display: none;
730 }
a0eabdd3 731 }
efa07907 732 .preference-state-status-container {
a0eabdd3
RW
733 width: 30px;
734 height: 30px;
735 line-height: 30px;
736 text-align: center;
e9cce46c 737 border-radius: 4px;
efa07907
RW
738 background-color: #d9534f;
739 color: #fff;
963ba889 740 cursor: pointer;
e9cce46c
RW
741
742 .loading-icon {
743 display: none;
744 }
efa07907
RW
745 .on-text {
746 display: none;
747 }
748 .off-text {
749 display: inline-block;
750 }
e9cce46c
RW
751 }
752 &.loading {
efa07907
RW
753 input[type="checkbox"]:checked + .preference-state-status-container {
754 .on-text,
755 .off-text {
756 display: none;
757 }
758 }
759
760 .preference-state-status-container {
761 .on-text,
762 .off-text {
e9cce46c
RW
763 display: none;
764 }
765 .loading-icon {
766 display: block;
767 }
768 }
a0eabdd3
RW
769 }
770 }
771 &.loading {
772 .preference-name {
773 .loading-icon {
774 display: block;
775 }
776 }
777 }
778 }
779 }
8c125526 780}
a0eabdd3 781
8c125526
RW
782.disabled-message {
783 display: none;
784}
785
786.disabled {
787 .disabled-message {
788 display: block;
789
790 + form {
791 display: none;
a0eabdd3
RW
792 }
793 }
794}
8c125526 795
a0eabdd3
RW
796.general-settings-container {
797 .loading-icon {
798 display: none;
799 }
800 .loading {
801 .loading-icon {
802 display: inline-block;
803 }
804 }
805 label {
806 display: inline-block;
807 }
808}
643b015d
RW
809.processor-container {
810 position: relative;
a0eabdd3 811
643b015d
RW
812 .loading-container {
813 display: none;
814 position: absolute;
815 width: 100%;
816 height: 100%;
817 text-align: center;
818 background-color: rgba(255, 255, 255, 0.5);
a0eabdd3 819
643b015d
RW
820 .vertical-align {
821 height: 100%;
822 width: 0%;
823 display: inline-block;
824 vertical-align: middle;
a0eabdd3 825 }
643b015d 826 }
a0eabdd3 827
643b015d
RW
828 &.loading {
829 .loading-container {
830 display: block;
a0eabdd3
RW
831 }
832 }
833}
8c125526 834
b7e68d10
RW
835.preferences-page-container {
836 .checkbox-container {
8c125526
RW
837 margin: 30px 5px;
838 line-height: 20px;
839
840 input {
841 line-height: 20px;
842 margin: 0;
843 }
844
845 .loading-icon {
846 display: none;
847 }
848
849 &.loading {
850 .loading-icon {
851 display: inline-block;
852 }
853 }
854 }
855}
99c7f0a7 856
a038fcf5
RW
857.notification-area {
858 height: 600px;
c3e72743
DW
859 @media (max-height: 670px) {
860 height: 500px;
861 }
a038fcf5
RW
862 box-sizing: border-box;
863 border-radius: 4px;
864 margin-bottom: 30px;
865 border: 1px solid #e3e3e3;
866
867 .control-area {
868 box-sizing: border-box;
869 display: inline-block;
870 width: 300px;
871 height: 100%;
872 overflow: auto;
873 -webkit-overflow-scrolling: touch;
874 border-right: 1px solid #e3e3e3;
875
876 .content {
877 position: relative;
878
879 .content-item-container {
880 cursor: pointer;
881 }
882
883 &:empty + .empty-text {
884 display: block;
885 }
886 }
887
888 .loading-icon {
889 display: none;
890 }
891
892 .empty-text {
893 display: none;
894 text-align: center;
895 padding-top: 20px;
896 }
897
898 &.loading {
899 .loading-icon {
900 display: block;
901 text-align: center;
902 box-sizing: border-box;
903 padding: 5px;
904 }
905
906 .content:empty + .empty-text {
907 display: none;
908 }
909 }
910 }
911
912 .content-area {
913 box-sizing: border-box;
914 display: inline-block;
915 width: ~"calc(100% - 300px)";
916 float: right;
917
918 .toggle-mode {
919 display: none;
920 }
921
922 .header {
923 height: 50px;
924 box-sizing: border-box;
925 border-bottom: 1px solid #e3e3e3;
926 padding: 5px;
927
928 .image-container {
929 display: inline-block;
930 height: 25px;
931 width: 24px;
932 float: left;
933 }
934
935 .subject-container {
936 display: inline-block;
937 max-width: ~"calc(100% - 24px)";
938 white-space: nowrap;
939 overflow: hidden;
940 text-overflow: ellipsis;
941 height: 25px;
942 padding-left: 5px;
943 box-sizing: border-box;
944 }
945
946 .timestamp {
947 font-size: 10px;
948 line-height: 10px;
949 margin: 0;
950 color: #666;
951 margin-left: 30px;
952 }
953
954 &:empty {
955 display: none;
956 }
957 }
958
c22141bd 959 > .content {
a038fcf5 960 height: 500px;
c3e72743
DW
961 @media (max-height: 670px) {
962 height: 400px;
963 }
a038fcf5
RW
964 box-sizing: border-box;
965 overflow: auto;
966 -webkit-overflow-scrolling: touch;
967 padding: 15px;
968
969 &:empty {
970 display: none;
971
972 & + .empty-text {
973 display: block;
974 text-align: center;
975 padding-top: 100px;
976 }
977 }
978 }
979
980 .empty-text {
981 display: none;
982 }
983
984 .footer {
985 height: 50px;
986 box-sizing: border-box;
987 text-align: center;
988
989 a {
990 line-height: 50px;
991 }
992
993 &:empty {
994 display: none;
995 }
996 }
997 }
998}
999
99c7f0a7
RW
1000@media (max-width: 979px) {
1001 .messaging-area-container {
1002 .messaging-area {
1003 position: relative;
1004 overflow: hidden;
1005 height: 600px;
c3e72743
DW
1006 @media (max-height: 670px) {
1007 height: 500px;
1008 }
99c7f0a7
RW
1009
1010 .messages-area {
1011 .messages-header {
1012 .btn-container {
1013 &.view-toggle {
1014 display: block;
1015 }
1016
1017 &.delete-all {
1018 display: none;
1019 }
1020 }
1021 }
1022
1023 .profile-header {
1024 display: block;
1025 }
1026
1027 .profile {
1028 height: 550px;
1029 }
1030
1031 &.editing {
1032 .messages-header {
1033 .btn-container {
1034 &.view-toggle {
1035 display: none;
1036 }
1037
1038 &.delete-all {
1039 display: block;
1040 }
1041 }
1042 }
1043 }
1044 }
1045
1046 .contacts-area {
1047 width: 100%;
1048 border-right: none;
1049 position: absolute;
1050 top: 0;
1051 left: 0;
1052 right: auto;
1053 bottom: auto;
1054 }
1055
1056 .messages-area {
1057 width: 100%;
1058 position: absolute;
1059 top: 0;
1060 left: auto;
1061 right: 0;
1062 bottom: auto;
1063 }
1064
1065 &.show-messages {
1066 .contacts-area {
1067 left: -100%;
1068 opacity: 0;
1069 visibility: hidden;
1070 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1071 }
1072
1073 .messages-area {
1074 right: 0;
1075 opacity: 1;
1076 visibility: visible;
1077 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1078 }
1079 }
1080
1081 &.hide-messages {
1082 .contacts-area {
1083 left: 0;
1084 opacity: 1;
1085 visibility: visible;
1086 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1087
1088 .contact {
1089 &.selected {
1090 background-color: inherit;
1091 color: inherit;
1092 border-bottom: 1px solid #e3e3e3;
1093
1094 &:hover {
1095 .setSelectedContact();
1096 background-color: #79b5e6;
1097 }
1098
1099 .picture {
1100 border-bottom: 1px solid #fff;
1101 }
1102
1103 .information {
1104 .lastmessage {
1105 color: #a1a1a1;
1106 }
1107 }
1108 }
1109 }
1110 }
1111
1112 .messages-area {
1113 right: -100%;
1114 opacity: 0;
1115 visibility: hidden;
1116 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1117 }
1118 }
1119 }
1120 }
a038fcf5
RW
1121
1122 .notification-area {
1123 position: relative;
1124 overflow: hidden;
1125
1126 .control-area {
1127 border-right: none;
1128 width: 100%;
1129 position: absolute;
1130 top: 0;
1131 left: 0;
1132 opacity: 1;
1133 visibility: visible;
1134 transition: left 0.25s;
1135 }
1136
1137 .content-area {
1138 width: 100%;
1139 position: absolute;
1140 top: 0;
1141 right: -100%;
1142 opacity: 0;
1143 visibility: hidden;
1144 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1145
1146 .toggle-mode {
1147 display: inline-block;
1148 float: left;
1149 width: 70px;
1150 height: 50px;
1151 line-height: 50px;
1152 box-sizing: border-box;
1153 border-right: 1px solid #e3e3e3;
1154 border-bottom: 1px solid #e3e3e3;
1155 }
1156
1157 .header {
1158 display: inline-block;
1159 width: ~"calc(100% - 70px)";
1160 }
1161 }
1162
1163 &.show-content-area {
1164 .control-area {
1165 left: -100%;
1166 opacity: 0;
1167 visibility: hidden;
1168 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1169 }
1170
1171 .content-area {
1172 right: 0;
1173 opacity: 1;
1174 visibility: visible;
1175 transition: right 0.25s;
1176 }
1177 }
1178 }
99c7f0a7
RW
1179}
1180
6f96c063
RW
1181@message-drawer-width: 320px;
1182
1183.message-drawer {
1184 position: fixed;
1185 top: 0;
1186 height: 100%;
1187 right: 0;
1188 width: @message-drawer-width;
1189 z-index: 999;
1190 background-color: @white;
1191 box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
1192 display: flex;
1193 flex-direction: column;
1194
1195 @media (min-width: 980px) {
1196 .drawer-top {
1197 display: none;
1198 }
1199 height: ~"calc(100% - 42px)";
1200 top: 42px;
1201 }
1202
1203 .transition(all .2s ease-in-out);
1204
1205 &.hidden {
1206 display: block;
1207 right: @message-drawer-width * -1;
1208 }
1209
1210 .header-container {
1211 flex-shrink: 0;
1212 }
1213
1214 .searchinput {
1215 box-shadow: none;
1216 width: 100%;
1217 }
1218
1219 [data-region="confirm-dialogue-container"] {
1220 box-sizing: border-box;
1221 * {
1222 box-sizing: border-box;
1223 }
1224 .btn-block {
1225 margin-left: 0;
1226 }
1227 }
1228
1229 .body-container {
1230 flex: 1;
1231 overflow: hidden;
1232
1233 & > * {
1234 position: absolute;
1235 right: 0;
1236 left: 0;
1237 top: 0;
1238 bottom: 0;
6f96c063
RW
1239 }
1240 }
1241
1242 .footer-container {
1243 flex-shrink: 0;
1244 overflow-x: hidden;
6f96c063
RW
1245 }
1246
1247 .matchtext {
1248 background-color: lighten(@blue, 40%);
1249 color: @textColor;
1250 height: 1.5rem;
1251 }
1252
1253 .contact-status {
1254 position: absolute;
1255 left: 39px;
1256 top: 39px;
1257 width: 10px;
1258 height: 10px;
1259 border-radius: 50%;
1260 &.online {
1261 border: 1px solid @green;
1262 background-color: @green;
1263 }
1264 }
1265
1266 a,
1267 .btn-link {
1268 text-decoration: none;
1269 color: inherit;
1270 }
1271
1272 .message {
1273 p {
1274 margin: 0;
1275 }
1276 }
1277
1278 .clickable {
1279 cursor: pointer;
1280
1281 &:hover {
1282 box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, .1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03);
1283 }
1284 }
1285
1286 h6,
1287 .h6 {
1288 font-size: 14px;
1289 font-weight: normal;
1290 }
1291
eae1a1ed 1292 .accordion-group {
6f96c063 1293 .collapsed-icon-container {
eae1a1ed 1294 display: inline-block;
6f96c063
RW
1295 }
1296 .expanded-icon-container {
eae1a1ed 1297 display: none;
6f96c063
RW
1298 }
1299
eae1a1ed 1300 &.expanded {
6f96c063 1301 .collapsed-icon-container {
eae1a1ed 1302 display: none;
6f96c063
RW
1303 }
1304 .expanded-icon-container {
eae1a1ed 1305 display: inline-block;
6f96c063
RW
1306 }
1307 }
1308 }
1309
1310 .view-overview-body {
1311 .section {
1312 display: block;
1313
1314 &.expanded {
1315 display: flex;
1316 flex-direction: column;
1317 }
1318 }
1319 }
eae1a1ed
BB
1320 .onepix {
1321 height: 1px;
1322 width: 1px;
1323 position: absolute;
1324 }
6f96c063
RW
1325
1326 .view-conversation {
1327 .content-message-container {
1328 img {
1329 max-width: 100%;
1330 }
1331 }
1332 }
1333}
1334
99c7f0a7
RW
1335@media (max-width: 480px) {
1336 .messaging-area-container {
1337 .messaging-area {
1338 .messages-area {
1339 &.editing {
1340 .messages-header {
1341 height: 80px;
1342
1343 .delete-all {
1344 top: 30px;
1345 }
1346
1347 .actions {
1348 top: 30px;
1349 }
1350 }
1351
1352 .messages {
1353 height: 470px;
1354 }
1355 }
1356 }
1357 }
1358 }
1359}