[IMP] mass_mailing, web_editor: improve themes/snippets/templates

8 files changed, 814 insertions, 227 deletions

diff --git a/addons/mass_mailing/static/src/css/themes/airmail.css b/addons/mass_mailing/static/src/css/themes/airmail.css
deleted file mode 100644
index 655d4bd19ee..00000000000
--- a/addons/mass_mailing/static/src/css/themes/airmail.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/*Airmail Template*/
-
-.o_airmail_theme_header, .o_airmail_theme_footer {
-    background-color: #d05d68;
-}
-.o_airmail_theme {
-    background-color: #ededed;
-}
-.o_airmail_theme_container {
-    background-color: white;
-    box-shadow: none;
-}
-
-/*Colors*/
-
-.o_airmail_theme .bg-alpha {
-    background-color: #fff;
-}
-.o_airmail_theme .bg-alpha p, .o_airmail_theme .bg-alpha .display-1, .o_airmail_theme .bg-alpha .display-2, .o_airmail_theme .bg-alpha .display-3 {
-    color: #000;
-}
-.o_airmail_theme .bg-beta {
-    background-color: #6077a8;
-}
-.o_airmail_theme .bg-beta p, .o_airmail_theme .bg-beta .display-1, .o_airmail_theme .bg-beta .display-2, .o_airmail_theme .bg-beta .display-3 {
-    color: #fff;
-}
-.o_airmail_theme .bg-beta .link-color {
-    color: #dab4a8;
-}
-.o_airmail_theme .bg-gamma {
-    background-color: #a17e92;
-}
-.o_airmail_theme .bg-gamma .link-color {
-    color: #dab4a8;
-}
-.o_airmail_theme .bg-gamma p, .o_airmail_theme .bg-gamma .display-1, .o_airmail_theme .bg-gamma .display-2, .o_airmail_theme .bg-gamma .display-3 {
-    color: #fff;
-}
-.o_airmail_theme .bg-delta {
-    background-color: #dab4a8;
-}
-.o_airmail_theme .bg-delta p, .o_airmail_theme .bg-delta .display-1, .o_airmail_theme .bg-delta .display-2, .o_airmail_theme .bg-delta .display-3 {
-    color: #000;
-}
-.o_airmail_theme .bg-epsilon {
-    background-color: #d05d68;
-}
-.o_airmail_theme .bg-epsilon p, .o_airmail_theme .bg-epsilon .display-1, .o_airmail_theme .bg-epsilon .display-2, .o_airmail_theme .bg-epsilon .display-3 {
-    color: #fff;
-}
-.o_airmail_theme .bg-epsilon .link-color {
-    color: #fff;
-}
-
-/*Link color*/
-
-.o_airmail_theme .link-color {
-    color: #d05d68;
-}
-
-/*BTN styles*/
-
-.o_airmail_theme .newsletter-btn {
-    color: #d05d68;
-    border: 1px solid #d05d68;
-    border-radius: 4px;
-    background-color: transparent;
-}
-.o_airmail_theme .bg-gamma .newsletter-btn {
-    color: #fff;
-    border: 1px solid #fff;
-}
-.o_airmail_theme .bg-epsilon .newsletter-btn {
-    color: #fff;
-    border: 1px solid #fff;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/lemon.css b/addons/mass_mailing/static/src/css/themes/lemon.css
deleted file mode 100644
index df6a83f9e17..00000000000
--- a/addons/mass_mailing/static/src/css/themes/lemon.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.o_lemon_theme {
-    background-color: #fff;
-}
-.o_lemon_theme_header {
-    background-color: #fe4e1e;
-}
-.o_lemon_theme_container {
-    background-color: #f4ea00;
-}
-
-.o_lemon_theme p {
-    color: #000;
-}
-.o_lemon_theme .bg-alpha {
-    background-color: #fff;
-}
-.o_lemon_theme .bg-alpha .display-1, .o_lemon_theme .bg-alpha p, .o_lemon_theme .bg-alpha .display-2, .o_lemon_theme .bg-alpha .display-3{
-    color: #000;
-}
-.o_lemon_theme .bg-beta {
-    background-color: #f4ea00;
-}
-.o_lemon_theme .bg-beta p, .o_lemon_theme .bg-beta .display-1, .o_lemon_theme .bg-beta .display-2, .o_lemon_theme .bg-beta .display-3 {
-    color: #000;
-}
-.o_lemon_theme .bg-gamma {
-    background-color: #d6d5b6;
-}
-.o_lemon_theme .bg-gamma p, .o_lemon_theme .bg-gamma .display-1, .o_lemon_theme .bg-gamma .display-2, .o_lemon_theme .bg-gamma .display-3 {
-    color: #000;
-}
-.o_lemon_theme .bg-gamma .link-color {
-    color: #fe4e1e;
-}
-.o_lemon_theme .bg-delta {
-    background-color: #000;
-}
-.o_lemon_theme .bg-delta p, .o_lemon_theme .bg-delta .display-1, .o_lemon_theme .bg-delta .display-2, .o_lemon_theme .bg-delta .display-3 {
-    color: #fff;
-}
-.o_lemon_theme .bg-delta .link-color {
-    color: #fe4e1e;
-}
-.o_lemon_theme .bg-epsilon {
-    background-color: #fe4e1e;
-}
-.o_lemon_theme .bg-epsilon p, .o_lemon_theme .bg-epsilon .display-1, .o_lemon_theme .bg-epsilon .display-2, .o_lemon_theme .bg-epsilon .display-3 {
-    color: #fff;
-}
-.o_lemon_theme .bg-epsilon .link-color {
-    color: #f4ea00;
-}
-
-.o_lemon_theme .link-color {
-    color: #fe4e1e;
-}
-
-/*BTN styles*/
-
-.o_lemon_theme .newsletter-btn {
-    color: #fff;
-    background-color: #fe4e1e;
-    font-size: 12px;
-}
-
-/*Snippet styles*/
-
-.o_lemon_theme .separator {
-    background-color: #fff;
-}
-.o_lemon_theme .snippet-general {
-    margin:0 auto;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/tech.css b/addons/mass_mailing/static/src/css/themes/tech.css
deleted file mode 100644
index 00ea206cd48..00000000000
--- a/addons/mass_mailing/static/src/css/themes/tech.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* ======================== COLORS ====================== */
-
-.o_tech_theme {
-    background-color: #fff;
-}
-.o_tech_theme_header {
-    background-color: #e3e3e3;
-}
-
-.o_tech_theme p {
-    color: #494949;
-}
-.o_tech_theme .bg-alpha {
-    background-color: #fff;
-}
-.o_tech_theme .bg-alpha .display-1, .o_tech_theme .bg-alpha p, .o_tech_theme .bg-alpha .display-2, .o_tech_theme .bg-alpha .display-3{
-    color: #000;
-}
-.o_tech_theme .bg-beta {
-    background-color: #dadada;
-}
-.o_tech_theme .bg-beta p, .o_tech_theme .bg-beta .display-1, .o_tech_theme .bg-beta .display-2, .o_tech_theme .bg-beta .display-3 {
-    color: #000;
-}
-.o_tech_theme .bg-beta .link-color {
-    color: #de5745;
-}
-.o_tech_theme .bg-gamma {
-    background-color: #de5745;
-}
-.o_tech_theme .bg-gamma p, .o_tech_theme .bg-gamma .display-1, .o_tech_theme .bg-gamma .display-2, .o_tech_theme .bg-gamma .display-3 {
-    color: #fff;
-}
-.o_tech_theme .bg-gamma .link-color {
-    color: #ccda3f;
-}
-.o_tech_theme .bg-delta {
-    background-color: #4a9fba;
-}
-.o_tech_theme .bg-delta p, .o_tech_theme .bg-delta .display-1, .o_tech_theme .bg-delta .display-2, .o_tech_theme .bg-delta .display-3 {
-    color: #fff;
-}
-.o_tech_theme .bg-delta .link-color {
-    color: #ccda3f;
-}
-.o_tech_theme .bg-epsilon {
-    background-color: #ccda3f;
-}
-.o_tech_theme .bg-epsilon p, .o_tech_theme .bg-epsilon .display-1, .o_tech_theme .bg-epsilon .display-2, .o_tech_theme .bg-epsilon .display-3 {
-    color: #000;
-}
-.o_tech_theme .bg-epsilon .link-color {
-    color: #de5745;
-}
-
-.o_tech_theme .link-color {
-    color: #ccda3f;
-}
-
-/*BTN styles*/
-
-.o_tech_theme .newsletter-btn {
-    color: #fff;
-    background-color: #ccda3f;
-    font-size: 12px;
-}
-.o_tech_theme .bg-epsilon .newsletter-btn {
-    background-color: #de5745;
-}
-
-/*Snippet styles*/
-
-.o_tech_theme .snippet-general {
-    margin:0 auto;
-}
diff --git a/addons/mass_mailing/static/src/css/themes/theme_airmail.less b/addons/mass_mailing/static/src/css/themes/theme_airmail.less
new file mode 100644
index 00000000000..fdb02d0fa00
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_airmail.less
@@ -0,0 +1,211 @@
+// out: ../compiled/theme_airmail.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+
+@o_mm_airmail_color_alpha   : #EAECED;
+@o_mm_airmail_color_beta    : white;
+@o_mm_airmail_color_gamma   : #FB3C6B;
+@o_mm_airmail_color_delta   : darken(@o_mm_airmail_color_gamma, 5%);
+@o_mm_airmail_color_epsilon : black;
+@o_mm_airmail_color_zeta    : #a17e92;
+
+
+.o_layout.o_airmail_theme {
+    background-color: @o_mm_airmail_color_alpha;
+
+    .o_mail_wrapper {
+        background: rgba(0,0,0,0);
+        background: transparent;
+        border: none;
+    }
+
+    // ===========   Components
+
+    .o_mail_snippet_general {
+        background-color: @o_mm_airmail_color_beta;
+        color: @o_mm_airmail_color_epsilon;
+
+        .btn.btn-primary {
+            color: @o_mm_airmail_color_beta;
+            background-color: @o_mm_airmail_color_gamma;
+        }
+
+        a, .o_mail_link {
+            color: @o_mm_airmail_color_delta;
+        }
+
+        .bg-beta {
+            background-color: @o_mm_airmail_color_gamma;
+
+            .btn.btn-primary {
+                color: @o_mm_airmail_color_beta;
+                background-color: @o_mm_airmail_color_zeta;
+            }
+
+            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+                color: @o_mm_airmail_color_beta;
+            }
+        }
+        .text-beta {
+            color: @o_mm_airmail_color_gamma;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_airmail_color_zeta;
+        }
+    }
+
+    // =========== Snippets
+
+    .o_mail_wrapper {
+        > div { // All snippets
+            margin-bottom: 16px;
+        }
+    }
+
+    .o_mail_wrapper {
+        .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+            margin-bottom: 0;
+
+            .o_mail_snippet_general {
+                background: rgba(0,0,0,0);
+                background: transparent;
+            }
+
+            .o_mail_h_padding {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            .o_mail_header_social {
+                margin-right: 0px;
+                a {
+                    color: darken(@o_mm_airmail_color_alpha, 40%);
+                }
+            }
+        }
+    }
+
+    .o_mail_block_event {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .o_mail_block_footer_separator {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .o_mail_block_image {
+        .o_mail_h_padding {
+            padding: 0;
+            .o_mail_col_mv {
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+            > img {
+                padding: 0;
+                margin-bottom: 15px;
+            }
+        }
+    }
+
+    .o_mail_block_footer_separator {
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+
+            .separator {
+                height: 3px;
+                background-color: darken(@o_mm_airmail_color_alpha, 10%);
+                border-bottom: 2px solid darken(white, 3%);
+            }
+        }
+    }
+
+    .o_mail_block_banner {
+    }
+
+    .o_mail_block_two_cols, .o_mail_block_three_cols {
+        @tmp-gap: 10px;
+
+        table {
+            width: 110%;
+            max-width: (600+(@tmp-gap*2));
+            margin: auto (@tmp-gap*-1);
+        }
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+        }
+        .o_mail_col_container {
+            padding: 0 0 (@tmp-gap*2);
+            margin: 0 @tmp-gap;
+            border-top: 1px solid darken(@o_mm_airmail_color_beta, 10%);
+            border-bottom: 1px solid darken(@o_mm_airmail_color_alpha, 5%);
+            background-color: @o_mm_airmail_color_beta;
+
+            > * {
+                padding: 0 (@tmp-gap*2);
+            }
+
+            img {
+                padding: 0!important;
+            }
+        }
+    }
+
+    .o_mail_block_footer_tag_line {
+        table.o_mail_h_padding {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    .o_mail_block_image_text {
+        .o_mail_img_container {
+            padding: 0
+        }
+    }
+
+    .o_mail_block_text_image {
+        .o_mail_img_container {
+            padding: 0
+        }
+    }
+
+    .o_mail_block_footer_social {
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+            margin-top: 30px;
+            border-top: 1px solid  darken(@o_mm_airmail_color_alpha, 10%);
+        }
+
+        .o_mail_footer_social {
+            border: none;
+            a {
+                color: darken(@o_mm_airmail_color_alpha, 40%);
+            }
+        }
+
+        .o_mail_footer_links a {
+            color: darken(@o_mm_airmail_color_alpha, 40%);
+        }
+
+        .o_mail_footer_copy {
+            font-weight: bold;
+            font-size: 9px;
+            color: darken(@o_mm_airmail_color_alpha, 30%);
+        }
+
+        &.o_mail_footer_social_left {
+            .o_mail_footer_description {
+                padding-left: 0;
+            }
+            .o_mail_footer_social {
+                padding-right: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/mass_mailing/static/src/css/themes/theme_default.less b/addons/mass_mailing/static/src/css/themes/theme_default.less
new file mode 100644
index 00000000000..55e9424001b
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_default.less
@@ -0,0 +1,284 @@
+// out: ../compiled/theme_default.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+// =======================================
+// ========== Mass Mailing "Theme Default"
+// =======================================
+
+
+// ===========   Variables
+
+// 'Default Theme' Palette
+@o_mm_def_color_alpha   : #f5f5f5;
+@o_mm_def_color_beta    : #ffffff;
+@o_mm_def_color_gamma   : #706482;
+@o_mm_def_color_delta   : #464646;
+@o_mm_def_color_epsilon : darken(@o_mm_def_color_gamma, 5%);
+@o_mm_def_color_zeta    : #706482;
+@o_mm_def_color_eta     : #87a6b5;
+
+
+// Assign 'Default Theme' Variables
+@o_mm_def_body_width    : 600px;
+@o_mm_def_body_bobile   : 480px;
+@o_mm_def_b_radius      : 2px;
+
+@o_mm_def_font          : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+@o_mm_def_text_color    : @o_mm_def_color_delta;
+
+@o_mm_def_btn_bg        : @o_mm_def_color_gamma;
+@o_mm_def_btn_text      : @o_mm_def_color_beta;
+
+
+// ===========   Editor
+
+#web_editor_inside_iframe {
+    #wrapwrap > main #editable_area {
+        background-color: transparent;
+    }
+}
+
+
+// ===========   Components
+
+.o_layout {
+    font-family: @o_mm_def_font;
+    color: lighten(@o_mm_def_text_color, 20%);
+    overflow: hidden;
+    width: 100%;
+    min-height: 100%;
+    background-color: @o_mm_def_color_alpha;
+    padding-bottom: 20px;
+
+    .o_mail_wrapper {
+        width: 100%;
+        max-width: @o_mm_def_body_width;
+        margin: auto;
+        border: 1px solid darken(@o_mm_def_color_alpha, 2%);
+        background-color: @o_mm_def_color_beta;
+    }
+}
+
+
+.o_mail_snippet_general {
+    width: 100%;
+    max-width: @o_mm_def_body_width;
+    margin: 0 auto;
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: @o_mm_def_text_color;
+    }
+
+
+    .btn.btn-primary {
+        -webkit-user-select: none;
+        color: @o_mm_def_btn_text;
+        border: none;
+        text-decoration: none;
+        font-weight: normal;
+        font-family: @o_mm_def_font;
+        cursor: pointer;
+        border-radius: @o_mm_def_b_radius;
+        background-color: @o_mm_def_btn_bg;
+    }
+
+    a, .btn.btn-link {
+        color: @o_mm_def_color_epsilon;
+        font-weight: bold;
+        text-decoration: none !important;
+
+        &:hover, &:focus, &:active {
+            text-decoration: none !important;
+        }
+    }
+
+    img {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+    }
+
+    .separator {
+        height: 2px;
+        background-color: @o_mm_def_color_alpha;
+    }
+
+    .bg-beta {
+        background-color: @o_mm_def_color_zeta;
+        color:  @o_mm_def_color_beta;
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: @o_mm_def_color_beta;
+        }
+    }
+    .text-beta {
+        color: @o_mm_def_color_zeta;
+    }
+
+    .bg-delta {
+        background-color: @o_mm_def_color_eta;
+    }
+
+    .bg-gray-lighter {
+        background-color: @o_mm_def_color_alpha;
+    }
+}
+
+
+// ===========   Snippets
+
+.o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+    .o_mail_logo_container {
+        img {
+            width: auto;
+        }
+    }
+    .o_mail_header_social {
+        margin-right: 20px;
+    }
+}
+
+.o_mail_block_header_text_social {
+    h3 {
+        font-weight: bold;
+    }
+}
+
+.o_mail_block_steps {
+    background-color: @o_mm_def_color_alpha;
+}
+
+.o_mail_block_two_cols, .o_mail_block_three_cols {
+    font-size: small;
+
+    .o_mail_col_container {
+        padding: 10px 20px;
+
+        h4 {
+            margin-top: 15px;
+        }
+    }
+}
+
+.o_mail_block_image_text, .o_mail_block_text_image {
+    font-size: small;
+}
+
+.o_mail_block_event {
+    margin-left: 20px;
+    margin-right: 20px;
+    .o_mail_snippet_general{
+        background: darken(@o_mm_def_color_alpha, 2%);
+    }
+}
+
+.o_mail_block_footer_separator {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.o_mail_block_comparison_table {
+    .separator {
+        height: 1px;
+        background-color: darken(@o_mm_def_color_alpha, 15%);
+    }
+}
+
+.o_mail_block_discount2 {
+    .o_code {
+        padding: 5px 10px;
+        background: @o_mm_def_color_alpha;
+        border-radius: 3px;
+        font-family: monospace;
+    }
+}
+
+.o_mail_block_footer_social {
+    .o_mail_table_styles {
+        border-top: 2px solid @o_mm_def_color_alpha;
+        padding-top: 20px;
+    }
+
+    .o_mail_footer_links {
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        .btn-link{
+            padding: 0;
+            font-size: 12px;
+        }
+    }
+
+    .o_mail_footer_copy {
+        font-size: 9px;
+        font-weight: bold;
+        color: lighten(@o_mm_def_text_color, 30%);
+    }
+
+    &.o_mail_footer_social_center {
+        .o_mail_footer_social, .o_mail_footer_links, .o_mail_footer_copy {
+            text-align: center;
+        }
+    }
+
+    &.o_mail_footer_social_left {
+        .o_mail_footer_description {
+            padding-left: 20px;
+        }
+        .o_mail_footer_social {
+            padding-right: 20px;
+            text-align: right;
+            vertical-align: top;
+
+            .btn-link{
+                padding: 0;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+// ===========   Typography
+
+
+.o_mail_display_coupon {
+    font-size: 50px;
+    line-height: 1;
+}
+
+/* ======================== MISC ====================== */
+
+.o_mail_h_padding {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.o_mail_v_padding {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.o_mail_no_margin {
+    margin: 0;
+
+    &.o_mail_display_coupon {
+        line-height: 1.1;
+    }
+}
+.o_mail_table_styles {
+    width: 100%;
+    border-collapse:separate;
+}
+
+// =========== Mobile
+
+@media screen and (max-width: @o_mm_def_body_bobile) {
+    .o_mail_col_mv {
+        display: block!important;
+        max-width: @o_mm_def_body_bobile!important;
+        width: 100%!important;
+    }
+
+    .o_mail_table_styles {
+        max-width: @o_mm_def_body_bobile!important;
+        width: 100%!important;
+    }
+}
diff --git a/addons/mass_mailing/static/src/css/themes/theme_newsletter.less b/addons/mass_mailing/static/src/css/themes/theme_newsletter.less
new file mode 100644
index 00000000000..7962c9bdfc3
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_newsletter.less
@@ -0,0 +1,41 @@
+// out: ../compiled/theme_newsletter.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+
+// ===========   Variables
+
+// 'Default Theme' Palette
+@o_mm_news_color_alpha   : #f5f5f5;
+@o_mm_news_color_beta    : #ffffff;
+@o_mm_news_color_gamma   : #1cc1a9;
+@o_mm_news_color_delta   : #464646;
+@o_mm_news_color_epsilon : darken(@o_mm_news_color_gamma, 5%);
+@o_mm_news_color_zeta    : #906784;
+@o_mm_news_color_eta     : #87a6b5;
+
+
+// ===========   Components
+
+.o_layout.o_newsletter_theme {
+    .o_mail_snippet_general {
+        .btn.btn-primary {
+            color: @o_mm_news_color_beta;
+            background-color: @o_mm_news_color_gamma;
+        }
+        a, .btn.btn-link {
+            color: @o_mm_news_color_epsilon;
+        }
+        .bg-beta {
+            background-color: @o_mm_news_color_zeta;
+            color:  @o_mm_news_color_beta;
+        }
+        .text-beta {
+            color: @o_mm_news_color_zeta;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_news_color_eta;
+        }
+    }
+}
+
diff --git a/addons/mass_mailing/static/src/css/themes/theme_resto.less b/addons/mass_mailing/static/src/css/themes/theme_resto.less
new file mode 100644
index 00000000000..2b46dc2e4b7
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_resto.less
@@ -0,0 +1,111 @@
+// out: ../compiled/theme_resto.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+@o_mm_resto_color_alpha   : #f0ede0;
+@o_mm_resto_color_beta    : #ffffff;
+@o_mm_resto_color_gamma   : #E96D1F;
+@o_mm_resto_color_delta   : #712b22;
+@o_mm_resto_color_epsilon : darken(@o_mm_resto_color_gamma, 5%);
+@o_mm_resto_color_zeta    : #795745;
+
+#web_editor_inside_iframe.o_resto_theme  {
+    background-color: @o_mm_resto_color_alpha;
+}
+
+.o_layout.o_resto_theme {
+    background-color: @o_mm_resto_color_alpha;
+
+    .o_mail_wrapper {
+        border: none;
+        background-color:transparent;
+    }
+
+
+    // ===========   Components
+
+    .o_mail_snippet_general {
+        background: rgba(0,0,0,0);
+        background: transparent;
+        color: @o_mm_resto_color_delta;
+
+        .btn.btn-primary {
+            color: @o_mm_resto_color_beta;
+            background-color: @o_mm_resto_color_gamma;
+        }
+
+        a, .o_mail_link {
+            font-weight: normal;
+            color: @o_mm_resto_color_epsilon;
+        }
+
+        .bg-beta {
+            background-color: @o_mm_resto_color_zeta;
+            color: @o_mm_resto_color_beta;
+
+            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+                color: @o_mm_resto_color_beta;
+            }
+        }
+
+        .text-beta {
+            color: @o_mm_resto_color_zeta;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_resto_color_gamma;
+            color: @o_mm_resto_color_beta;
+
+            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+                color: @o_mm_resto_color_beta;
+            }
+        }
+
+        .text-delta {
+            color: @o_mm_resto_color_epsilon;
+        }
+
+        .separator {
+            background-color: lighten(@o_mm_resto_color_zeta, 20%);
+        }
+    }
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        color: darken(@o_mm_resto_color_zeta, 10%);
+        font-weight: bold;
+    }
+
+    // ===========   Snippets
+    .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+        .o_mail_snippet_general {
+            border-bottom: 5px solid @o_mm_resto_color_gamma;
+        }
+
+        .o_mail_header_social {
+            a {
+                color: @o_mm_resto_color_gamma;
+            }
+        }
+    }
+
+    .o_mail_block_steps {
+        border-top: 2px solid @o_mm_resto_color_gamma;
+        background: @o_mm_resto_color_beta;
+    }
+
+    .o_mail_block_event {
+        .o_mail_snippet_general{
+            background: darken(@o_mm_resto_color_beta, 2%);
+        }
+    }
+    .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo, .o_mail_block_steps, .o_mail_block_event, .o_mail_block_banner {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    .o_mail_block_footer_social {
+        .o_mail_table_styles {
+            border-top: 2px solid lighten(@o_mm_resto_color_zeta, 20%);
+            padding-top: 20px;
+        }
+    }
+}
diff --git a/addons/mass_mailing/static/src/css/themes/theme_tech.less b/addons/mass_mailing/static/src/css/themes/theme_tech.less
new file mode 100644
index 00000000000..dfb49eab2f9
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/themes/theme_tech.less
@@ -0,0 +1,167 @@
+// out: ../compiled/theme_tech.css, sourcemap: false, compress: false
+// lessc@1.4.2
+
+
+@o_mm_tech_color_alpha   : #333;
+@o_mm_tech_color_beta    : white;
+@o_mm_tech_color_gamma   : #59cdcd;
+@o_mm_tech_color_delta   : #bdbdbd;
+@o_mm_tech_color_epsilon : black;
+@o_mm_tech_color_zeta    : #a17e92;
+
+
+
+.o_layout.o_tech_theme {
+    background-color: @o_mm_tech_color_alpha;
+
+    .o_mail_wrapper {
+        background-color: transparent;
+        color: @o_mm_tech_color_delta;
+        border: none;
+    }
+
+    // ===========   Components
+
+    .o_mail_snippet_general {
+
+        .btn.btn-primary {
+            color: @o_mm_tech_color_beta;
+            background-color: @o_mm_tech_color_gamma;
+        }
+        .o_mail_full_width_padding {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+        a, .o_mail_link {
+            font-weight: normal;
+            color: @o_mm_tech_color_gamma;
+        }
+
+        .bg-beta {
+            background-color: @o_mm_tech_color_gamma;
+
+            .btn.btn-primary {
+                color: @o_mm_tech_color_beta;
+                background-color: @o_mm_tech_color_zeta;
+            }
+        }
+        .text-beta {
+            color: @o_mm_tech_color_gamma;
+        }
+
+        .bg-delta {
+            background-color: @o_mm_tech_color_zeta;
+        }
+
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: darken(@o_mm_tech_color_beta, 10%);
+        }
+    }
+
+    // =========== Snippets
+
+    .o_mail_block_header_social, .o_mail_block_header_text_social, .o_mail_block_header_logo {
+        .o_mail_snippet_general {
+            margin-top: 10px;
+            margin-bottom: 25px;
+            padding-left: 20px;
+            padding-right: 20px;
+
+            > table {
+                max-width: 560px;
+                border-bottom: 1px solid darken(@o_mm_tech_color_beta, 60%);
+            }
+        }
+
+        .o_mail_h_padding.o_mail_v_padding {
+            padding: 10px 0 5px;
+        }
+
+        .o_mail_header_social {
+            margin-right: 0px;
+            a {
+                color: darken(@o_mm_tech_color_beta, 40%);
+            }
+        }
+    }
+
+    .o_mail_block_footer_separator {
+        .separator {
+            height: 1px;
+            background-color: darken(@o_mm_tech_color_beta, 60%);
+        }
+    }
+
+    .o_mail_block_event {
+        margin-left: 20px;
+        margin-right: 20px;
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: @o_mm_tech_color_alpha;
+        }
+    }
+
+    .o_mail_block_discount2 {
+        .o_code {
+            color: @o_mm_tech_color_alpha;
+        }
+    }
+
+    .o_mail_block_footer_separator {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .o_mail_block_steps {
+        background-color: transparent;
+
+        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+            color: @o_mm_tech_color_alpha;
+        }
+
+        .o_mail_full_width_padding > tbody > tr  {
+            background-color: @o_mm_tech_color_beta;
+            color: @o_mm_tech_color_alpha;
+        }
+    }
+
+    .o_mail_block_footer_tag_line {
+    }
+
+    .o_mail_block_footer_social {
+        .o_mail_snippet_general {
+            background: rgba(0,0,0,0);
+            background: transparent;
+        }
+
+        .o_mail_table_styles {
+            border-top: none;
+        }
+
+        .o_mail_footer_social {
+            a {
+                color: darken(@o_mm_tech_color_beta, 40%);
+            }
+        }
+
+        .o_mail_footer_links a {
+            color: darken(@o_mm_tech_color_beta, 40%);
+        }
+
+        .o_mail_footer_copy {
+            font-weight: bold;
+            font-size: 9px;
+            color: darken(@o_mm_tech_color_beta, 30%);
+        }
+
+        &.o_mail_footer_social_left {
+            .o_mail_footer_description {
+                padding-left: 0;
+            }
+            .o_mail_footer_social {
+                padding-right: 0;
+            }
+        }
+    }
+}
\ No newline at end of file