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