1 files changed, 184 insertions, 0 deletions
diff --git a/addons/mail/static/src/less/mail_thread.less b/addons/mail/static/src/less/mail_thread.less
new file mode 100644
index 00000000000..15cfc5cdf94
--- /dev/null
+++ b/addons/mail/static/src/less/mail_thread.less
@@ -0,0 +1,184 @@
+// ------------------------------------------------------------------
+// Mail Thread 'Mixin'
+// ------------------------------------------------------------------
+.o_mail_thread{
+
+    /* Starred and Needaction on message */
+    .o_mail_thread_message_star, .o_mail_thread_message_needaction {
+        opacity: 0.5;
+        color: black;
+    }
+    .o_mail_thread_message_star:hover, .o_mail_thread_message_needaction:hover{
+        opacity: 1;
+        cursor: pointer;
+    }
+    .o_mail_thread_message_star.o_mail_message_starred{
+        color: orange;
+    }
+    /* author avatar */
+    .o_mail_thread_avatar{
+        width: 4.5em;
+        max-width: 50px;
+    }
+    /* message layout */
+    .o_mail_thread_message{
+        margin-bottom: 10px;
+    }
+    .o_mail_thread_message_avatar{
+        text-align: center;
+    }
+    .o_mail_thread_message_core{
+        padding: 5px;
+    }
+    .o_mail_thread_message_info{
+        margin-top: 0;
+    }
+
+    /* mail redirect */
+    .o_mail_redirect{
+        cursor: pointer;
+    }
+}
+
+// ------------------------------------------------------------------
+// Mail Compose Message
+// ------------------------------------------------------------------
+.o_mail_compose_message{
+
+    // Emoji size in the popover
+    .o_mail_compose_message_emoji_img img{
+        height: 26px;
+    }
+
+    .o_mail_compose_message_mode_mail{
+        textarea {
+            resize: vertical;
+            width: 100%;
+        }
+    }
+}
+
+// ------------------------------------------------------------------
+// Attachment Icons (common for mail thread message and compose message)
+// ------------------------------------------------------------------
+
+@-webkit-keyframes oe_mail_attach_loading_anim {
+    0% { background: #4BBD00 }
+    50% { background: #009123 }
+    100% { background: #4BBD00 }
+}
+@-moz-keyframes oe_mail_attach_loading_anim {
+    0% { background: #4BBD00 }
+    50% { background: #009123 }
+    100% { background: #4BBD00 }
+}
+@-o-keyframes oe_mail_attach_loading_anim {
+    0% { background: #4BBD00 }
+    50% { background: #009123 }
+    100% { background: #4BBD00 }
+}
+@keyframes oe_mail_attach_loading_anim {
+    0% { background: #4BBD00 }
+    50% { background: #009123 }
+    100% { background: #4BBD00 }
+}
+
+.o_mail_attachment{
+    display: inline-block;
+    width: 100px;
+    margin: 4px 2px;
+    min-height: 80px;
+    position: relative;
+    border-radius: 3px;
+    text-align: center;
+    vertical-align: top;
+
+    img {
+        position: absolute;
+        width: 48px;
+        height: 48px;
+        top: 0px;
+        left: 50%;
+        margin-left: -24px;
+    }
+
+    .o_mail_attachment_name {
+        display: inline-block;
+        max-width: 100%;
+        padding: 1px 3px;
+        margin-top: 50px;
+        margin-bottom: 5px;
+        background: #F2F7FF;
+        overflow: hidden;
+        color: #4c4c4c;
+        text-shadow: none;
+        border-radius: 3px;
+    }
+
+    &.o_mail_attachment_preview {
+        background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVQYV2MsLS39z4AGLCws0IUYGIeCwrVr12J45sSJE5ieGQIKAbuZKf/EMCs7AAAAAElFTkSuQmCC );
+    }
+
+    &.o_mail_attachment_preview img {
+        display: block;
+        position: relative;
+        margin:0px;
+        width: 100px;
+        height: 80px;
+        border-radius: 1px;
+        border: solid 3px #FFF;
+        margin-left: -50px;
+        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19);
+    }
+
+    .o_mail_attachment_progress_bar {
+        display: none;
+        position: absolute;
+        top: 18px;
+        left: 16px;
+        right: 16px;
+        height: 17px;
+        line-height: 13px;
+        padding: 0px;
+        background: #4BBD00;
+        color: white;
+        text-align: center;
+        border-radius: 3px;
+        border: solid 1px rgba(0,0,0,0.2);
+        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.34);
+        -webkit-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+           -moz-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+             -o-animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+                animation: oe_mail_attach_loading_anim 0.75s infinite linear;
+    }
+
+    &.o_mail_uploading .o_mail_attachment_progress_bar {
+        display: block;
+    }
+    .o_mail_attachment_delete .fa {
+        display: none;
+    }
+
+    .o_mail_attachment_delete .fa {
+        display: block;
+        position: absolute;
+        top: -7px;
+        right: 0px;
+        color: black;
+        text-shadow: 1px 0px white, -1px 0px white, 0px 1px white, 0px -1px white;
+        cursor: pointer;
+        opacity: 0;
+        -webkit-transition: opacity 0.2s linear;
+           -moz-transition: opacity 0.2s linear;
+             -o-transition: opacity 0.2s linear;
+                transition: opacity 0.2s linear;
+    }
+
+    &:hover .o_mail_attachment_delete .fa {
+        opacity: 1;
+        -webkit-transition: opacity 0.2s linear;
+           -moz-transition: opacity 0.2s linear;
+             -o-transition: opacity 0.2s linear;
+                transition: opacity 0.2s linear;
+    }
+}