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