hjg
2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08
提交 | 用户 | 时间
58d006 1 .enable_inbox() when(@enable-inbox = true) {
A 2
3 .inbox-tabs.nav-tabs {
4   > li {
5     > a {
6         background-color:#FAFAFA;
7     }
8     &.active:not(.open) > a {
9         & , &:hover, &:focus {
10             background-color:#F1F5FA;
11             box-shadow:0 -2px 3px 0 rgba(0, 0, 0, 0.1);
12             color:#48768E;
13         }
14     }
15
16     > a.btn-new-mail {
17         background-color:transparent;
18         border:none !important;
19         padding:0 !important;
20         > .btn {
21             border-width:0 !important;
22             border-radius:3px !important;
23
24             padding:0 6px !important;
25
26             position:relative;
27
28             transition:none !important;
29         }
30     }
31     &.active > a.btn-new-mail {
32         box-shadow:none !important;
33
34         > .btn:before {
35             content: "";
36             display: block;
37             position: absolute;
38
39             top: 100%;
40             left: 50%;
41             margin-left: -6px;
42             
43             border-width:6px 8px;
44
45             border-style:solid;
46             border-color:transparent;
47             border-top-color:inherit;
48         }
49     }
50
51   }
52
53   &.tab-size-bigger > li {
54     > a {
55         padding: 5px 15px 7px;
56         font-size: @font-size-inbox-tab-large;
57         > .@{icon}:first-child  {
58             margin-bottom: 5px;
59         }
60
61         &.btn-new-mail > .btn{
62             padding: 10px !important;
63             border-radius: 7px !important;
64         }
65     }
66     
67     &.active > a.btn-new-mail {
68         margin-top:0 !important;
69         top:1px;
70     }
71     &.active > a.btn-new-mail > .btn:before {
72         left: 50%;
73         margin-left: -8px;
74
75         border-width:8px 10px;
76     }
77   }
78
79 }
80
81
82 @media only screen and (max-width: @screen-tiny-max) {//475px
83  .inbox-tabs > .li-new-mail {
84     display:block;
85     text-align:right;
86     margin-bottom:8px !important;
87     float:none !important;
88  }
89  .inbox-tabs > .li-new-mail > .btn-new-mail {
90     display:inline-block;
91     width:auto;
92  }
93 }
94
95
96
97
98
99
100 .message-container {
101  position:relative;
102 }
103 .message-list {
104  position:relative;
105 }
106 .message-item {
107  border:1px solid #EAEDF1;
108  border-bottom-width:0;
109  padding:12px 12px 14px;
110  line-height:18px;
111  
112  position:relative;
113  background-color:#FFF;
114  
115  &:first-child {
116     border-top-width:0;
117  }
118  
119  &:hover {
120     border-color:#E2EAF2;
121     background-color:#F2F6F9;
122     
123     + .message-item {
124         border-top-color:#E2EAF2;
125         
126         &.selected {
127             border-top-color:#FFF;
128         }
129     }
130  }
131  
132  &.selected {
133     background-color:#EFF4F7;
134     border-color:#FFF #E2EAF2;
135     
136     + .message-item{
137         border-top-color:#FFF;
138
139         &:hover + .message-item {
140             border-top-color:#FFF;
141         }
142     }
143  }
144 }
145
146 .message-navbar , .message-item {
147  input.ace + .lbl::before {
148     top: auto;
149  }
150 }
151
152
153
154 .message-item {
155  .sender {
156     margin:0 6px 0 4px;
157     vertical-align:middle;
158     color:#467287;
159
160     display:inline-block;
161     width:110px; height:18px;
162     text-overflow:ellipsis;
163     overflow:hidden;
164     white-space: nowrap;
165
166     cursor:pointer;
167  }
168  &.message-unread .sender {
169     color:#6A9CBA; font-weight:bold;
170  }
171
172  .summary {
173     vertical-align:middle;
174     display:inline-block;
175     position:relative;
176     
177     margin-left:30px;
178
179     max-width: 250px;
180     max-width: ~"calc(100% - 300px)";
181     min-width: 200px;
182     white-space: nowrap;
183
184     .text {
185         color:#555;
186         vertical-align:middle;
187         display:inline-block;
188
189         width:auto;
190         max-width:100%;
191         height:18px;
192         text-overflow:ellipsis;
193         overflow:hidden;
194         white-space: nowrap;
195
196         cursor:pointer;
197         
198         &:hover {
199             text-decoration:underline;
200         }
201     }
202     
203     .message-flags {
204         display:block;
205         position:absolute;
206
207         right: 100%;
208         margin-right: 4px;
209         
210         height:18px;
211         white-space: nowrap;
212     }
213     
214  }
215  &.message-unread .summary .text {
216     color:#609FC4;
217     font-weight:bold;
218  }
219
220
221  .time {
222     float:right;
223     width:60px;
224     height:18px;
225     text-overflow:ellipsis;
226     overflow:hidden;
227     white-space: nowrap;
228     color:#666;
229  }
230  &.message-unread .time {
231     font-weight: bold;
232     color: #609FC4;
233  }
234  &.message-unread .message-content .time {
235     font-weight: normal;
236  }
237  
238
239  .attachment {
240     color: #999;
241     font-size: @font-size-inbox-attachment-icon;
242     vertical-align: middle;
243     float: right;
244     margin: 0 12px;
245     position: relative;
246  }
247  &.message-unread .attachment{
248     color:#4F99C6;
249  }
250 }
251 .message-content .time {
252  font-weight: normal;
253 }
254
255 .message-star{
256  vertical-align: middle;
257  margin: 2px 4px 0 6px;
258  font-size: @font-size-inbox-start-icon;
259  cursor: pointer;
260  
261  &:hover {
262     color: @ace-orange2 !important;
263     text-decoration: none;
264  }
265 }
266
267
268 .mail-tag:empty {
269  display:inline-block;
270  width:8px; height:11px;
271  padding:0; line-height:normal;
272  vertical-align:middle;
273  margin:0 1px 0 0;
274 }
275 .badge.mail-tag{
276  border-radius:2px;
277 }
278 .dropdown-menu > li > a >.mail-tag {
279  vertical-align: inherit;
280 }
281
282
283
284 @media only screen and (max-width: @screen-sm-max) {
285  .message-item .summary {
286     min-width:0;
287  }
288  .message-item .sender {
289     width:100px;
290  }
291 }
292
293
294 @media only screen and (max-width: 550px) {
295  .message-item .summary {
296     margin:8px 0 0 32px;
297     max-width:95%;
298     min-width:0;
299      
300     display:block;
301  }
302  .message-item .sender {
303     width:auto;
304     max-width:150px;
305  }
306  .message-item .summary  .text {
307     max-width:95%;
308  }
309 }
310
311
312
313
314 .btn-message , .btn-message:hover , .btn-message:focus, .btn-message:active, .open .btn-message.dropdown-toggle {
315  background-color:#FFF  !important;
316  border:1px solid #94B9CE !important;
317  color:#7CA3BA !important;
318  text-shadow:none !important;
319 }
320
321
322
323
324 .message-content {
325  padding:16px 12px;
326  border:1px solid #E9E9E9;
327  .box-shadow(~"0 0 1px 1px rgba(0,0,0,0.02)");
328  background-color:rgba(255,255,255,0.8);
329  border-top-width:0;
330  
331  .message-item & {
332     margin-top:16px;
333     border-top-width:1px;
334  }
335 }
336 .message-body {
337   padding:0 9px;
338   color:#6A7177;
339 }
340
341
342 .message-navbar {
343  line-height:24px;
344  padding:10px 12px;
345  border:1px solid #D6E1EA;
346  border-color:#D6E1EA transparent;
347  
348  background-color:#F1F5FA;
349  text-align: center;
350  
351  position:relative;
352 }
353
354 .message-navbar , .message-content {
355  .dropdown-toggle {
356     color:#777;    
357     &:hover, &:focus {
358         text-decoration:none;
359         color:#2283C5;
360     }
361  }
362 }
363
364
365
366 .message-bar {
367   display:inline-block;
368   min-height:28px;
369 }
370
371 @media only screen and (max-width: @screen-xs) {
372 .message-bar {
373   display:block;
374   min-height:60px;
375  }
376 }
377
378
379 .message-footer {
380   background-color: #F1F1F1;
381   padding: 12px 16px;
382   border: 1px solid #E6E6E6;
383   border-width: 1px 0;
384   border-top: 1px solid #E4E9EE;
385
386  .pagination {
387     margin: 0;
388     > li {
389         margin: 0;
390         padding: 0;
391         
392         > a , > span {
393             color: #777;
394             padding: 3px 6px;
395
396             margin-left: 1px;
397             margin-right: 1px;
398
399             background-color: transparent;
400             border: 1px solid transparent;
401         }
402         &.disabled > span {
403             color: #BBBBBB;
404             cursor: default;
405             background-color: transparent;
406             border-color: transparent;
407         }
408         
409         > a:hover {
410             border-color: lighten(desaturate(#2283C5 , 25%) , 25%);
411             color: #2283C5;
412             text-decoration: none;
413             background-color: #FFF;
414         }
415     }
416  }
417
418  input[type=text] {
419     font-size: @base-font-size - 1;
420
421     width: 34px;
422     height: 24px;
423     line-height: 20px;
424
425     margin-bottom: 0;
426     
427     padding: 3px;
428     vertical-align: middle;
429     text-align: center;
430  }
431
432 }
433
434
435 .message-footer-style2 .pagination > li {
436      > a , > span {
437         border: 1px solid #B5B5B5;
438         border-radius: 100% !important;
439         width: 26px;
440         height: 26px;
441         line-height: 26px;
442         
443         display: inline-block;
444         text-align: center;
445         padding: 0;
446     }
447     > span , &.disabled > span {
448         border-color:#CCC;
449     }
450
451     > a:hover {
452         border-color: #84AFC9;
453         background-color: #F7F7F7;
454     }
455 }
456
457
458
459 .message-item.message-inline-open {
460  background-color:#F2F6F9;
461  border:1px solid #DDD;
462  border-bottom-color:#CCC;
463
464  &:first-child {
465     border-top-color:#EEE;
466  }
467  &:last-child {
468     border-bottom-color:#DDD;
469  }
470  + .message-item {
471     border-bottom-color:transparent;
472  }
473 }
474
475
476
477 .message-loading-overlay {
478  position: absolute;
479  z-index: 14;
480  top: 0;
481  bottom: 0;
482  right: 0;
483  left: 0;
484
485  background-color: rgba(255,255,255,0.5);
486  text-align: center;
487
488  > .@{icon} {
489         position: absolute;
490         top: 15%;
491         left: 0;
492         right: 0; 
493         text-align: center;
494  }
495 }
496
497
498 .message-content {
499   .sender {
500     color:#6A9CBA;
501     font-weight:bold;
502     width:auto;
503     text-overflow:inherit;
504     vertical-align:middle;
505     margin:0;
506   }
507   .time {
508     width:auto;
509     text-overflow:inherit;
510     white-space:normal;
511     float:none;
512     vertical-align:middle;
513   }
514   
515 }
516
517
518
519 ul.attachment-list {
520  margin:6px 0 4px 8px;
521  > li{
522     margin-bottom:3px;
523  }
524 }
525 .message-attachment {
526   padding-left:10px;
527   padding-right:10px;
528 }
529
530 .attached-file {
531  color: #777;
532  width: 200px;
533  display: inline-block;
534
535   > .@{icon} {
536     display: inline-block;
537     width: 16px;
538     margin-right: 2px;
539     vertical-align: middle;
540  }
541  
542  &:hover {
543     text-decoration: none;
544     color: #438EB9;
545     
546     .attached-name {
547         color: #2283C5;
548     }
549  }
550  .attached-name {
551     display: inline-block;
552     max-width: 175px;
553     text-overflow: ellipsis;
554     overflow: hidden;
555     white-space: nowrap;
556     vertical-align: middle;
557  }
558  
559 }
560
561
562
563
564
565 .messagebar-item-left , .messagebar-item-right {
566  position: absolute;
567  bottom: 14px;
568  left: 12px;
569  text-align: left;
570 }
571 .messagebar-item-right {
572  right: 12px;
573  left: auto;
574 }
575 .message-navbar .nav-search {
576   right: auto;
577   left: 5px;
578   top: auto;
579   bottom: 11px;
580 }
581 .message-navbar .messagebar-item-left ~ .nav-search {
582   left: 60px;
583 }
584
585
586
587
588 .message-form {
589  border:1px solid #ddd;
590  border-top:none;
591  padding-top:22px;
592 }
593
594 @media only screen and (max-width: @screen-xs) {
595  .message-form {
596     padding-left:16px;
597     padding-right:16px;
598  }
599 }
600
601 .message-form {
602  .form-actions {
603     margin-bottom:0;
604  }
605  
606  .wysiwyg-editor {
607     overflow:auto;
608     min-height:150px;
609     max-height:250px;
610     height:auto;
611  }
612 }
613
614 .btn-send-message {
615   position: relative;
616   top: 6px;
617   vertical-align: middle;
618   
619 }
620
621 .btn-back-message-list {
622   color: #777;
623   &:hover {
624     color: #478FCA;
625     text-decoration: none;
626  }
627 }
628
629
630
631 .message-condensed {
632     .message-item {
633         padding-top:8px;
634         padding-bottom:9px;
635     }
636     .message-navbar , .message-footer {
637         padding-top:7px;
638         padding-bottom:7px;
639     }
640     
641     .messagebar-item-left , .messagebar-item-right {
642         bottom:9px;
643     }
644     .message-navbar .nav-search {
645         bottom:7px;
646     }
647 }
648
649 @media only screen and (max-width: @screen-xs) {
650 .message-condensed .message-bar {
651   min-height:42px;
652  }
653 }
654
655
656
657
658
659 .enable_inbox_tabless() when(@enable-inbox-tabless = true) {
660 //alternative to tabs
661 .inbox-folders  .btn-block {
662     margin-top:0;
663 }
664 @media only screen and (max-width: @screen-xs-max) {
665  .inbox-folders.inbox-folders-responsive  .btn-block {
666     width:24%;
667  }
668 }
669 @media only screen and (max-width: 600px) {
670  .inbox-folders.inbox-folders-responsive   .btn-block {
671     width:48%;
672  }
673 }
674 @media only screen and (max-width: @screen-tiny) {
675  .inbox-folders.inbox-folders-responsive   .btn-block {
676     width:99%;
677  }
678 }
679
680
681 .inbox-folders  .btn-lighter  , .inbox-folders  .btn-lighter.active {
682     background-color:#F4F4F4 !important;
683     text-shadow:none !important;
684     color:#7C8395 !important;
685     border:1px solid #FFF  !important;
686     padding:5px 11px;
687 }
688 .inbox-folders .btn-lighter.active {
689     background-color:#EDF2F8 !important;
690     color:#53617C !important;
691 }
692
693 .inbox-folders  .btn-lighter:hover {
694     background-color:#EFEFEF !important;
695     color:#6092C4 !important;
696 }
697 .inbox-folders .btn > .@{icon}:first-child {
698     display:inline-block;
699     width:14px;
700     text-align:left;
701
702
703
704 .inbox-folders  .btn-lighter + .btn-lighter {
705     border-top-width:0 !important;
706 }
707
708 .inbox-folders  .btn.active:before{
709     display:block;
710     content:"";
711     position:absolute;
712     top:1px; bottom:1px; left:-1px;
713     border-left:3px solid #4F99C6;
714 }
715 .inbox-folders  .btn.active:after{ 
716     display:none;
717 }
718
719 .inbox-folders .btn .counter {
720     border-radius:3px;
721     position:absolute;
722     right: 8px;
723     top:8px;
724     padding-left:6px; padding-right:6px;
725     .opacity(0.75);
726 }
727 .inbox-folders  .btn:hover .badge{
728     .opacity(1);
729 }
730
731 }
732 .enable_inbox_tabless();
733
734
735 }
736 .enable_inbox();