1 /** The message area **/
2 .setSelectedContact() {
3 background-color: #4f94cd;
17 .messaging-area-container {
46 border: 1px solid #e3e3e3;
55 border-right: 1px solid #e3e3e3;
57 @media (max-height: 670px) {
61 display: inline-block;
62 box-sizing: border-box;
79 box-sizing: border-box;
81 background-color: #fff;
82 transition: background-color linear 0.2s;
85 background-color: #f5f5f5;
89 transition: background-color linear 0.2s;
97 background-color: #f5f5f5;
98 transition: background-color linear 0.2s;
101 background-color: #fff;
102 transition: background-color linear 0.2s;
114 .searchfilterdelete {
125 border-top: 1px solid black;
126 border-bottom: 1px solid black;
135 background-color: #4f94cd;
150 @media (max-height: 670px) {
154 -webkit-overflow-scrolling: touch;
164 border-bottom: 1px solid #e3e3e3;
165 box-sizing: border-box;
168 background-color: #f1f1f1;
171 border-color: #f1f1f1;
178 .unread-count-container {
179 display: inline-block;
186 .setSelectedContact();
187 background-color: #79b5e6;
191 .setSelectedContact();
198 border-bottom: 1px solid #fff;
201 display: inline-block;
202 box-sizing: border-box;
215 display: inline-block;
216 box-sizing: border-box;
222 vertical-align: baseline;
227 word-wrap: break-word;
232 text-overflow: ellipsis;
239 .unread-count-container {
243 box-sizing: border-box;
253 border-top: 1px solid #e3e3e3;
255 box-sizing: border-box;
260 background-color: #f5f5f5;
287 width: ~"calc(100% - 280px)";
289 @media (max-height: 670px) {
292 box-sizing: border-box;
323 line-height: inherit;
332 @media (max-height: 670px) {
335 box-sizing: border-box;
337 -webkit-overflow-scrolling: touch;
345 display: inline-block;
349 display: inline-block;
368 display: inline-block;
375 display: inline-block;
382 display: inline-block;
390 border-bottom: 1px solid #e3e3e3;
407 box-sizing: border-box;
408 border-bottom: 1px solid #e3e3e3;
414 line-height: inherit;
417 .delete-instructions {
423 display: inline-block;
443 .cancel-messages-delete {
451 @media (max-height: 670px) {
456 -webkit-overflow-scrolling: touch;
457 box-sizing: border-box;
470 .deletemessagecheckbox {
477 border: 1px solid #e3e3e3;
481 word-wrap: break-word;
513 border-bottom-right-radius: 4px;
514 padding: 10px 10px 9px;
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 {
529 .btn.btn-link.confirm {
530 border: 1px solid #4f94cd;
534 background-color: #4f94cd;
544 .message-text-container {
553 box-sizing: border-box;
554 background-color: #f5f5f5;
555 transition: background-color linear 0.2s;
563 .send-button-container {
570 background-color: #f5f5f5;
571 transition: background-color linear 0.2s;
574 .message-text-container {
576 background-color: #fff;
577 transition: background-color linear 0.2s;
596 .delete-instructions {
609 .cancel-messages-delete {
619 &[aria-checked="true"] {
621 background-color: #4f94cd;
622 border-color: #4f94cd;
631 &[aria-checked="false"] {
634 background-color: #79b5e6;
647 .delete-confirmation {
660 .preferences-container {
669 vertical-align: bottom;
672 border: 1px solid #ddd;
684 display: inline-block;
691 &:not(:first-child) {
696 background-color: #f7f7f7;
700 background-color: #f7f7f7;
704 .hover-tooltip-container {
705 display: inline-block;
709 vertical-align: middle;
719 display: inline-block;
720 vertical-align: middle;
722 input[type="checkbox"]:checked + .preference-state-status-container {
723 background-color: #5cb85c;
726 display: inline-block;
732 .preference-state-status-container {
738 background-color: #d9534f;
749 display: inline-block;
753 input[type="checkbox"]:checked + .preference-state-status-container {
760 .preference-state-status-container {
796 .general-settings-container {
802 display: inline-block;
806 display: inline-block;
809 .processor-container {
818 background-color: rgba(255, 255, 255, 0.5);
823 display: inline-block;
824 vertical-align: middle;
835 .preferences-page-container {
836 .checkbox-container {
851 display: inline-block;
859 @media (max-height: 670px) {
862 box-sizing: border-box;
865 border: 1px solid #e3e3e3;
868 box-sizing: border-box;
869 display: inline-block;
873 -webkit-overflow-scrolling: touch;
874 border-right: 1px solid #e3e3e3;
879 .content-item-container {
883 &:empty + .empty-text {
902 box-sizing: border-box;
906 .content:empty + .empty-text {
913 box-sizing: border-box;
914 display: inline-block;
915 width: ~"calc(100% - 300px)";
924 box-sizing: border-box;
925 border-bottom: 1px solid #e3e3e3;
929 display: inline-block;
936 display: inline-block;
937 max-width: ~"calc(100% - 24px)";
940 text-overflow: ellipsis;
943 box-sizing: border-box;
961 @media (max-height: 670px) {
964 box-sizing: border-box;
966 -webkit-overflow-scrolling: touch;
986 box-sizing: border-box;
1000 @media (max-width: 979px) {
1001 .messaging-area-container {
1006 @media (max-height: 670px) {
1070 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1076 visibility: visible;
1077 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1085 visibility: visible;
1086 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1090 background-color: inherit;
1092 border-bottom: 1px solid #e3e3e3;
1095 .setSelectedContact();
1096 background-color: #79b5e6;
1100 border-bottom: 1px solid #fff;
1116 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1122 .notification-area {
1133 visibility: visible;
1134 transition: left 0.25s;
1144 transition: right 0.25s, opacity 0.25s, visibility 0.25s;
1147 display: inline-block;
1152 box-sizing: border-box;
1153 border-right: 1px solid #e3e3e3;
1154 border-bottom: 1px solid #e3e3e3;
1158 display: inline-block;
1159 width: ~"calc(100% - 70px)";
1163 &.show-content-area {
1168 transition: left 0.25s, opacity 0.25s, visibility 0.25s;
1174 visibility: visible;
1175 transition: right 0.25s;
1181 @message-drawer-width: 320px;
1188 width: @message-drawer-width;
1190 background-color: @white;
1191 box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
1193 flex-direction: column;
1195 @media (min-width: 980px) {
1199 height: ~"calc(100% - 42px)";
1203 .transition(all .2s ease-in-out);
1207 right: @message-drawer-width * -1;
1219 [data-region="confirm-dialogue-container"] {
1220 box-sizing: border-box;
1222 box-sizing: border-box;
1248 background-color: lighten(@blue, 40%);
1261 border: 1px solid @green;
1262 background-color: @green;
1268 text-decoration: none;
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);
1289 font-weight: normal;
1292 .overview-section-toggle {
1293 .collapsed-icon-container {
1296 .expanded-icon-container {
1297 display: inline-block;
1301 .collapsed-icon-container {
1302 display: inline-block;
1304 .expanded-icon-container {
1310 .view-overview-body {
1316 flex-direction: column;
1321 .view-conversation {
1322 .content-message-container {
1330 @media (max-width: 480px) {
1331 .messaging-area-container {