1e500b71d88c31f4d0eb17147cceba4ddc95cb5a
[moodle.git] / theme / bootstrapbase / less / moodle / message.less
1 /** The message area **/
2 .setSelectedContact() {
3     background-color: #4f94cd;
4     color: #fff;
5     border: none;
7     .information {
8         .lastmessage {
9             color: #fff;
10         }
11     }
12     .picture {
13         border: none;
14     }
15 }
17 .messaging-area-container {
18     margin-bottom: 30px;
20     .status {
21         .online-text {
22             display: none;
23             color: #7d7;
24         }
26         .offline-text {
27             color: #ff6961;
28         }
30         &.online {
31             .online-text {
32                 display: inherit;
33             }
34             .offline-text {
35                 display: none;
36             }
37         }
38     }
40     a,
41     .btn.btn-link {
42         color: #4f94cd;
43     }
45     .messaging-area {
46         border: 1px solid #e3e3e3;
47         clear: both;
48         border-radius: 4px;
50         img {
51             max-width: 100%;
52         }
54         .contacts-area {
55             border-right: 1px solid #e3e3e3;
56             height: 600px;
57             @media (max-height: 670px) {
58                 height: 500px;
59             }
60             width: 280px;
61             display: inline-block;
62             box-sizing: border-box;
64             &.searchfilter {
66                 .searchtextarea {
67                     height: 80px;
68                 }
70                 .searcharea {
71                     height: 470px;
72                 }
73             }
75             .searchtextarea {
76                 padding: 5px;
77                 text-align: center;
78                 height: 50px;
79                 box-sizing: border-box;
80                 line-height: 50px;
81                 background-color: #fff;
82                 transition: background-color linear 0.2s;
84                 input {
85                     background-color: #f5f5f5;
86                     border: 0;
87                     width: 90%;
88                     box-shadow: none;
89                     transition: background-color linear 0.2s;
91                     &:focus {
92                         box-shadow: none;
93                     }
94                 }
96                 &.searching {
97                     background-color: #f5f5f5;
98                     transition: background-color linear 0.2s;
100                     input {
101                         background-color: #fff;
102                         transition: background-color linear 0.2s;
103                     }
104                 }
106                 .searchfilterarea {
107                     line-height: 20px;
108                     cursor: pointer;
110                     .searchfilter {
111                         float: left;
112                     }
114                     .searchfilterdelete {
115                         float: left;
116                         margin-left: 5px;
117                     }
118                 }
119             }
121             .searcharea {
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                 }
131                 .course {
132                     text-align: center;
134                     &:hover {
135                         background-color: #4f94cd;
136                         color: #fff;
137                         border: none;
138                         cursor: pointer;
139                     }
140                 }
142                 .noresults {
143                     padding-top: 20px;
144                     text-align: center;
145                 }
146             }
148             .contacts {
149                 height: 500px;
150                 @media (max-height: 670px) {
151                     height: 400px;
152                 }
153                 overflow-y: auto;
154                 -webkit-overflow-scrolling: touch;
156                 .nocontacts {
157                     padding-top: 20px;
158                     text-align: center;
159                 }
161                 .contact {
162                     height: 66px;
163                     cursor: pointer;
164                     border-bottom: 1px solid #e3e3e3;
165                     box-sizing: border-box;
167                     &.unread {
168                         background-color: #f1f1f1;
170                         .picture {
171                             border-color: #f1f1f1;
172                         }
174                         .information {
175                             width: 60%;
176                         }
178                         .unread-count-container {
179                             display: inline-block;
180                             width: 15%;
181                             float: left;
182                         }
183                     }
185                     &:hover {
186                         .setSelectedContact();
187                         background-color: #79b5e6;
188                     }
190                     &.selected {
191                         .setSelectedContact();
192                     }
194                     .picture {
195                         line-height: 66px;
196                         text-align: center;
197                         height: 66px;
198                         border-bottom: 1px solid #fff;
199                         width: 25%;
200                         float: left;
201                         display: inline-block;
202                         box-sizing: border-box;
204                         img {
205                             border-radius: 50%;
206                             height: 54px;
207                         }
208                     }
210                     .information {
211                         padding: 6px 0;
212                         height: 66px;
213                         width: 75%;
214                         float: left;
215                         display: inline-block;
216                         box-sizing: border-box;
218                         .name {
219                             font-weight: bold;
221                             img {
222                                 vertical-align: baseline;
223                             }
224                         }
226                         .lastmessage {
227                             word-wrap: break-word;
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;
236                         }
237                     }
239                     .unread-count-container {
240                         display: none;
241                         line-height: 66px;
242                         text-align: center;
243                         box-sizing: border-box;
244                     }
245                 }
246             }
248             .setSelectedTab() {
249                 color: #4f94cd;
250             }
252             .tabs {
253                 border-top: 1px solid #e3e3e3;
254                 height: 50px;
255                 box-sizing: border-box;
257                 .tab {
258                     cursor: pointer;
259                     height: 100%;
260                     background-color: #f5f5f5;
261                     margin: 0;
262                     width: 50%;
263                     text-align: center;
264                     float: left;
266                     &:hover {
267                         .setSelectedTab();
268                     }
270                     .tabimage {
271                         height: 30px;
272                         line-height: 30px;
274                         img {
275                             height: 20px;
276                         }
277                     }
278                 }
280                 .tab.selected {
281                     .setSelectedTab();
282                 }
283             }
284         }
286         .messages-area {
287             width: ~"calc(100% - 280px)";
288             height: 600px;
289             @media (max-height: 670px) {
290                 height: 500px;
291             }
292             box-sizing: border-box;
293             margin: 0;
294             position: relative;
295             float: right;
297             .btn-container {
298                 position: absolute;
299                 top: 0;
300                 left: 0;
301                 padding-left: 15px;
302                 font-weight: normal;
304                 &.view-toggle {
305                     display: none;
306                 }
308                 &.delete-all {
309                     display: none;
310                 }
311             }
313             .profile-header {
314                 height: 50px;
315                 line-height: 50px;
316                 display: none;
318                 .btn-container {
319                     display: block;
321                     .btn-link {
322                         padding: 0;
323                         line-height: inherit;
324                     }
325                 }
326             }
328             .profile {
329                 padding: 30px;
330                 font-size: 16px;
331                 height: 600px;
332                 @media (max-height: 670px) {
333                     height: 500px;
334                 }
335                 box-sizing: border-box;
336                 overflow-y: auto;
337                 -webkit-overflow-scrolling: touch;
339                 .user-container {
340                     height: 100px;
342                     .profile-picture {
343                         border-radius: 50%;
344                         max-height: 100px;
345                         display: inline-block;
346                     }
348                     .name-container {
349                         display: inline-block;
350                         vertical-align: top;
351                         margin-top: 20px;
352                         margin-left: 10px;
354                         .name {
355                             font-weight: bold;
356                             display: block;
357                         }
359                         .status {
360                             display: block;
361                             font-size: 14px;
362                         }
363                     }
364                 }
366                 .information {
367                     margin: 0;
368                     display: inline-block;
369                     float: right;
370                     margin-top: 20px;
371                     font-size: 14px;
372                     list-style: none;
374                     .name {
375                         display: inline-block;
376                         font-weight: bold;
377                         text-align: right;
378                         margin-right: 10px;
379                     }
381                     .value {
382                         display: inline-block;
383                     }
384                 }
386                 .actions {
387                     padding-top: 80px;
389                     .separator {
390                         border-bottom: 1px solid #e3e3e3;
391                         margin-bottom: 20px;
392                         padding-bottom: 5px;
394                         a {
395                             &.danger {
396                                 color: #ff6961;
397                             }
398                         }
399                     }
400                 }
401             }
403             .messages-header {
404                 height: 50px;
405                 font-weight: bold;
406                 line-height: 50px;
407                 box-sizing: border-box;
408                 border-bottom: 1px solid #e3e3e3;
409                 text-align: center;
410                 position: relative;
412                 .btn-link {
413                     padding: 0;
414                     line-height: inherit;
415                 }
417                 .delete-instructions {
418                     display: none;
419                 }
421                 .name-container {
422                     padding-top: 9px;
423                     display: inline-block;
425                     .name {
426                         line-height: 20px;
427                     }
429                     .status {
430                         line-height: 12px;
431                         font-size: 12px;
432                         font-weight: normal;
433                     }
434                 }
436                 .actions {
437                     position: absolute;
438                     top: 0;
439                     right: 0;
440                     padding-right: 15px;
441                     font-weight: normal;
443                     .cancel-messages-delete {
444                         display: none;
445                     }
446                 }
447             }
449             .messages {
450                 height: 500px;
451                 @media (max-height: 670px) {
452                     height: 400px;
453                 }
454                 overflow-y: auto;
455                 overflow-x: hidden;
456                 -webkit-overflow-scrolling: touch;
457                 box-sizing: border-box;
458                 padding: 20px;
460                 .blocktime {
461                     clear: both;
462                     text-align: center;
463                     color: #a1a1a1;
464                     font-size: 12px;
465                     margin: 5px 0;
466                 }
468                 .message {
470                     .deletemessagecheckbox {
471                         display: none;
472                         text-align: center;
473                         padding-top: 5px;
474                     }
476                     .content {
477                         border: 1px solid #e3e3e3;
478                         padding: 10px;
479                         margin-bottom: 5px;
480                         font-size: 12px;
481                         word-wrap: break-word;
482                         max-width: 55%;
483                         border-radius: 4px;
484                         position: relative;
486                         .text {
487                             display: block;
489                             p {
490                                 margin: 0;
491                             }
492                         }
494                         .timesent {
495                             font-size: 10px;
496                             color: #a1a1a1;
497                             float: right;
498                         }
499                     }
501                     .content.left {
502                         float: left;
503                     }
505                     .content.right {
506                         float: right;
507                     }
508                 }
509             }
511             .response {
512                 display: table;
513                 border-bottom-right-radius: 4px;
514                 padding: 10px 10px 9px;
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;
526                 .delete-confirmation {
527                     display: none;
529                     .btn.btn-link.confirm {
530                         border: 1px solid #4f94cd;
531                         border-radius: 4px;
533                         &:hover {
534                             background-color: #4f94cd;
535                             color: #fff;
536                             text-shadow: none;
537                         }
538                     }
539                 }
541                 .message-box {
542                     display: table-row;
544                     .message-text-container {
545                         display: table-cell;
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;
557                             &:focus {
558                                 box-shadow: none;
559                             }
560                         }
561                     }
563                     .send-button-container {
564                         display: table-cell;
565                         width: 1px;
566                     }
567                 }
569                 &.messaging {
570                     background-color: #f5f5f5;
571                     transition: background-color linear 0.2s;
573                     .message-box {
574                         .message-text-container {
575                             textarea {
576                                 background-color: #fff;
577                                 transition: background-color linear 0.2s;
578                             }
579                         }
580                     }
581                 }
582             }
584             &.editing {
585                 .messages-header {
586                     .btn-container {
587                         &.view-all {
588                             display: none;
589                         }
591                         &.delete-all {
592                             display: block;
593                         }
594                     }
596                     .delete-instructions {
597                         display: block;
598                     }
600                     .name-container {
601                         display: none;
602                     }
604                     .actions {
605                         .messages-delete {
606                             display: none;
607                         }
609                         .cancel-messages-delete {
610                             display: block;
611                         }
612                     }
613                 }
615                 .messages {
616                     .message {
617                         cursor: pointer;
619                         &[aria-checked="true"] {
620                             .content {
621                                 background-color: #4f94cd;
622                                 border-color: #4f94cd;
623                                 color: #fff;
625                                 .timesent {
626                                     color: #fff;
627                                 }
628                             }
629                         }
631                         &[aria-checked="false"] {
632                             .content {
633                                 &:hover {
634                                     background-color: #79b5e6;
635                                     color: #fff;
637                                     .timesent {
638                                         color: #fff;
639                                     }
640                                 }
641                             }
642                         }
643                     }
644                 }
646                 .response {
647                     .delete-confirmation {
648                         display: block;
649                     }
651                     .message-box {
652                         display: none;
653                     }
654                 }
655             }
656         }
657     }
660 .preferences-container {
661     .container-fluid {
662         padding: 0;
664         .span6 {
665             min-height: 20px;
666         }
667     }
668     .align-bottom {
669         vertical-align: bottom;
670     }
671     .preference-table {
672         border: 1px solid #ddd;
674         thead {
675             th {
676                 text-align: center;
678                 .config-warning {
679                     display: none;
680                 }
682                 &.unconfigured {
683                     .config-warning {
684                         display: inline-block;
685                     }
686                 }
687             }
688         }
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 {
704             .hover-tooltip-container {
705                 display: inline-block;
706             }
708             .preference-name {
709                 vertical-align: middle;
710             }
711             .disabled-message {
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;
722                 input[type="checkbox"]:checked + .preference-state-status-container {
723                     background-color: #5cb85c;
725                     .on-text {
726                         display: inline-block;
727                     }
728                     .off-text {
729                         display: none;
730                     }
731                 }
732                 .preference-state-status-container {
733                     width: 30px;
734                     height: 30px;
735                     line-height: 30px;
736                     text-align: center;
737                     border-radius: 4px;
738                     background-color: #d9534f;
739                     color: #fff;
740                     cursor: pointer;
742                     .loading-icon {
743                         display: none;
744                     }
745                     .on-text {
746                         display: none;
747                     }
748                     .off-text {
749                         display: inline-block;
750                     }
751                 }
752                 &.loading {
753                     input[type="checkbox"]:checked + .preference-state-status-container {
754                         .on-text,
755                         .off-text {
756                             display: none;
757                         }
758                     }
760                     .preference-state-status-container {
761                         .on-text,
762                         .off-text {
763                             display: none;
764                         }
765                         .loading-icon {
766                             display: block;
767                         }
768                     }
769                 }
770             }
771             &.loading {
772                 .preference-name {
773                     .loading-icon {
774                         display: block;
775                     }
776                 }
777             }
778         }
779     }
782 .disabled-message {
783     display: none;
786 .disabled {
787     .disabled-message {
788         display: block;
790         + form {
791             display: none;
792         }
793     }
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     }
809 .processor-container {
810     position: relative;
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);
820         .vertical-align {
821             height: 100%;
822             width: 0%;
823             display: inline-block;
824             vertical-align: middle;
825         }
826     }
828     &.loading {
829         .loading-container {
830             display: block;
831         }
832     }
835 .preferences-page-container {
836     .checkbox-container {
837         margin: 30px 5px;
838         line-height: 20px;
840         input {
841             line-height: 20px;
842             margin: 0;
843         }
845         .loading-icon {
846             display: none;
847         }
849         &.loading {
850             .loading-icon {
851                 display: inline-block;
852             }
853         }
854     }
857 .notification-area {
858     height: 600px;
859     @media (max-height: 670px) {
860         height: 500px;
861     }
862     box-sizing: border-box;
863     border-radius: 4px;
864     margin-bottom: 30px;
865     border: 1px solid #e3e3e3;
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;
876         .content {
877             position: relative;
879             .content-item-container {
880                 cursor: pointer;
881             }
883             &:empty + .empty-text {
884                 display: block;
885             }
886         }
888         .loading-icon {
889             display: none;
890         }
892         .empty-text {
893             display: none;
894             text-align: center;
895             padding-top: 20px;
896         }
898         &.loading {
899             .loading-icon {
900                 display: block;
901                 text-align: center;
902                 box-sizing: border-box;
903                 padding: 5px;
904             }
906             .content:empty + .empty-text {
907                 display: none;
908             }
909         }
910     }
912     .content-area {
913         box-sizing: border-box;
914         display: inline-block;
915         width: ~"calc(100% - 300px)";
916         float: right;
918         .toggle-mode {
919             display: none;
920         }
922         .header {
923             height: 50px;
924             box-sizing: border-box;
925             border-bottom: 1px solid #e3e3e3;
926             padding: 5px;
928             .image-container {
929                 display: inline-block;
930                 height: 25px;
931                 width: 24px;
932                 float: left;
933             }
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             }
946             .timestamp {
947                 font-size: 10px;
948                 line-height: 10px;
949                 margin: 0;
950                 color: #666;
951                 margin-left: 30px;
952             }
954             &:empty {
955                 display: none;
956             }
957         }
959         > .content {
960             height: 500px;
961             @media (max-height: 670px) {
962                 height: 400px;
963             }
964             box-sizing: border-box;
965             overflow: auto;
966             -webkit-overflow-scrolling: touch;
967             padding: 15px;
969             &:empty {
970                 display: none;
972                 & + .empty-text {
973                     display: block;
974                     text-align: center;
975                     padding-top: 100px;
976                 }
977             }
978         }
980         .empty-text {
981             display: none;
982         }
984         .footer {
985             height: 50px;
986             box-sizing: border-box;
987             text-align: center;
989             a {
990                 line-height: 50px;
991             }
993             &:empty {
994                 display: none;
995             }
996         }
997     }
1000 @media (max-width: 979px) {
1001     .messaging-area-container {
1002         .messaging-area {
1003             position: relative;
1004             overflow: hidden;
1005             height: 600px;
1006             @media (max-height: 670px) {
1007                 height: 500px;
1008             }
1010             .messages-area {
1011                 .messages-header {
1012                     .btn-container {
1013                         &.view-toggle {
1014                             display: block;
1015                         }
1017                         &.delete-all {
1018                             display: none;
1019                         }
1020                     }
1021                 }
1023                 .profile-header {
1024                     display: block;
1025                 }
1027                 .profile {
1028                     height: 550px;
1029                 }
1031                 &.editing {
1032                     .messages-header {
1033                         .btn-container {
1034                             &.view-toggle {
1035                                 display: none;
1036                             }
1038                             &.delete-all {
1039                                 display: block;
1040                             }
1041                         }
1042                     }
1043                 }
1044             }
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             }
1056             .messages-area {
1057                 width: 100%;
1058                 position: absolute;
1059                 top: 0;
1060                 left: auto;
1061                 right: 0;
1062                 bottom: auto;
1063             }
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                 }
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             }
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;
1088                     .contact {
1089                         &.selected {
1090                             background-color: inherit;
1091                             color: inherit;
1092                             border-bottom: 1px solid #e3e3e3;
1094                             &:hover {
1095                                 .setSelectedContact();
1096                                 background-color: #79b5e6;
1097                             }
1099                             .picture {
1100                                 border-bottom: 1px solid #fff;
1101                             }
1103                             .information {
1104                                 .lastmessage {
1105                                     color: #a1a1a1;
1106                                 }
1107                             }
1108                         }
1109                     }
1110                 }
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     }
1122     .notification-area {
1123         position: relative;
1124         overflow: hidden;
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         }
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;
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             }
1157             .header {
1158                 display: inline-block;
1159                 width: ~"calc(100% - 70px)";
1160             }
1161         }
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             }
1171             .content-area {
1172                 right: 0;
1173                 opacity: 1;
1174                 visibility: visible;
1175                 transition: right 0.25s;
1176             }
1177         }
1178     }
1181 @message-drawer-width: 320px;
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;
1195     @media (min-width: 980px) {
1196         .drawer-top {
1197             display: none;
1198         }
1199         height: ~"calc(100% - 42px)";
1200         top: 42px;
1201     }
1203     .transition(all .2s ease-in-out);
1205     &.hidden {
1206         display: block;
1207         right: @message-drawer-width * -1;
1208     }
1210     .header-container {
1211         flex-shrink: 0;
1212     }
1214     .searchinput {
1215         box-shadow: none;
1216         width: 100%;
1217     }
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     }
1229     .body-container {
1230         flex: 1;
1231         overflow: hidden;
1233         & > * {
1234             position: absolute;
1235             right: 0;
1236             left: 0;
1237             top: 0;
1238             bottom: 0;
1239         }
1240     }
1242     .footer-container {
1243         flex-shrink: 0;
1244         overflow-x: hidden;
1245     }
1247     .matchtext {
1248         background-color: lighten(@blue, 40%);
1249         color: @textColor;
1250         height: 1.5rem;
1251     }
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     }
1266     a,
1267     .btn-link {
1268         text-decoration: none;
1269         color: inherit;
1270     }
1272     .message {
1273         p {
1274             margin: 0;
1275         }
1276     }
1278     .clickable {
1279         cursor: pointer;
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     }
1286     h6,
1287     .h6 {
1288         font-size: 14px;
1289         font-weight: normal;
1290     }
1292     .overview-section-toggle {
1293         .collapsed-icon-container {
1294             display: none;
1295         }
1296         .expanded-icon-container {
1297             display: inline-block;
1298         }
1300         &.collapsed {
1301             .collapsed-icon-container {
1302                 display: inline-block;
1303             }
1304             .expanded-icon-container {
1305                 display: none;
1306             }
1307         }
1308     }
1310     .view-overview-body {
1311         .section {
1312             display: block;
1314             &.expanded {
1315                 display: flex;
1316                 flex-direction: column;
1317             }
1318         }
1319     }
1321     .view-conversation {
1322         .content-message-container {
1323             img {
1324                 max-width: 100%;
1325             }
1326         }
1327     }
1330 @media (max-width: 480px) {
1331     .messaging-area-container {
1332         .messaging-area {
1333             .messages-area {
1334                 &.editing {
1335                     .messages-header {
1336                         height: 80px;
1338                         .delete-all {
1339                             top: 30px;
1340                         }
1342                         .actions {
1343                             top: 30px;
1344                         }
1345                     }
1347                     .messages {
1348                         height: 470px;
1349                     }
1350                 }
1351             }
1352         }
1353     }