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