[IMP] improved css and view
[odoo/odoo.git] / addons / mail / static / src / css / mail.css
1 /* ------------ TOPBAR MAIL BUTTON --------------- */
2
3 /* FIXME this css is not very pretty because it uses a 
4  * 'button' element wich comes with a lot of inappropriate 
5  * styling. Entypo is also a headache to center properly
6  * */
7
8 .openerp .oe_topbar_item.oe_topbar_compose_full_email{ 
9     padding: 0px;
10     width: 32px;
11     height: 32px;
12 }
13 .openerp .oe_topbar_item.oe_topbar_compose_full_email button{
14     position: relative;
15     top: -3px;  /* centering entypo ... urgh */
16     box-sizing: border-box;
17     border: none;
18     box-shadow: none;
19     color: white;
20     background: none;
21     text-shadow: 0px 1px 2px black;
22     width: 32px;
23     height: 32px;
24     padding: 0px;
25     margin: 0px
26     border-radius: 0px;
27 }
28
29 /* ------------ MAIL WIDGET --------------- */
30 .openerp .oe_mail, .openerp .oe_mail *{
31     -webkit-box-sizing: border-box;
32        -moz-box-sizing: border-box;
33             box-sizing: border-box;
34 }
35 .openerp .oe_mail {
36     display: block;
37     position: relative;
38     margin: 0px;
39 }
40 .openerp .oe_mail .oe_thread{
41     margin-left: 32px;
42 }
43 .openerp .oe_mail > .oe_thread{
44     margin-left: 0px;
45 }
46
47 /* ---------------- MESSAGES ------------------ */
48
49 .openerp .oe_mail .oe_msg{
50     position: relative;
51     background: #EDEDF6;
52     border-radius: 2px;
53     margin-bottom: 2px;
54     min-height: 42px;
55     border: solid 1px rgba(0,0,0,0.03);
56 }
57 .openerp .oe_mail .oe_msg.oe_msg_nobody{
58     background: #F8F8F8;
59 }
60 .openerp .oe_mail .oe_msg .oe_msg_left{
61     position: absolute;
62     left:0; top: 0; bottom: 0; width: 40px;
63     overflow: hidden;
64 }
65 .openerp .oe_mail .oe_msg .oe_msg_left a,
66 .openerp .oe_mail .oe_msg .oe_msg_left img{
67     border: 0;
68 }
69 .openerp .oe_mail .oe_msg .oe_msg_icon{
70     width: 32px;
71     margin: 4px;
72     border-radius: 2px;
73 }
74 .openerp .oe_mail .oe_msg .oe_msg_center{
75     position: relative;
76     display: block;
77     margin-left: 40px;
78 }
79 .openerp .oe_mail .oe_msg .oe_msg_footer{
80     margin-left: 4px;
81     padding-top: 3px;
82     overflow: hidden;
83     margin-bottom: 4px;
84     font-size: 11px;
85 }
86 .openerp .oe_mail .oe_msg .oe_msg_content{
87     display: block;
88     overflow: hidden;
89     padding: 4px;
90     padding-bottom:1px;
91 }
92 .openerp .oe_mail .oe_msg .oe_msg_content .oe_msg_title{
93     font-size: 13px;
94     margin-bottom: 0px;
95     margin-top: 2px;
96 }
97 .openerp .oe_mail .oe_msg .oe_msg_content .oe_msg_body p:first-of-type {
98     margin-top: 0px;
99 }
100
101 .openerp .oe_mail .oe_msg .oe_msg_content .oe_msg_body p {
102     margin-bottom: 0px;
103 }
104 .openerp .oe_mail .oe_msg .oe_msg_content .oe_msg_body * {
105     text-overflow:ellipsis;
106     word-wrap: break-word;
107 }
108
109 /* a) Indented Messages */
110
111 .openerp .oe_mail .oe_msg_indented{
112     background: #FFF;
113     border: none;
114     margin-bottom:0px;
115     min-height:38px;
116 }
117 .openerp .oe_mail .oe_msg.oe_msg_indented .oe_msg_icon{
118     width:32px;
119     margin:2px;
120     border-radius:2px;
121 }
122 .openerp .oe_mail .oe_msg .oe_subtle{
123     color: #B7B7D5;
124 }
125 .openerp .oe_mail .oe_msg_indented .oe_msg_center{
126     margin-left:34px;
127 }
128 .openerp .oe_mail .oe_msg.oe_msg_indented .oe_msg_content{
129     padding-top:2px;
130 }
131 .openerp .oe_mail .oe_msg.oe_msg_indented .oe_msg_footer{
132     margin-bottom: 5px;
133 }
134
135 /* b) Votes (likes) */
136
137 .openerp .oe_mail .oe_mail_vote_count{
138     display: inline;
139     position: relative;
140     background: white;
141     box-shadow: 0px 0px 0px 1px rgba(124, 123, 173, 0.36) inset;
142     color: #7c7bad;
143     text-shadow: none;
144     border-radius: 3px;
145     margin: 0px;
146     padding-left: 3px;
147     padding-right: 15px;
148     margin-right: 5px;
149 }
150 .openerp .oe_mail .oe_mail_vote_count .oe_e{
151     position: absolute;
152     bottom: 1px;
153     right: 2px;
154     font-size: 26px;
155 }
156
157 /* c) Message action icons */
158
159 .openerp .oe_mail .oe_msg .oe_msg_icons{
160     float: right;
161     margin-top: 4px;
162     margin-right: 8px;
163     margin-left: 8px;
164     height: 24px;
165     -webkit-user-select: none;
166        -moz-user-select: none;
167         -ms-user-select: none;
168             user-select: none;
169 }
170 .openerp .oe_mail .oe_msg .oe_msg_icons span{
171     float:right;
172     width:24px;
173     height:24px;
174     line-height:24px;
175     text-align: center;
176 }
177 .openerp .oe_mail .oe_msg .oe_msg_icons a {
178     text-decoration: none;
179     color: #FFF;
180     text-shadow: 0px 1px #AAA,0px -1px #AAA, -1px 0px #AAA, 1px 0px #AAA, 0px 3px 3px rgba(0,0,0,0.1);
181     -webkit-transition: all 0.2s linear;
182        -moz-transition: all 0.2s linear;
183          -o-transition: all 0.2s linear;
184             transition: all 0.2s linear;
185 }
186 .openerp .oe_mail .oe_msg:hover .oe_msg_icons a{
187     opacity: 1;
188     -webkit-transition: all 0.1s linear;
189        -moz-transition: all 0.1s linear;
190          -o-transition: all 0.1s linear;
191             transition: all 0.1s linear;
192 }
193 .openerp .oe_mail .oe_msg .oe_msg_icons .oe_star:hover a{
194     color: #FFF670;
195     text-shadow: 0px 1px #FFA162,0px -1px #FFA162, -1px 0px #FFA162, 1px 0px #FFA162, 0px 3px 3px rgba(0,0,0,0.1);
196 }
197 .openerp .oe_mail .oe_msg .oe_msg_icons .oe_star.oe_starred a{
198     color: #FFE41F;
199     text-shadow: 0px 1px #DF6200,0px -1px #DF6200, -1px 0px #DF6200, 1px 0px #DF6200, 0px 3px 3px rgba(0,0,0,0.1);
200 }
201 .openerp .oe_mail .oe_msg .oe_msg_icons .oe_reply:hover a{
202     color: #1fc0ff;
203     text-shadow: 0px 1px #184fc5,0px -1px #184fc5, -1px 0px #184fc5, 1px 0px #184fc5, 0px 3px 3px rgba(0,0,0,0.1);
204 }
205 .openerp .oe_mail .oe_msg .oe_msg_icons .oe_read:hover a{
206     color: #bbbaff;
207     text-shadow: 0px 1px #7c7bad,0px -1px #7c7bad, -1px 0px #7c7bad, 1px 0px #7c7bad, 0px 3px 3px rgba(0,0,0,0.1);
208 }
209 .openerp .oe_mail .oe_msg .oe_msg_icons .oe_unread:hover a{
210     color: #c2ff00;
211     text-shadow: 0px 1px #009441,0px -1px #009441, -1px 0px #009441, 1px 0px #009441, 0px 3px 3px rgba(0,0,0,0.1);
212 }
213 .openerp .oe_mail .oe_msg .oe_msg_content textarea{
214     width: 100%;
215     height: 64px;
216     margin: 0px;
217     padding: 0px;
218     resize: vertical;
219     
220     padding: 4px;
221 }
222 .openerp .oe_mail .oe_msg.oe_msg_composer_compact, .openerp .oe_mail .oe_msg.oe_msg_expandable{
223     padding:4px;
224     min-height:0px;
225 }
226 .openerp .oe_mail .oe_msg.oe_msg_composer_compact textarea{
227     height: 24px;
228     width: 100%;
229 }
230 .openerp .oe_mail .oe_msg.oe_msg_composer_compact .oe_sep_word{
231     margin-right: 8px;
232     margin-left: 8px;
233 }
234 .openerp .oe_mail .oe_msg.oe_msg_composer_compact .oe_compact{
235     height: 24px;
236     width: 100%;
237     padding: 2px 4px;
238     color: #AAA;
239     cursor: text;
240 }
241 .openerp .oe_mail .oe_msg.oe_msg_composer_compact .oe_compact_record {
242     font-size: 13px;
243     font-style: bold;
244     text-align: center;
245 }
246 .openerp .oe_mail .oe_msg.oe_msg_composer_compact .oe_compact_inbox {
247     border: 1px solid #CCC;
248     -moz-border-radius: 3px;
249     -webkit-border-radius: 3px;
250     border-radius: 3px;
251     background: white;
252     font-size: 14px;
253     font-style: italic;
254 }
255
256 /* d) I.E. tweaks for Message action icons */
257
258 .openerp.openerp_ie .oe_mail .oe_msg .oe_msg_icons a {
259     color: #C8BFDA;
260     text-shadow: none;
261 }
262 .openerp.openerp_ie .oe_mail .oe_msg .oe_msg_icons .oe_star:hover a{
263     color: #FFB700;
264     text-shadow: none;
265 }
266 .openerp.openerp_ie .oe_mail .oe_msg .oe_msg_icons .oe_starred a{
267     color: #FFB700;
268     text-shadow:none;
269 }
270 .openerp.openerp_ie .oe_mail .oe_msg .oe_msg_icons .oe_read:hover a{
271     color: #7C7BAD;
272     text-shadow: none;
273 }
274 .openerp.openerp_ie .oe_mail .oe_msg .oe_msg_icons .oe_unread:hover a{
275     color: #7C7BAD;
276     text-shadow: none;
277 }
278
279 /* --------------------- ATTACHMENTS --------------------- */
280
281 .openerp .oe_mail .oe_msg_attachment_list{
282     margin-top: 4px;
283     margin-bottom: 4px;
284 }
285 .openerp .oe_mail .oe_msg_composer .oe_msg_attachment_list {
286     display: block;
287 }
288 .openerp .oe_mail .oe_msg_composer .oe_recipients {
289     font-size: 12px;
290     margin-left: 20px;
291     margin-bottom: 2px;
292 }
293 .openerp .oe_mail .oe_msg_composer .oe_recipients label{
294     vertical-align: middle;
295     display: block;
296     line-height: 14px;
297 }
298 .openerp .oe_mail .oe_msg_composer .oe_recipients input{
299     vertical-align: middle;
300 }
301 .openerp .oe_mail .oe_attachment{
302     display: inline-block;
303     width: 100px;
304     margin: 4px 2px;
305     min-height: 80px;
306     position: relative;
307     border-radius: 3px;
308     text-align: center;
309     vertical-align: top;
310 }
311 .openerp .oe_mail .oe_attachment .oe_name{
312     display: inline-block;
313     max-width: 100%;
314     padding: 1px 3px;
315     margin-top: 50px;
316     margin-bottom: 5px;
317     background: #F4F5FA;
318     overflow: hidden;
319     color: #4c4c4c;
320     text-shadow: none;
321     border-radius: 3px;
322 }
323
324 .openerp .oe_mail .oe_attachment.oe_preview{
325     background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVQYV2MsLS39z4AGLCws0IUYGIeCwrVr12J45sSJE5ieGQIKAbuZKf/EMCs7AAAAAElFTkSuQmCC );
326 }
327 .openerp .oe_mail .oe_attachment .oe_progress_bar{
328     display: none;
329     position: absolute;
330     top: 18px;
331     left: 16px;
332     right: 16px;
333     height: 17px;
334     line-height: 13px;
335     padding: 0px;
336     background: #4BBD00;
337     color: white;
338     text-align: center;
339     border-radius: 3px;
340     border: solid 1px rgba(0,0,0,0.2);
341     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.34);
342     -webkit-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
343        -moz-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
344          -o-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
345             animation: oe_mail_attach_loading_anim 0.75s infinite linear;
346 }
347 .openerp .oe_mail .oe_attachment.oe_uploading .oe_progress_bar{
348     display: block;
349 }
350 @-webkit-keyframes oe_mail_attach_loading_anim{
351     0% { background: #4BBD00 }
352     50% { background: #009123 } 
353     100% { background: #4BBD00 }
354 }
355 @-moz-keyframes oe_mail_attach_loading_anim{
356     0% { background: #4BBD00 }
357     50% { background: #009123 } 
358     100% { background: #4BBD00 }
359 }
360 @-o-keyframes oe_mail_attach_loading_anim{
361     0% { background: #4BBD00 }
362     50% { background: #009123 } 
363     100% { background: #4BBD00 }
364 }
365 @keyframes oe_mail_attach_loading_anim{
366     0% { background: #4BBD00 }
367     50% { background: #009123 } 
368     100% { background: #4BBD00 }
369 }
370 .openerp .oe_mail .oe_attachment.oe_preview .oe_name{
371     position: absolute;
372     bottom: 0px;
373     margin: 3px;
374     left: 0px;
375     right: 0px;
376     max-height: 64px;
377     background: rgba(0,0,0,0.8); 
378     color: white;
379     border-radius: 1px;
380     border-top-left-radius: 0px;
381     border-top-right-radius: 0px;
382     opacity: 0;
383     -webkit-transition: opacity 0.2s linear; 
384        -moz-transition: opacity 0.2s linear; 
385          -o-transition: opacity 0.2s linear; 
386             transition: opacity 0.2s linear; 
387 }
388 .openerp .oe_mail .oe_attachment.oe_preview:hover .oe_name{
389     opacity: 1;
390     -webkit-transition: opacity 0.2s linear; 
391        -moz-transition: opacity 0.2s linear; 
392          -o-transition: opacity 0.2s linear; 
393             transition: opacity 0.2s linear; 
394 }
395 .openerp .oe_mail .oe_attachment img{
396     position: absolute;
397     width: 48px;
398     height: 48px;
399     top: 0px;
400     left: 50%;
401     margin-left: -24px;
402 }
403 .openerp .oe_mail .oe_attachment.oe_preview img{
404     display: block;
405     position: relative;
406     margin:0px;
407     width: 100px;
408     height: 80px;
409     border-radius: 1px;
410     border: solid 3px #FFF;
411     margin-left: -50px;
412     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19);
413 }
414 .openerp .oe_mail .oe_attachment .oe_delete{
415     display: none;
416 }
417 .openerp .oe_mail .oe_msg_composer .oe_attachment .oe_delete{
418     display: block;
419     position: absolute;
420     top: -7px;
421     right: 0px;
422     color: black;
423     text-shadow: 1px 0px white, -1px 0px white, 0px 1px white, 0px -1px white;
424     cursor: pointer;
425     opacity: 0;
426     -webkit-transition: opacity 0.2s linear; 
427        -moz-transition: opacity 0.2s linear; 
428          -o-transition: opacity 0.2s linear; 
429             transition: opacity 0.2s linear; 
430 }
431 .openerp .oe_mail .oe_msg_composer .oe_attachment:hover .oe_delete{
432     opacity: 1;
433     -webkit-transition: opacity 0.2s linear; 
434        -moz-transition: opacity 0.2s linear; 
435          -o-transition: opacity 0.2s linear; 
436             transition: opacity 0.2s linear; 
437 }
438 /* ---------------- MESSAGE QUICK COMPOSER --------------- */
439
440 .openerp .oe_mail .oe_msg_composer .oe_msg_footer{
441     padding-right:4px;
442     padding-top: 2px;
443     padding-bottom:6px;
444 }
445 .openerp .oe_mail .oe_msg_images {
446     display: block;
447 }
448 .openerp .oe_mail .oe_msg_footer button{
449     display: inline;
450     height: 24px;
451     font-size: 12px;
452     line-height: 12px;
453     vertical-align: middle;
454 }
455 .openerp .oe_mail .oe_msg_footer button.oe_post,
456 .openerp .oe_mail .oe_msg_footer button.oe_log{
457     position: relative;
458     z-index: 2;
459 }
460 .openerp .oe_mail .oe_msg_footer button.oe_attach{
461     width: 24px;
462     overflow: hidden;
463     filter:none;
464 }
465 .openerp .oe_mail .oe_msg_footer button.oe_attach .oe_e{
466     position: relative;
467     top: -4px;
468     margin-left: -9px;
469     vertical-align: middle;
470     filter:none;
471 }
472 .openerp .oe_mail .oe_hidden_input_file, .openerp .oe_mail .oe_hidden_input_file form{
473     display:inline;
474 }
475 .openerp .oe_mail .oe_msg_center button.oe_full{
476     width: 24px;
477     height: 22px;
478     overflow: hidden;
479     float: right;
480     filter: none;
481 }
482 .openerp .oe_mail .oe_msg_center button.oe_full .oe_e{
483     position: relative;
484     top: -9px;
485     margin-left: -5px;
486     vertical-align: top;
487     filter: none;
488     height: 14px;
489 }
490 .openerp .oe_mail button.oe_attach, .openerp .oe_mail button.oe_full{
491     background: transparent; 
492     color: #7C7BAD;
493     box-shadow: none;
494     border: none;
495     text-shadow: none;
496     filter:none;
497 }
498 .openerp .oe_mail .oe_attach_label{
499     color: #7C7BAD;
500     margin-left: -3px;
501 }
502 .openerp .oe_mail .oe_msg_footer .oe_attachment_file{
503     cursor: pointer;
504 }
505 .openerp .oe_mail .oe_msg_footer .oe_attachment_file .oe_form_binary_file{
506     display: inline-block;
507     margin-left: -122px;
508     height: 22px;
509     width: 128px;
510     margin-top: -4px;
511     filter:none;
512     cursor: pointer;
513 }
514 .openerp .oe_mail .oe_msg_content .oe_mail_list_recipients{
515     font-size: 12px;
516     margin: 4px 0 4px 20px;
517     text-indent: -20px;
518 }
519
520 /* ---------------- HIDDEN MESSAGES ------------------ */
521
522 .openerp .oe_mail .oe_msg_content.oe_msg_more_message{
523     text-align: right;
524     cursor: pointer;
525 }
526 .openerp .oe_mail .oe_msg_content.oe_msg_more_message .oe_separator{
527     height: 0;
528     border-bottom: dashed 1px #e6e6e6;
529     margin-left: -4px;
530     margin-right: 8px;
531     margin-top: 6px;
532     margin-bottom: -9px;
533 }
534 .openerp .oe_mail .oe_msg_more_message .oe_msg_fetch_more {
535     background: white;
536     margin-right: 210px;
537     padding-left: 8px;
538     padding-right: 8px;
539     text-decoration: none;
540     color: #b4b4b4;
541 }
542 .openerp .oe_mail .oe_msg_more_message .oe_msg_fetch_more:hover{
543     text-decoration: none;
544 }
545
546 /* ---------------- FOLLOWERS ------------------ */
547
548 .openerp .oe_followers{
549     position: relative;
550     display: inline-block;
551     padding-top: 5px;
552     width: 160px;
553     float: right;
554     margin-right: 16px;
555 }
556
557 /*  a) THE FOLLOW BUTTON */
558
559 .openerp .oe_followers button.oe_follower{
560     display: block;
561     text-align: center;
562     width:100%;
563 }
564 .openerp .oe_followers button.oe_invite{
565     margin: 5px 0;
566     padding: 2px 8px;
567     font-size: 12px;
568     text-shadow: none;
569     width: 100%;
570 }
571 .openerp .oe_followers button.oe_invite,
572 .openerp .oe_followers button.oe_follower.oe_following{
573     color: white;
574     background-color: #3465A4;
575     background-image: -webkit-linear-gradient(top, #729FCF, #3465A4);
576     background-image:    -moz-linear-gradient(top, #729FCF, #3465A4);
577     background-image:     -ms-linear-gradient(top, #729FCF, #3465A4);
578     background-image:      -o-linear-gradient(top, #729FCF, #3465A4);
579     background-image:         linear-gradient(to bottom, #729FCF, #3465A4);
580 }
581 .openerp .oe_followers button.oe_follower.oe_following:hover{
582     color: white;
583     filter:none;
584     background-color: #A21A1A;
585     background-image: -webkit-linear-gradient(top, #DF3F3F, #A21A1A);
586     background-image:    -moz-linear-gradient(top, #DF3F3F, #A21A1A);
587     background-image:     -ms-linear-gradient(top, #DF3F3F, #A21A1A);
588     background-image:      -o-linear-gradient(top, #DF3F3F, #A21A1A);
589     background-image:         linear-gradient(to bottom, #DF3F3F, #A21A1A);
590 }
591
592 .openerp .oe_followers button.oe_follower .oe_follow, 
593 .openerp .oe_followers button.oe_follower .oe_unfollow, 
594 .openerp .oe_followers button.oe_follower .oe_following{
595     display: none;
596 }
597 /*  a.1) when following, show 'following' */
598 .openerp .oe_followers button.oe_follower.oe_following .oe_following{
599     display: inline;
600 }
601 /*  a.2) when following and hovering, show 'unfollow' */
602 .openerp .oe_followers button.oe_follower.oe_following:hover .oe_following{
603     display: none;
604 }
605 .openerp .oe_followers button.oe_follower.oe_following:hover .oe_unfollow{
606     display: inline;
607 }
608 /*  a.3) when not following  show 'follow' */
609 .openerp .oe_followers button.oe_follower.oe_notfollow .oe_follow{
610     display: inline;
611 }
612
613 .openerp .oe_followers .oe_subtype_list{
614     margin-top: 4px;
615 }
616
617 /*  b) THE FOLLOWERS */
618 .openerp .oe_followers .oe_follower_title{
619     display: inline;
620 }
621 .openerp .oe_followers .oe_follower_title_box{
622     margin-top: 12px;
623     margin-bottom: 4px;
624 }
625 .openerp .oe_followers .oe_partner {
626     height: 32px;
627     margin-right: 8px;
628     overflow: hidden;
629     white-space: nowrap;
630     text-overflow: ellipsis;
631 }
632 .openerp .oe_followers .oe_partner img{
633     width: 32px;
634     margin-right:4px;
635     border-radius: 2px;
636 }
637 .openerp .oe_followers .oe_remove_follower{
638     cursor: pointer;
639     position: absolute;
640     right: 0px;
641     line-height: 20px;
642 }
643
644 .openerp .oe_followers .oe_show_more{
645     cursor: pointer;
646 }
647
648 /* ---------------- MESSAGES BODY ------------------ */
649 .openerp .oe_mail .oe_msg_content .oe_blockquote,
650 .openerp .oe_mail .oe_msg_content blockquote {
651     padding: 4px;
652     border-radius: 2px;
653     border: solid 1px rgba(124,123,173,0.14);
654 }
655
656 /* ----------- FORM INTEGRATION ------------ */
657
658 .openerp .oe_record_thread{
659     display: block;
660     margin-left: 16px;
661     margin-right: 212px;
662 }
663
664 /* ----------- INBOX INTEGRATION ----------- */
665
666 .openerp .oe_mail_wall .oe_mail{
667     margin: 16px;
668     width: 600px;
669 }
670
671 .openerp .oe_mail .oe_view_nocontent > p {
672     padding-left: 15px;
673 }