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