diff options
Diffstat (limited to 'addons/mail/static/src/less/mail_thread.less')
| -rw-r--r-- | addons/mail/static/src/less/mail_thread.less | 191 |
1 files changed, 191 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..c502a528c8d --- /dev/null +++ b/addons/mail/static/src/less/mail_thread.less @@ -0,0 +1,191 @@ +// ------------------------------------------------------------------ +// Mail Thread 'Mixin' +// ------------------------------------------------------------------ +.o_mail_thread { + .o_mail_thread_date_separator, .o_mail_thread_message { + margin: auto; // override the margin-{left,right}: -15px defined on .row + } + .o_mail_thread_date_separator { + .o_mail_thread_date_wrapper { + border-bottom: solid @gray-lighter 2px; + margin-bottom: 15px; + .o_mail_thread_date_separator_title { + display: table; + position: relative; + top: 10px; + margin: 0 auto; + padding: 0 10px 0 10px; + font-weight: bold; + background: white; + } + } + } + @mail_thread_avatar_size: 50px; + .o_mail_thread_message { + .o-flex-display(); + margin: 10px 0; + .o_mail_thread_message_avatar { + .o-flex(0, 0, @mail_thread_avatar_size); + margin-right: 10px; + @media (max-width: @screen-xs-max) { + .o-flex(0, 0, @mail_thread_avatar_size/2); + } + .o_mail_thread_avatar { + display: block; + margin: 0 auto; // center the avatar + max-width: @mail_thread_avatar_size; + @media (max-width: @screen-xs-max) { + max-width: @mail_thread_avatar_size/2; + } + } + } + .o_mail_thread_message_core { + .o-flex(1, 1, auto); + > p { + margin: 0 0 9px; // Required by the old design to override a general rule on p's + } + } + .o_mail_thread_message_star, .o_mail_thread_message_needaction { + cursor: pointer; + opacity: 0.5; + &:hover { + opacity: 1; + } + } + .o_mail_thread_message_star.o_mail_message_starred { + color: gold; + } + .o_mail_redirect { + cursor: pointer; + } + } + .o_mail_thread_show_more { + text-align: center; + } +} + +// ------------------------------------------------------------------ +// Mail Compose Message +// ------------------------------------------------------------------ +.o_mail_chat_composer_wrapper { + .o_mail_compose_message { // use flex for the layout in the Chat app + .o-flex-display(); + .o_mail_compose_message_input { + .o-flex(1, 1, auto); + } + .o_mail_compose_message_buttons { + .o-flex(0, 0, auto); + } + } +} +.o_mail_compose_message { + width: 100%; + input.o_mail_compose_message_input { + border: none; + padding: 5px; + margin-right: 5px; + } + textarea.o_mail_compose_message_input { + width: 100%; + margin: 5px 0; + } +} +.o_mail_mention_partner_tags { + margin-top: 5px; + text-align: justify; +} +.o_mail_attachments_list .o_mail_chat_im_attachment_files { + margin-top: 5px; + text-align: justify; +} +// Emoji size in the popover +.o_mail_compose_message_emoji { + .o_mail_compose_message_emoji_img > img { + cursor: pointer; + height: 26px; + } +} + +// ------------------------------------------------------------------ +// Attachment Icons (common for mail thread message and compose message) +// ------------------------------------------------------------------ +@o-mail-attachment-image-size: 60px; + +@-webkit-keyframes oe_mail_attach_loading_anim { + 0% { background: @odoo-brand-optional } + 50% { background: darken(@odoo-brand-optional, 10%) } + 100% { background: @odoo-brand-optional } +} +@-moz-keyframes oe_mail_attach_loading_anim { + 0% { background: @odoo-brand-optional } + 50% { background: darken(@odoo-brand-optional, 10%) } + 100% { background: @odoo-brand-optional } +} +@-o-keyframes oe_mail_attach_loading_anim { + 0% { background: @odoo-brand-optional } + 50% { background: darken(@odoo-brand-optional, 10%) } + 100% { background: @odoo-brand-optional } +} +@keyframes oe_mail_attach_loading_anim { + 0% { background: @odoo-brand-optional } + 50% { background: darken(@odoo-brand-optional, 10%) } + 100% { background: @odoo-brand-optional } +} + +.o_mail_attachment { + position: relative; + width: 2*@o-mail-attachment-image-size; + display: inline-block; + height: 50px; + text-align: center; + margin-bottom: 15px; + + .o_image { + .o-position-absolute(@top: 0, @left: @o-mail-attachment-image-size/2); + width: @o-mail-attachment-image-size; + height: @o-mail-attachment-image-size; + } + + .o_mail_attachment_name { + display: inline-block; + max-width: 100%; + margin-top: @o-mail-attachment-image-size; + overflow: hidden; + text-overflow: ellipsis; + color: @odoo-main-text-color; + } + + &.o_mail_uploading { + .o_mail_attachment_progress_bar { + display: block; + .o-position-absolute(@top: 18px, @left: 16px, @right: 16px); + height: 17px; + line-height: 13px; + color: white; + border-radius: @border-radius-base; + border: solid 1px grey; + box-shadow: 0px 1px 10px @odoo-shadow-color; + .o-animation(@name: oe_mail_attach_loading_anim, @duration: 1s, @timing-function: linear, @iteration-count: infinite); + } + .o_mail_attachment_delete { + display: none; + } + } + + .o_mail_attachment_progress_bar { + display: none; + } + + .o_mail_attachment_delete { + .o-position-absolute(@top: 0, @right: 0); + color: @odoo-main-text-color; + cursor: pointer; + opacity: 0; + .o-transition(opacity, 0.2s, linear); + } + + &:hover .o_mail_attachment_delete { + opacity: 1; + .o-transition(opacity, 0.2s, linear); + } +} |