e50530093e91d1185330672cc9bc6a5d21f32c80
[moodle.git] / theme / boost / scss / moodle / message.scss
1 /** The message area **/
2 @mixin 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 .hidden {
18     display: none;
19 }
21 .messaging-area-container {
22     margin-bottom: 30px;
24     .status {
25         .online-text {
26             display: none;
27             color: #7d7;
28         }
30         .offline-text {
31             color: #ff6961;
32         }
34         &.online {
35             .online-text {
36                 display: block;
37             }
38             .offline-text {
39                 display: none;
40             }
41         }
42     }
44     a,
45     .btn.btn-link {
46         color: #4f94cd;
47     }
49     .messaging-area {
50         border: 1px solid #e3e3e3;
51         clear: both;
53         img {
54             max-width: 100%;
55         }
57         .contacts-area {
58             border-right: 1px solid #e3e3e3;
59             height: 600px;
60             @media (max-height: 670px) {
61                 height: 500px;
62             }
63             width: 280px;
64             display: inline-block;
65             box-sizing: border-box;
67             &.searchfilter {
69                 .searchtextarea {
70                     height: 80px;
71                 }
73                 .searcharea {
74                     height: 470px;
75                 }
76             }
78             .searchtextarea {
79                 padding: 5px;
80                 text-align: center;
81                 height: 50px;
82                 box-sizing: border-box;
83                 line-height: 50px;
84                 background-color: #fff;
85                 transition: background-color linear 0.2s;
87                 input {
88                     height: 28px;
89                     line-height: 20px;
90                     margin-bottom: 10px;
91                     vertical-align: middle;
92                     padding: 4px 6px;
93                     background-color: #f5f5f5;
94                     border: 0;
95                     width: 90%;
96                     box-shadow: none;
97                     transition: background-color linear 0.2s;
99                     &:focus {
100                         box-shadow: none;
101                     }
102                 }
104                 &.searching {
105                     background-color: #f5f5f5;
106                     transition: background-color linear 0.2s;
108                     input {
109                         background-color: #fff;
110                         transition: background-color linear 0.2s;
111                     }
112                 }
114                 .searchfilterarea {
115                     line-height: 20px;
116                     cursor: pointer;
118                     .searchfilter {
119                         float: left;
120                     }
122                     .searchfilterdelete {
123                         float: left;
124                         margin-left: 5px;
125                     }
126                 }
127             }
129             .searcharea {
131                 .heading {
132                     text-align: center;
133                     border-top: 1px solid black;
134                     border-bottom: 1px solid black;
135                     font-size: 14px;
136                     font-weight: bold;
137                 }
139                 .course {
140                     text-align: center;
142                     &:hover {
143                         background-color: #4f94cd;
144                         color: #fff;
145                         border: none;
146                         cursor: pointer;
147                     }
148                 }
150                 .noresults {
151                     padding-top: 20px;
152                     text-align: center;
153                 }
154             }
156             .contacts {
157                 height: 500px;
158                 @media (max-height: 670px) {
159                     height: 400px;
160                 }
161                 overflow-y: auto;
162                 -webkit-overflow-scrolling: touch;
164                 .nocontacts {
165                     padding-top: 20px;
166                     text-align: center;
167                 }
169                 .contact {
170                     height: 66px;
171                     cursor: pointer;
172                     border-bottom: 1px solid #e3e3e3;
173                     box-sizing: border-box;
175                     &.unread {
176                         background-color: #f1f1f1;
178                         .picture {
179                             border-color: #f1f1f1;
180                         }
182                         .information {
183                             width: 60%;
184                         }
186                         .unread-count-container {
187                             display: inline-block;
188                             width: 15%;
189                             float: left;
190                         }
191                     }
193                     &:hover {
194                         @include setSelectedContact();
195                         background-color: #79b5e6;
196                     }
198                     &.selected {
199                         @include setSelectedContact();
200                     }
202                     .picture {
203                         line-height: 66px;
204                         text-align: center;
205                         height: 66px;
206                         border-bottom: 1px solid #fff;
207                         width: 25%;
208                         float: left;
209                         display: inline-block;
210                         box-sizing: border-box;
212                         img {
213                             border-radius: 50%;
214                             height: 54px;
215                         }
216                     }
218                     .information {
219                         padding: 6px 0;
220                         height: 66px;
221                         width: 75%;
222                         float: left;
223                         display: inline-block;
224                         box-sizing: border-box;
226                         .name {
227                             font-weight: bold;
229                             img {
230                                 vertical-align: baseline;
231                             }
232                         }
234                         .lastmessage {
235                             word-wrap: break-word;
236                             margin: 0;
237                             height: 40px;
238                             line-height: 17px;
239                             overflow: hidden;
240                             text-overflow: ellipsis;
241                             white-space: nowrap;
242                             color: #a1a1a1;
243                             padding-right: 10px;
244                         }
245                     }
247                     .unread-count-container {
248                         display: none;
249                         line-height: 66px;
250                         text-align: center;
251                         box-sizing: border-box;
252                     }
253                 }
254             }
256             @mixin setSelectedTab() {
257                 color: #4f94cd;
258             }
260             .tabs {
261                 border-top: 1px solid #e3e3e3;
262                 height: 50px;
263                 box-sizing: border-box;
265                 .tab {
266                     cursor: pointer;
267                     height: 100%;
268                     background-color: #f5f5f5;
269                     margin: 0;
270                     width: 50%;
271                     text-align: center;
272                     float: left;
274                     &:hover {
275                         @include setSelectedTab();
276                     }
278                     .tabimage {
279                         height: 30px;
280                         line-height: 30px;
282                         img {
283                             height: 20px;
284                         }
285                     }
286                 }
288                 .tab.selected {
289                     @include setSelectedTab();
290                 }
291             }
292         }
294         .messages-area {
295             width: calc(100% - 280px);
296             height: 600px;
297             @media (max-height: 670px) {
298                 height: 500px;
299             }
300             box-sizing: border-box;
301             margin: 0;
302             position: relative;
303             float: right;
305             .btn-container {
306                 position: absolute;
307                 top: 0;
308                 left: 0;
309                 padding-left: 15px;
310                 font-weight: normal;
312                 &.view-toggle {
313                     display: none;
314                 }
316                 &.delete-all {
317                     display: none;
318                 }
319             }
321             .profile-header {
322                 height: 50px;
323                 line-height: 50px;
324                 display: none;
326                 .btn-container {
327                     display: block;
329                     .btn-link {
330                         padding: 0;
331                         line-height: inherit;
332                     }
333                 }
334             }
336             .profile {
337                 padding: 30px;
338                 font-size: 16px;
339                 height: 600px;
340                 @media (max-height: 670px) {
341                     height: 500px;
342                 }
343                 box-sizing: border-box;
344                 overflow-y: auto;
345                 -webkit-overflow-scrolling: touch;
347                 .user-container {
348                     height: 100px;
350                     .profile-picture {
351                         border-radius: 50%;
352                         max-height: 100px;
353                         display: inline-block;
354                     }
356                     .name-container {
357                         display: inline-block;
358                         vertical-align: top;
359                         margin-top: 20px;
360                         margin-left: 10px;
362                         .name {
363                             font-weight: bold;
364                             display: block;
365                         }
367                         .status {
368                             display: block;
369                             font-size: 14px;
370                         }
371                     }
372                 }
374                 .information {
375                     margin: 0;
376                     display: inline-block;
377                     float: right;
378                     margin-top: 20px;
379                     font-size: 14px;
380                     list-style: none;
382                     .name {
383                         display: inline-block;
384                         font-weight: bold;
385                         text-align: right;
386                         margin-right: 10px;
387                     }
389                     .value {
390                         display: inline-block;
391                     }
392                 }
394                 .actions {
395                     padding-top: 80px;
397                     .separator {
398                         border-bottom: 1px solid #e3e3e3;
399                         margin-bottom: 20px;
400                         padding-bottom: 5px;
402                         a {
403                             &.danger {
404                                 color: #ff6961;
405                             }
406                         }
407                     }
408                 }
409             }
411             .messages-header {
412                 height: 50px;
413                 font-weight: bold;
414                 line-height: 50px;
415                 box-sizing: border-box;
416                 border-bottom: 1px solid #e3e3e3;
417                 text-align: center;
418                 position: relative;
420                 .btn-link {
421                     padding: 0;
422                     line-height: inherit;
423                 }
425                 .delete-instructions {
426                     display: none;
427                 }
429                 .name-container {
430                     padding-top: 9px;
431                     display: inline-block;
433                     .name {
434                         line-height: 20px;
435                     }
437                     .status {
438                         line-height: 12px;
439                         font-size: 12px;
440                         font-weight: normal;
441                     }
442                 }
444                 .actions {
445                     position: absolute;
446                     top: 0;
447                     right: 0;
448                     padding-right: 15px;
449                     font-weight: normal;
451                     .cancel-messages-delete {
452                         display: none;
453                     }
454                 }
455             }
457             .messages {
458                 height: 500px;
459                 @media (max-height: 670px) {
460                     height: 400px;
461                 }
462                 overflow-y: auto;
463                 overflow-x: hidden;
464                 -webkit-overflow-scrolling: touch;
465                 box-sizing: border-box;
466                 padding: 20px;
468                 .blocktime {
469                     clear: both;
470                     text-align: center;
471                     color: #a1a1a1;
472                     font-size: 12px;
473                     margin: 5px 0;
474                 }
476                 .message {
478                     .deletemessagecheckbox {
479                         display: none;
480                         text-align: center;
481                         padding-top: 5px;
482                     }
484                     .content {
485                         border: 1px solid #e3e3e3;
486                         padding: 10px;
487                         margin-bottom: 5px;
488                         font-size: 12px;
489                         word-wrap: break-word;
490                         max-width: 55%;
491                         position: relative;
493                         .text {
494                             display: block;
496                             p {
497                                 margin: 0;
498                             }
499                         }
501                         .timesent {
502                             font-size: 10px;
503                             color: #a1a1a1;
504                             float: right;
505                         }
506                     }
508                     .content.left {
509                         float: left;
510                     }
512                     .content.right {
513                         float: right;
514                     }
515                 }
516             }
518             .response {
519                 display: table;
520                 padding: 10px 10px 9px;
521                 position: absolute;
522                 bottom: 0;
523                 left: 0;
524                 width: 100%;
525                 line-height: 28px;
526                 text-align: center;
527                 border-top: 1px solid #e3e3e3;
528                 box-sizing: border-box;
529                 background-color: #fff;
530                 transition: background-color linear 0.2s;
532                 .delete-confirmation {
533                     display: none;
535                     .btn.btn-link.confirm {
536                         border: 1px solid #4f94cd;
537                         height: 30px;
539                         &:hover {
540                             background-color: #4f94cd;
541                             color: #fff;
542                             text-shadow: none;
543                         }
544                     }
545                 }
547                 .message-box {
548                     display: table-row;
550                     .message-text-container {
551                         display: table-cell;
553                         textarea {
554                             line-height: 20px;
555                             padding: 4px 6px;
556                             vertical-align: middle;
557                             width: 100%;
558                             margin: 0;
559                             resize: none;
560                             border: none;
561                             box-shadow: none;
562                             box-sizing: border-box;
563                             background-color: #f5f5f5;
564                             transition: background-color linear 0.2s;
566                             &:focus {
567                                 box-shadow: none;
568                             }
569                         }
570                     }
572                     .send-button-container {
573                         display: table-cell;
574                         width: 1px;
576                         button {
577                             height: 30px;
578                         }
579                     }
580                 }
582                 &.messaging {
583                     background-color: #f5f5f5;
584                     transition: background-color linear 0.2s;
586                     .message-box {
587                         .message-text-container {
588                             textarea {
589                                 background-color: #fff;
590                                 transition: background-color linear 0.2s;
591                             }
592                         }
593                     }
594                 }
595             }
597             &.editing {
598                 .messages-header {
599                     .btn-container {
600                         &.view-all {
601                             display: none;
602                         }
604                         &.delete-all {
605                             display: block;
606                         }
607                     }
609                     .delete-instructions {
610                         display: block;
611                     }
613                     .name-container {
614                         display: none;
615                     }
617                     .actions {
618                         .messages-delete {
619                             display: none;
620                         }
622                         .cancel-messages-delete {
623                             display: block;
624                         }
625                     }
626                 }
628                 .messages {
629                     .message {
630                         cursor: pointer;
632                         &[aria-checked="true"] {
633                             .content {
634                                 background-color: #4f94cd;
635                                 border-color: #4f94cd;
636                                 color: #fff;
638                                 .timesent {
639                                     color: #fff;
640                                 }
641                             }
642                         }
644                         &[aria-checked="false"] {
645                             .content {
646                                 &:hover {
647                                     background-color: #79b5e6;
648                                     color: #fff;
650                                     .timesent {
651                                         color: #fff;
652                                     }
653                                 }
654                             }
655                         }
656                     }
657                 }
659                 .response {
660                     .delete-confirmation {
661                         display: block;
662                     }
664                     .message-box {
665                         display: none;
666                     }
667                 }
668             }
669         }
670     }
673 .preferences-container {
674     .container-fluid {
675         padding: 0;
677         .span6 {
678             min-height: 20px;
679         }
680     }
681     .align-bottom {
682         vertical-align: bottom;
683     }
684     .preference-table {
685         border: 1px solid #ddd;
687         thead {
688             th {
689                 text-align: center;
691                 .config-warning {
692                     display: none;
693                 }
695                 &.unconfigured {
696                     .config-warning {
697                         display: inline-block;
698                     }
699                 }
700             }
701         }
702         tr {
703             td {
704                 &:not(:first-child) {
705                     width: 150px;
706                     text-align: center;
707                 }
708                 &:nth-child(even) {
709                     background-color: #f7f7f7;
710                 }
711             }
712             th:nth-child(even) {
713                 background-color: #f7f7f7;
714             }
715         }
716         .preference-row {
717             .hover-tooltip-container {
718                 display: inline-block;
719             }
721             .preference-name {
722                 vertical-align: middle;
723             }
724             .disabled-message {
725                 text-align: center;
726                 height: 30px;
727                 line-height: 30px;
728             }
729             .preference-state {
730                 margin: 0;
731                 padding: 0;
732                 display: inline-block;
733                 vertical-align: middle;
735                 input[type="checkbox"]:checked + .preference-state-status-container {
736                     background-color: #5cb85c;
738                     .on-text {
739                         display: inline-block;
740                     }
741                     .off-text {
742                         display: none;
743                     }
744                 }
745                 .preference-state-status-container {
746                     width: 30px;
747                     height: 30px;
748                     line-height: 30px;
749                     text-align: center;
750                     border-radius: 4px;
751                     background-color: #d9534f;
752                     color: #fff;
753                     cursor: pointer;
755                     .loading-icon {
756                         display: none;
757                     }
758                     .on-text {
759                         display: none;
760                     }
761                     .off-text {
762                         display: inline-block;
763                     }
764                 }
765                 &.loading {
766                     input[type="checkbox"]:checked + .preference-state-status-container {
767                         .on-text,
768                         .off-text {
769                             display: none;
770                         }
771                     }
773                     .preference-state-status-container {
774                         .on-text,
775                         .off-text {
776                             display: none;
777                         }
778                         .loading-icon {
779                             display: block;
780                         }
781                     }
782                 }
783             }
784             &.loading {
785                 .preference-name {
786                     .loading-icon {
787                         display: block;
788                     }
789                 }
790             }
791         }
792     }
795 .disabled-message {
796     display: none;
799 .disabled {
800     .disabled-message {
801         display: block;
803         + form {
804             display: none;
805         }
806     }
809 .general-settings-container {
810     .loading-icon {
811         display: none;
812     }
813     .loading {
814         .loading-icon {
815             display: inline-block;
816         }
817     }
818     label {
819         display: inline-block;
820     }
822 .processor-container {
823     position: relative;
825     .loading-container {
826         display: none;
827         position: absolute;
828         width: 100%;
829         height: 100%;
830         text-align: center;
831         background-color: rgba(255, 255, 255, 0.5);
833         .vertical-align {
834             height: 100%;
835             width: 0%;
836             display: inline-block;
837             vertical-align: middle;
838         }
839     }
841     &.loading {
842         .loading-container {
843             display: block;
844         }
845     }
848 .preferences-page-container {
849     .checkbox-container {
850         margin: 30px 5px;
851         line-height: 20px;
853         input {
854             line-height: 20px;
855             margin: 0;
856         }
858         .loading-icon {
859             display: none;
860         }
862         &.loading {
863             .loading-icon {
864                 display: inline-block;
865             }
866         }
867     }
870 .notification-area {
871     height: 600px;
872     @media (max-height: 670px) {
873         height: 500px;
874     }
875     box-sizing: border-box;
876     border-radius: 4px;
877     margin-bottom: 30px;
878     border: 1px solid #e3e3e3;
880     .control-area {
881         box-sizing: border-box;
882         display: inline-block;
883         width: 300px;
884         height: 100%;
885         overflow: auto;
886         -webkit-overflow-scrolling: touch;
887         border-right: 1px solid #e3e3e3;
889         .content {
890             position: relative;
892             .content-item-container {
893                 cursor: pointer;
894             }
896             &:empty + .empty-text {
897                 display: block;
898             }
899         }
901         .loading-icon {
902             display: none;
903         }
905         .empty-text {
906             display: none;
907             text-align: center;
908             padding-top: 20px;
909         }
911         &.loading {
912             .loading-icon {
913                 display: block;
914                 text-align: center;
915                 box-sizing: border-box;
916                 padding: 5px;
917             }
919             .content:empty + .empty-text {
920                 display: none;
921             }
922         }
923     }
925     .content-area {
926         box-sizing: border-box;
927         display: inline-block;
928         width: calc(100% - 300px);
929         float: right;
931         .toggle-mode {
932             display: none;
933         }
935         .header {
936             height: 50px;
937             box-sizing: border-box;
938             border-bottom: 1px solid #e3e3e3;
939             padding: 5px;
941             .image-container {
942                 display: inline-block;
943                 height: 25px;
944                 width: 24px;
945                 float: left;
946             }
948             .subject-container {
949                 display: inline-block;
950                 max-width: calc(100% - 24px);
951                 white-space: nowrap;
952                 overflow: hidden;
953                 text-overflow: ellipsis;
954                 height: 25px;
955                 padding-left: 5px;
956                 box-sizing: border-box;
957             }
959             .timestamp {
960                 font-size: 10px;
961                 line-height: 10px;
962                 margin: 0;
963                 color: #666;
964                 margin-left: 30px;
965             }
967             &:empty {
968                 display: none;
969             }
970         }
972         > .content {
973             height: 500px;
974             @media (max-height: 670px) {
975                 height: 400px;
976             }
977             box-sizing: border-box;
978             overflow: auto;
979             -webkit-overflow-scrolling: touch;
980             padding: 15px;
982             &:empty {
983                 display: none;
985                 & + .empty-text {
986                     display: block;
987                     text-align: center;
988                     padding-top: 100px;
989                 }
990             }
991         }
993         .empty-text {
994             display: none;
995         }
997         .footer {
998             height: 50px;
999             box-sizing: border-box;
1000             text-align: center;
1002             a {
1003                 line-height: 50px;
1004             }
1006             &:empty {
1007                 display: none;
1008             }
1009         }
1010     }
1013 @media (max-width: 979px) {
1014     .messaging-area-container {
1015         .messaging-area {
1016             position: relative;
1017             overflow: hidden;
1018             height: 600px;
1019             @media (max-height: 670px) {
1020                 height: 500px;
1021             }
1023             .messages-area {
1024                 .messages-header {
1025                     .btn-container {
1026                         &.view-toggle {
1027                             display: block;
1028                         }
1030                         &.delete-all {
1031                             display: none;
1032                         }
1033                     }
1034                 }
1036                 .profile-header {
1037                     display: block;
1038                 }
1040                 .profile {
1041                     height: 550px;
1042                 }
1044                 &.editing {
1045                     .messages-header {
1046                         .btn-container {
1047                             &.view-toggle {
1048                                 display: none;
1049                             }
1051                             &.delete-all {
1052                                 display: block;
1053                             }
1054                         }
1055                     }
1056                 }
1057             }
1059             .contacts-area {
1060                 width: 100%;
1061                 border-right: none;
1062                 position: absolute;
1063                 top: 0;
1064                 left: 0;
1065                 right: auto;
1066                 bottom: auto;
1067             }
1069             .messages-area {
1070                 width: 100%;
1071                 position: absolute;
1072                 top: 0;
1073                 left: auto;
1074                 right: 0;
1075                 bottom: auto;
1076             }
1078             &.show-messages {
1079                 .contacts-area {
1080                     left: -100%;
1081                     opacity: 0;
1082                     visibility: hidden;
1083                     transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1084                 }
1086                 .messages-area {
1087                     right: 0;
1088                     opacity: 1;
1089                     visibility: visible;
1090                     transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1091                 }
1092             }
1094             &.hide-messages {
1095                 .contacts-area {
1096                     left: 0;
1097                     opacity: 1;
1098                     visibility: visible;
1099                     transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1101                     .contact {
1102                         &.selected {
1103                             background-color: inherit;
1104                             color: inherit;
1105                             border-bottom: 1px solid #e3e3e3;
1107                             &:hover {
1108                                 @include setSelectedContact();
1109                                 background-color: #79b5e6;
1110                             }
1112                             .picture {
1113                                 border-bottom: 1px solid #fff;
1114                             }
1116                             .information {
1117                                 .lastmessage {
1118                                     color: #a1a1a1;
1119                                 }
1120                             }
1121                         }
1122                     }
1123                 }
1125                 .messages-area {
1126                     right: -100%;
1127                     opacity: 0;
1128                     visibility: hidden;
1129                     transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1130                 }
1131             }
1132         }
1133     }
1135     .notification-area {
1136         position: relative;
1137         overflow: hidden;
1139         .control-area {
1140             border-right: none;
1141             width: 100%;
1142             position: absolute;
1143             top: 0;
1144             left: 0;
1145             opacity: 1;
1146             visibility: visible;
1147             transition: left 0.25s;
1148         }
1150         .content-area {
1151             width: 100%;
1152             position: absolute;
1153             top: 0;
1154             right: -100%;
1155             opacity: 0;
1156             visibility: hidden;
1157             transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1159             .toggle-mode {
1160                 display: inline-block;
1161                 float: left;
1162                 width: 70px;
1163                 height: 50px;
1164                 line-height: 50px;
1165                 box-sizing: border-box;
1166                 border-right: 1px solid #e3e3e3;
1167                 border-bottom: 1px solid #e3e3e3;
1168             }
1170             .header {
1171                 display: inline-block;
1172                 width: calc(100% - 70px);
1173             }
1174         }
1176         &.show-content-area {
1177             .control-area {
1178                 left: -100%;
1179                 opacity: 0;
1180                 visibility: hidden;
1181                 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1182             }
1184             .content-area {
1185                 right: 0;
1186                 opacity: 1;
1187                 visibility: visible;
1188                 transition: right 0.25s;
1189             }
1190         }
1191     }
1194 @media (max-width: 480px) {
1195     .messaging-area-container {
1196         .messaging-area {
1197             .messages-area {
1198                 &.editing {
1199                     .messages-header {
1200                         height: 80px;
1202                         .delete-all {
1203                             top: 30px;
1204                         }
1206                         .actions {
1207                             top: 30px;
1208                         }
1209                     }
1211                     .messages {
1212                         height: 470px;
1213                     }
1214                 }
1215             }
1216         }
1217     }