[IMP] web_editor: lazy load the wysiwyg

Issue: wysiwyg asset slow down the loading of the website, error
inadvertently introduced: https://github.com/odoo/odoo/pull/29775

The assets are now loaded assynchroneously, when the editor is needed,
its assets will be loaded.

closes odoo/odoo#30700

9 files changed, 664 insertions, 660 deletions

diff --git a/addons/website/static/src/js/editor/editor_menu.js b/addons/website/static/src/js/editor/editor_menu.js
index 5d7621b91e3..19cffd3f3aa 100644
--- a/addons/website/static/src/js/editor/editor_menu.js
+++ b/addons/website/static/src/js/editor/editor_menu.js
@@ -4,10 +4,17 @@ odoo.define('website.editor.menu', function (require) {
 var Dialog = require('web.Dialog');
 var Widget = require('web.Widget');
 var core = require('web.core');
-var WysiwygMultizone = require('web_editor.wysiwyg.multizone');
+var Wysiwyg = require('web_editor.wysiwyg.root');
 
 var _t = core._t;
 
+var WysiwygMultizone = Wysiwyg.extend({
+    assetLibs: Wysiwyg.prototype.assetLibs.concat(['website.compiled_assets_wysiwyg']),
+    _getWysiwygContructor: function () {
+        return odoo.__DEBUG__.services['web_editor.wysiwyg.multizone'];
+    }
+});
+
 var EditorMenu = Widget.extend({
     template: 'website.editorbar',
     xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
diff --git a/addons/website/static/src/js/editor/editor_menu_translate.js b/addons/website/static/src/js/editor/editor_menu_translate.js
index c52c5e140fc..d390c85a949 100644
--- a/addons/website/static/src/js/editor/editor_menu_translate.js
+++ b/addons/website/static/src/js/editor/editor_menu_translate.js
@@ -5,7 +5,7 @@ require('web.dom_ready');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var localStorage = require('web.local_storage');
-var WysiwygTranslate = require('web_editor.wysiwyg.multizone.translate');
+var Wysiwyg = require('web_editor.wysiwyg.root');
 var EditorMenu = require('website.editor.menu');
 
 var _t = core._t;
@@ -46,6 +46,13 @@ var TranslatorInfoDialog = Dialog.extend({
     },
 });
 
+var WysiwygTranslate = Wysiwyg.extend({
+    assetLibs: Wysiwyg.prototype.assetLibs.concat(['website.compiled_assets_wysiwyg']),
+    _getWysiwygContructor: function () {
+        return odoo.__DEBUG__.services['web_editor.wysiwyg.multizone.translate'];
+    }
+});
+
 var TranslatorMenu = EditorMenu.extend({
     LOCATION_SEARCH: 'edit_translations',
 
diff --git a/addons/website/static/src/js/editor/wysiwyg_multizone.js b/addons/website/static/src/js/editor/wysiwyg_multizone.js
index 1441a7ce3e3..1d264eff436 100644
--- a/addons/website/static/src/js/editor/wysiwyg_multizone.js
+++ b/addons/website/static/src/js/editor/wysiwyg_multizone.js
@@ -6,7 +6,7 @@ var DropzonePlugin = require('web_editor.wysiwyg.plugin.dropzone');
 var HelperPlugin = require('web_editor.wysiwyg.plugin.helper');
 var TextPlugin = require('web_editor.wysiwyg.plugin.text');
 var HistoryPlugin = require('web_editor.wysiwyg.plugin.history');
-var Wysiwyg = require('web_editor.wysiwyg');
+var Wysiwyg = require('web_editor.wysiwyg.snippets');
 
 var _t = core._t;
 
@@ -70,8 +70,6 @@ DropzonePlugin.include({
 
 
 
-
-
 /**
  * HtmlEditor
  * Intended to edit HTML content. This widget uses the Wysiwyg editor
diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/js/menu/content.js
index d3aa045920c..9bb2f996595 100644
--- a/addons/website/static/src/js/menu/content.js
+++ b/addons/website/static/src/js/menu/content.js
@@ -412,7 +412,6 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({
         }
         return this._super.apply(this, arguments);
     },
-
 });
 
 var SelectEditMenuDialog = weWidgets.Dialog.extend({
diff --git a/addons/website/static/src/js/menu/edit.js b/addons/website/static/src/js/menu/edit.js
index bc9e4646135..a3e68873a7b 100644
--- a/addons/website/static/src/js/menu/edit.js
+++ b/addons/website/static/src/js/menu/edit.js
@@ -11,6 +11,8 @@ var _t = core._t;
  * Adds the behavior when clicking on the 'edit' button (+ editor interaction)
  */
 var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
+    assetLibs: ['web_editor.compiled_assets_wysiwyg', 'website.compiled_assets_wysiwyg'],
+
     xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
     actions: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.prototype.actions, {
         edit: '_startEditMode',
diff --git a/addons/website/static/src/js/menu/translate.js b/addons/website/static/src/js/menu/translate.js
index a94d93d1d75..2359987957f 100644
--- a/addons/website/static/src/js/menu/translate.js
+++ b/addons/website/static/src/js/menu/translate.js
@@ -6,6 +6,8 @@ var TranslatorMenu = require('website.editor.menu.translate');
 var websiteNavbarData = require('website.navbar');
 
 var TranslatePageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
+    assetLibs: ['web_editor.compiled_assets_wysiwyg', 'website.compiled_assets_wysiwyg'],
+
     actions: _.extend({}, websiteNavbarData.WebsiteNavbar.prototype.actions || {}, {
         edit_master: '_goToMasterPage',
         translate: '_startTranslateMode',
diff --git a/addons/website/static/src/js/tours/rte.js b/addons/website/static/src/js/tours/rte.js
index bdc676f4b33..2fd7aab345c 100644
--- a/addons/website/static/src/js/tours/rte.js
+++ b/addons/website/static/src/js/tours/rte.js
@@ -4,7 +4,7 @@ odoo.define('website.tour.rte', function (require) {
 var ajax = require('web.ajax');
 var session = require('web.session');
 var tour = require('web_tour.tour');
-var Wysiwyg = require('web_editor.wysiwyg');
+var Wysiwyg = require('web_editor.wysiwyg.root');
 
 var domReady = $.Deferred();
 $(domReady.resolve.bind(domReady));
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index fb1c90666a8..aa5cba39e00 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -1,359 +1,3 @@
-// TOP BAR (EDIT)
-#web_editor-top-edit {
-    height: $o-navbar-height;
-    background-color: $o-we-color-dark;
-    z-index: $zindex-modal - 9;
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    width: auto;
-    white-space: nowrap;
-
-    background-color: rgba(0, 0, 0, 0);
-    transition: background-color 400ms $o-we-md-ease 0s;
-    font-family: $o-we-font-family;
-
-    form.navbar-form {
-        height: $o-navbar-height;
-        z-index: 1060;
-        margin: 0;
-        padding: 0;
-        @include o-position-absolute($top: -1px, $right: -$o-we-sidebar-width);
-        transition: right 0.4s $o-we-md-ease 0s;
-        border-left: 1px solid $o-we-color-divider;
-        background-color: inherit;
-
-        .btn-group {
-            height: 100%;
-        }
-
-        .btn {
-            height: 100%;
-            margin: 0;
-            padding: 10px;
-            line-height: 1.2;
-            font-size: 13px;
-            font-family: $o-we-font-family;
-
-            transition: all 0.3s ease 0s;
-            border: none;
-            border-radius: 0;
-
-            .fa {
-                margin-right: $grid-gutter-width/4;
-
-                &.fa-times {
-                    color: $o-we-color-danger;
-                }
-            }
-
-            &.btn-primary {
-                @include button-variant($o-brand-odoo, $o-brand-odoo);
-            }
-
-            &.btn-secondary {
-                @include button-variant($o-we-color-dark, $o-we-color-dark);
-
-                &:hover {
-                    background: rgba(black, 0.5);
-                }
-            }
-
-            &:focus,
-            &:active,
-            &:focus:active {
-                outline: none;
-            }
-        }
-
-        .dropdown-menu {
-            left: auto;
-            right: 0;
-        }
-    }
-}
-
-// Translations
-.oe_translate_examples li {
-    margin: 10px;
-    padding: 4px;
-}
-
-html[lang]>body.editor_enable [data-oe-translation-state] {
-    background: rgba($o-we-content-to-translate-color, 0.5) !important;
-
-    &[data-oe-translation-state="translated"] {
-        background: rgba($o-we-translated-content-color, 0.5) !important;
-    }
-
-    &.o_dirty {
-        background: rgba($o-we-translated-content-color, 0.25) !important;
-    }
-}
-
-// NOTE EDITOR
-
-// SNIPPET PANEL
-#oe_snippets {
-    @include o-w-preserve-btn;
-    @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
-    width: $o-we-sidebar-width;
-
-    border-right: 1px solid $o-we-color-divider;
-    transition: left 400ms $o-we-md-ease 0s;
-    background-image: linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
-
-    #snippets_menu {
-        color: #999999;
-        background: $o-we-color-dark;
-        font-family: $o-we-font-family;
-        height: $o-navbar-height;
-        line-height: $o-navbar-height;
-    }
-
-    #o_scroll {
-        .o_panel_header {
-            color: #999999;
-        }
-    }
-}
-
-.oe_snippet {
-    background-color: $o-we-color-normal;
-
-    .oe_snippet_thumbnail {
-        .oe_snippet_thumbnail_img {
-            border: 1px solid $o-we-color-normal;
-        }
-
-        img.oe_snippet_thumbnail_img {}
-
-        .oe_snippet_thumbnail_title {
-            border: 1px solid $o-we-color-dark;
-            color: $o-we-color-text-light;
-        }
-
-        &:hover .oe_snippet_thumbnail_title {
-            color: $o-we-color-text-lighter;
-        }
-    }
-}
-
-// SNIPPET OPTIONS
-.colorpicker {
-    .o_colorpicker_sections {
-        .note-color-palette>div {
-            color: $o-we-color-text-light;
-        }
-    }
-
-    .o_colorpicker_section {
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        >button {
-
-            &:hover,
-            &.selected {
-                box-shadow: 0px 0px 2px 2px $o-we-color-light;
-            }
-
-            &[data-event="foreColor"] {
-                background-color: $o-we-color-normal;
-
-                &:before {
-                    background-color: rgba(white, 0.3);
-                }
-            }
-        }
-    }
-
-    .note-palette-title {
-        color: $o-we-color-text-light;
-    }
-
-    .palette-reset {
-        .note-color-reset {
-            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
-
-            &:hover {
-                color: $o-we-color-danger;
-            }
-        }
-    }
-}
-
-// DROPZONES
-#wrapwrap .oe_drop_zone {
-    &.oe_insert {
-        height: $o-we-dropzone-size;
-        margin: (-$o-we-dropzone-size/2) 0;
-
-        &:after {
-            border-bottom: $o-we-dropzone-border;
-        }
-
-        &.oe_vertical {
-            width: $o-we-dropzone-size;
-            margin: 0 (-$o-we-dropzone-size/2);
-
-            &:after {
-                border-right: $o-we-dropzone-border;
-            }
-        }
-    }
-}
-
-// MANIPULATORS
-#oe_manipulators {
-
-    // SNIPPET MANIPULATORS
-    .oe_overlay {
-
-        // OVERLAY OPTIONS
-        >.oe_overlay_options {
-            font-family: $o-we-font-family;
-
-            >.btn-group {
-                .btn {
-                    width: $o-we-overlay-option-size;
-                    height: $o-we-overlay-option-size;
-                    border: 1px solid $o-we-color-dark;
-                    line-height: #{$o-we-overlay-option-size - 2px};
-
-                    color: $o-we-color-text-light;
-                    background-color: $o-we-color-light;
-
-                    &:hover {
-                        background-color: lighten($o-we-color-dark, 10%);
-                    }
-
-                    &.oe_snippet_remove {
-                        background-color: $o-we-color-danger;
-                        border-color: darken($o-we-color-danger, 20%);
-
-                        &:hover {
-                            background-color: darken($o-we-color-danger, 20%);
-                        }
-                    }
-
-                    >.fa {
-                        color: $o-we-color-text-light;
-                    }
-                }
-
-                // CUSTOMIZE MENU BUTTON
-                >.oe_options {
-                    .btn {
-                        background-color: $o-we-color-dark;
-                        color: $o-we-color-text-light;
-
-                        &:hover,
-                        &:active,
-                        &:focus {
-                            background-color: lighten($o-we-color-dark, 5%);
-                            border-color: lighten($o-we-color-dark, 10%);
-                        }
-
-                        &:before,
-                        &:after {
-                            background-color: $o-we-color-text-light;
-                        }
-                    }
-
-                    // Open menu
-                    &.show .btn {
-                        // background-color: $o-we-color-light;
-                    }
-
-                    // CUSTOMIZE MENU
-                    .dropdown-menu {
-                        border: 1px solid $o-we-color-dark;
-                        background-color: $o-we-color-light;
-
-                        .dropdown-item {
-                            color: $o-we-color-text-light;
-
-                            &:hover {
-                                background-color: fade-out($o-we-color-dark, 0.5);
-                            }
-
-                            &.active {
-                                background-color: fade-out($o-we-color-dark, 0.5);
-                            }
-                        }
-
-                        .dropdown-header {
-                            color: wheat;
-
-                            &.o_parent_editor_header {
-                                color: wheat;
-                            }
-                        }
-
-                        .dropdown-submenu {
-                            &::before {
-                                border-left-color: $o-we-color-text-light;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &.o_top_cover>.oe_overlay_options {
-            top: $o-we-handle-border-width;
-            right: $o-we-handle-border-width;
-        }
-
-    }
-}
-
-// Animations
-@keyframes fadeInDownSmall {
-    0% {
-        opacity: 0;
-        transform: translate(0, -5px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-}
-
-@keyframes fadeInOut {
-    0% {
-        opacity: 0;
-    }
-
-    25% {
-        opacity: 1;
-    }
-
-    75% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes inputHighlighter {
-    from {
-        background: $o-brand-primary;
-    }
-
-    to {
-        width: 0;
-        background: transparent;
-    }
-}
-
 // INPUTS
 .o_switch {
     display: flex;
@@ -369,11 +13,10 @@ html[lang]>body.editor_enable [data-oe-translation-state] {
             box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color, 10%);
             border-radius: 100rem;
             height: $o-we-switch-size;
-            width: $o-we-switch-size * 1.81;
-            margin-right: 0.51em;
+            width: $o-we-switch-size * 1.8;
+            margin-right: 0.5em;
             display: inline-block;
             transition: all 0.3s $o-we-md-ease;
-            font-size: 15px;
 
             &:after {
                 content: "";
@@ -517,297 +160,3 @@ html[lang]>body.editor_enable [data-oe-translation-state] {
         }
     }
 }
-
-// MODALS
-body .modal {
-
-    // BACKGROUND IMAGE OPTIONS
-    .o_bg_img_opt_modal .o_bg_img_opt {
-        margin: 15px 0;
-
-        .help-control {
-            @include o-position-absolute(15px, 15px);
-        }
-
-        .help {
-            margin: 15px 0;
-
-            .simulator {
-                position: relative;
-                float: left;
-                margin-right: 15px;
-                width: 120px;
-                height: 100px;
-
-                .bg {
-                    @include o-position-absolute(0, 0, 0, 0);
-                    border: 1px dotted #888787;
-                    background-image: url(/web/image);
-                    background-position: center center;
-                    background-size: cover;
-                }
-
-                .el {
-                    @include o-position-absolute(10px, 0, 10px, 0);
-                    border: 1px solid #222;
-                }
-
-                &.contain_bg {
-                    .bg {
-                        @include o-position-absolute(0, 12px, 20px, 12px);
-                    }
-
-                    .el {
-                        @include o-position-absolute(0, 0, 20px, 0);
-                    }
-                }
-            }
-
-            +* {
-                clear: left;
-            }
-        }
-
-        .o_bg_img_opt_cover_edition {
-            @include o-we-preview-box;
-            padding: 0 25px 25px 25px;
-
-            h6 {
-                color: white;
-                font-weight: bold;
-            }
-
-            .o_bg_img_opt_object {
-                position: relative;
-                background: white;
-                min-height: 10px;
-                @include o-we-preview-content;
-
-                >img {
-                    cursor: crosshair;
-                    border-top: 1px solid #5A5A5A;
-                    border-bottom: 1px solid #111;
-                }
-
-                &:hover .o_focus_point:before {
-                    opacity: 0.5;
-                }
-            }
-
-            .o_bg_img_opt_ui_info {
-                animation: fadeInOut 2s ease forwards;
-                @include o-position-absolute($bottom: 1px, $right: 0);
-                display: block;
-                padding: 3px 13px;
-                background-color: rgba(255, 255, 255, 0.8);
-                color: #333;
-                text-align: center;
-                font-weight: bold;
-                pointer-events: none;
-
-                span {
-                    font-weight: normal;
-                }
-
-                .o_x {
-                    margin-right: 10px
-                }
-            }
-
-            .grid {
-                @include o-position-absolute($top: 33.33%, $left: 0);
-                display: block;
-                width: 100%;
-                height: 1px;
-                background: fade-out(lighten($o-brand-primary, 30%), 0.5);
-                pointer-events: none;
-
-                &.grid-2 {
-                    top: 66.66%
-                }
-
-                &.grid-3 {
-                    top: 0;
-                    left: 33.33%;
-                    width: 1px;
-                    height: 100%
-                }
-
-                &.grid-4 {
-                    top: 0;
-                    left: 66.66%;
-                    width: 1px;
-                    height: 100%
-                }
-            }
-
-            .o_focus_point {
-                @include o-position-absolute($top: 0, $left: 0);
-                width: 30px;
-                height: 30px;
-                border: 2px solid white;
-                border-radius: 100%;
-                margin-top: -15px;
-                margin-left: -15px;
-                box-shadow: 0 0 1px #333;
-                pointer-events: none;
-
-                &.o_with_transition {
-                    transition: all 0.2s ease 0s;
-                }
-
-                &:before {
-                    pointer-events: none;
-                    content: "";
-                    display: block;
-                    width: 100px;
-                    height: 100px;
-                    margin-top: -37px;
-                    margin-left: -37px;
-                    border: 1px solid #EAEAEA;
-                    background: rgba(247, 76, 76, 0);
-                    border-radius: 100em;
-                    opacity: 1;
-                    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
-                    transition: opacity 0.2s ease 0s;
-                }
-            }
-        }
-    }
-}
-
-// editor_enable
-
-body.editor_enable {
-    overflow: hidden;
-    padding-top: 0 !important;
-
-    #web_editor-top-edit {
-        background-color: $o-we-color-dark;
-
-        form.navbar-form {
-            right: 0;
-        }
-    }
-
-    #wrapwrap {
-        height: calc(100vh - #{$o-navbar-height});
-        padding-top: 0px;
-
-        .btn {
-            -webkit-user-select: none;
-        }
-    }
-}
-
-.wysiwyg_multizone.note-editor {
-    &>.note-toolbar-wrapper .note-toolbar {
-        height: $o-navbar-height;
-
-        .btn {
-            height: $o-navbar-height;
-        }
-    }
-
-    &>.note-statusbar {
-        display: none;
-    }
-
-    &>.note-editing-area {
-        overflow: visible;
-    }
-}
-
-.wysiwyg_multizone.note-popover.popover {
-    border-width: 0 1px;
-
-    .popover-content .btn {
-        height: $o-navbar-height;
-    }
-}
-
-.wysiwyg_multizone.note-popover,
-.wysiwyg_multizone.note-editor>.note-toolbar-wrapper .note-toolbar {
-    background-color: $o-we-color-dark;
-
-    .btn {
-        background-color: $o-we-color-dark;
-        color: $o-we-color-text-normal;
-        border: none;
-        padding: 0.0625rem 0.3125rem !important; // force this because of themes
-
-        >.fa {
-            color: $o-we-color-text-normal;
-        }
-
-        &:hover {
-            color: $o-we-color-text-light;
-
-            >.fa {
-                color: $o-we-color-text-light;
-            }
-        }
-
-        &.active {
-            background-color: $o-we-color-dark;
-            color: $o-we-color-text-light;
-
-            >.fa {
-                color: $o-we-color-text-light;
-            }
-        }
-    }
-
-    >.btn-group {
-        margin-top: 0;
-
-        &.show,
-        .btn-group.show {
-            .dropdown-toggle {
-                border-top: 2px solid white;
-                background-color: $o-we-color-darker;
-                color: white;
-                box-shadow: none;
-
-                >.fa,
-                >span {
-                    color: white;
-                }
-            }
-        }
-    }
-
-    .dropdown-menu {
-        margin: 0;
-        border-radius: 0;
-        background-color: $o-we-color-darker;
-        color: $o-we-color-text-normal;
-        white-space: normal;
-
-        .dropdown-item {
-            width: 100%;
-            color: $o-we-color-text-light;
-
-            >.fa {
-                color: $o-we-color-text-light;
-            }
-
-            &:hover {
-                background-color: $o-we-tab-active-bg;
-                color: white;
-
-                >.fa {
-                    color: white;
-                }
-            }
-        }
-    }
-
-    .note-para .dropdown-menu {
-        min-width: 147px;
-    }
-
-    .note-style .dropdown-item * {
-        color: $o-we-color-text-light;
-    }
-}
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
new file mode 100644
index 00000000000..bed3805eb02
--- /dev/null
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -0,0 +1,640 @@
+body.editor_enable {
+    overflow: hidden;
+    padding-top: 0 !important;
+
+    // TOP BAR (EDIT)
+    #web_editor-top-edit {
+        height: $o-navbar-height;
+        background-color: $o-we-color-dark;
+        z-index: $zindex-modal - 9;
+        position: fixed;
+        top: 0px;
+        right: 0px;
+        width: auto;
+        white-space: nowrap;
+
+        background-color: rgba(0, 0, 0, 0);
+        transition: background-color 400ms $o-we-md-ease 0s;
+        font-family: $o-we-font-family;
+
+        form.navbar-form {
+            height: $o-navbar-height;
+            z-index: 1060;
+            margin: 0;
+            padding: 0;
+            position: absolute;
+            top: -1px;
+            right: 0;
+            transition: right 0.4s $o-we-md-ease 0s;
+            border-left: 1px solid $o-we-color-divider;
+            background-color: inherit;
+
+            .btn-group {
+                height: 100%;
+            }
+
+            .btn {
+                height: 100%;
+                margin: 0;
+                padding: 10px;
+                line-height: 1.2;
+                font-size: 13px;
+                font-family: $o-we-font-family;
+
+                transition: all 0.3s ease 0s;
+                border: none;
+                border-radius: 0;
+
+                .fa {
+                    margin-right: $grid-gutter-width/4;
+
+                    &.fa-times {
+                        color: $o-we-color-danger;
+                    }
+                }
+
+                &.btn-primary {
+                    @include button-variant($o-brand-odoo, $o-brand-odoo);
+                }
+
+                &.btn-secondary {
+                    @include button-variant($o-we-color-dark, $o-we-color-dark);
+
+                    &:hover {
+                        background: rgba(black, 0.5);
+                    }
+                }
+
+                &:focus,
+                &:active,
+                &:focus:active {
+                    outline: none;
+                }
+            }
+
+            .dropdown-menu {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+
+    #wrapwrap {
+        height: calc(100vh - #{$o-navbar-height});
+        padding-top: 0px;
+
+        .btn {
+            -webkit-user-select: none;
+        }
+    }
+
+    // Translations
+    .oe_translate_examples li {
+        margin: 10px;
+        padding: 4px;
+    }
+
+    html[lang]>body.editor_enable [data-oe-translation-state] {
+        background: rgba($o-we-content-to-translate-color, 0.5) !important;
+
+        &[data-oe-translation-state="translated"] {
+            background: rgba($o-we-translated-content-color, 0.5) !important;
+        }
+
+        &.o_dirty {
+            background: rgba($o-we-translated-content-color, 0.25) !important;
+        }
+    }
+
+    // NOTE EDITOR
+
+    // SNIPPET PANEL
+    #oe_snippets {
+        @include o-w-preserve-btn;
+        @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
+        width: $o-we-sidebar-width;
+
+        border-right: 1px solid $o-we-color-divider;
+        transition: left 400ms $o-we-md-ease 0s;
+        background-image: linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
+
+        #snippets_menu {
+            color: #999999;
+            background: $o-we-color-dark;
+            font-family: $o-we-font-family;
+            height: $o-navbar-height;
+            line-height: $o-navbar-height;
+        }
+
+        #o_scroll {
+            .o_panel_header {
+                color: #999999;
+            }
+        }
+    }
+
+    .oe_snippet {
+        background-color: $o-we-color-normal;
+
+        .oe_snippet_thumbnail {
+            .oe_snippet_thumbnail_img {
+                border: 1px solid $o-we-color-normal;
+            }
+
+            img.oe_snippet_thumbnail_img {}
+
+            .oe_snippet_thumbnail_title {
+                border: 1px solid $o-we-color-dark;
+                color: $o-we-color-text-light;
+            }
+
+            &:hover .oe_snippet_thumbnail_title {
+                color: $o-we-color-text-lighter;
+            }
+        }
+    }
+
+    // SNIPPET OPTIONS
+    .colorpicker {
+        .o_colorpicker_sections {
+            .note-color-palette>div {
+                color: $o-we-color-text-light;
+            }
+        }
+
+        .o_colorpicker_section {
+            &:after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+
+            >button {
+
+                &:hover,
+                &.selected {
+                    box-shadow: 0px 0px 2px 2px $o-we-color-light;
+                }
+
+                &[data-event="foreColor"] {
+                    background-color: $o-we-color-normal;
+
+                    &:before {
+                        background-color: rgba(white, 0.3);
+                    }
+                }
+            }
+        }
+
+        .note-palette-title {
+            color: $o-we-color-text-light;
+        }
+
+        .palette-reset {
+            .note-color-reset {
+                color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
+
+                &:hover {
+                    color: $o-we-color-danger;
+                }
+            }
+        }
+    }
+
+    // DROPZONES
+    #wrapwrap .oe_drop_zone {
+        &.oe_insert {
+            height: $o-we-dropzone-size;
+            margin: (-$o-we-dropzone-size/2) 0;
+
+            &:after {
+                border-bottom: $o-we-dropzone-border;
+            }
+
+            &.oe_vertical {
+                width: $o-we-dropzone-size;
+                margin: 0 (-$o-we-dropzone-size/2);
+
+                &:after {
+                    border-right: $o-we-dropzone-border;
+                }
+            }
+        }
+    }
+
+    // MANIPULATORS
+    #oe_manipulators {
+
+        // SNIPPET MANIPULATORS
+        .oe_overlay {
+
+            // OVERLAY OPTIONS
+            >.oe_overlay_options {
+                font-family: $o-we-font-family;
+
+                >.btn-group {
+                    .btn {
+                        height: $o-we-overlay-option-size;
+                        border: 1px solid $o-we-color-dark;
+                        line-height: #{$o-we-overlay-option-size - 2px};
+
+                        color: $o-we-color-text-light;
+                        background-color: $o-we-color-light;
+
+                        &:hover {
+                            background-color: lighten($o-we-color-dark, 10%);
+                        }
+
+                        &.oe_snippet_remove {
+                            background-color: $o-we-color-danger;
+                            border-color: darken($o-we-color-danger, 20%);
+
+                            &:hover {
+                                background-color: darken($o-we-color-danger, 20%);
+                            }
+                        }
+
+                        >.fa {
+                            color: $o-we-color-text-light;
+                        }
+                    }
+
+                    // CUSTOMIZE MENU BUTTON
+                    >.oe_options {
+                        .btn {
+                            background-color: $o-we-color-dark;
+                            color: $o-we-color-text-light;
+
+                            &:hover,
+                            &:active,
+                            &:focus {
+                                background-color: lighten($o-we-color-dark, 5%);
+                                border-color: lighten($o-we-color-dark, 10%);
+                            }
+
+                            &:before,
+                            &:after {
+                                background-color: $o-we-color-text-light;
+                            }
+                        }
+
+                        // Open menu
+                        &.show .btn {
+                            // background-color: $o-we-color-light;
+                        }
+
+                        // CUSTOMIZE MENU
+                        .dropdown-menu {
+                            border: 1px solid $o-we-color-dark;
+                            background-color: $o-we-color-light;
+
+                            .dropdown-item {
+                                color: $o-we-color-text-light;
+
+                                &:hover {
+                                    background-color: fade-out($o-we-color-dark, 0.5);
+                                }
+
+                                &.active {
+                                    background-color: fade-out($o-we-color-dark, 0.5);
+                                }
+                            }
+
+                            .dropdown-header {
+                                color: wheat;
+
+                                &.o_parent_editor_header {
+                                    color: wheat;
+                                }
+                            }
+
+                            .dropdown-submenu {
+                                &::before {
+                                    border-left-color: $o-we-color-text-light;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.o_top_cover>.oe_overlay_options {
+                top: $o-we-handle-border-width;
+                right: $o-we-handle-border-width;
+            }
+
+        }
+    }
+
+    // Animations
+    @keyframes fadeInDownSmall {
+        0% {
+            opacity: 0;
+            transform: translate(0, -5px);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translate(0, 0);
+        }
+    }
+
+    @keyframes fadeInOut {
+        0% {
+            opacity: 0;
+        }
+
+        25% {
+            opacity: 1;
+        }
+
+        75% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0;
+        }
+    }
+
+    @keyframes inputHighlighter {
+        from {
+            background: $o-brand-primary;
+        }
+
+        to {
+            width: 0;
+            background: transparent;
+        }
+    }
+
+    // MODALS
+    body .modal {
+
+        // BACKGROUND IMAGE OPTIONS
+        .o_bg_img_opt_modal .o_bg_img_opt {
+            margin: 15px 0;
+
+            .help-control {
+                @include o-position-absolute(15px, 15px);
+            }
+
+            .help {
+                margin: 15px 0;
+
+                .simulator {
+                    position: relative;
+                    float: left;
+                    margin-right: 15px;
+                    width: 120px;
+                    height: 100px;
+
+                    .bg {
+                        @include o-position-absolute(0, 0, 0, 0);
+                        border: 1px dotted #888787;
+                        background-image: url(/web/image);
+                        background-position: center center;
+                        background-size: cover;
+                    }
+
+                    .el {
+                        @include o-position-absolute(10px, 0, 10px, 0);
+                        border: 1px solid #222;
+                    }
+
+                    &.contain_bg {
+                        .bg {
+                            @include o-position-absolute(0, 12px, 20px, 12px);
+                        }
+
+                        .el {
+                            @include o-position-absolute(0, 0, 20px, 0);
+                        }
+                    }
+                }
+
+                +* {
+                    clear: left;
+                }
+            }
+
+            .o_bg_img_opt_cover_edition {
+                @include o-we-preview-box;
+                padding: 0 25px 25px 25px;
+
+                h6 {
+                    color: white;
+                    font-weight: bold;
+                }
+
+                .o_bg_img_opt_object {
+                    position: relative;
+                    background: white;
+                    min-height: 10px;
+                    @include o-we-preview-content;
+
+                    >img {
+                        cursor: crosshair;
+                        border-top: 1px solid #5A5A5A;
+                        border-bottom: 1px solid #111;
+                    }
+
+                    &:hover .o_focus_point:before {
+                        opacity: 0.5;
+                    }
+                }
+
+                .o_bg_img_opt_ui_info {
+                    animation: fadeInOut 2s ease forwards;
+                    @include o-position-absolute($bottom: 1px, $right: 0);
+                    display: block;
+                    padding: 3px 13px;
+                    background-color: rgba(255, 255, 255, 0.8);
+                    color: #333;
+                    text-align: center;
+                    font-weight: bold;
+                    pointer-events: none;
+
+                    span {
+                        font-weight: normal;
+                    }
+
+                    .o_x {
+                        margin-right: 10px
+                    }
+                }
+
+                .grid {
+                    @include o-position-absolute($top: 33.33%, $left: 0);
+                    display: block;
+                    width: 100%;
+                    height: 1px;
+                    background: fade-out(lighten($o-brand-primary, 30%), 0.5);
+                    pointer-events: none;
+
+                    &.grid-2 {
+                        top: 66.66%
+                    }
+
+                    &.grid-3 {
+                        top: 0;
+                        left: 33.33%;
+                        width: 1px;
+                        height: 100%
+                    }
+
+                    &.grid-4 {
+                        top: 0;
+                        left: 66.66%;
+                        width: 1px;
+                        height: 100%
+                    }
+                }
+
+                .o_focus_point {
+                    @include o-position-absolute($top: 0, $left: 0);
+                    width: 30px;
+                    height: 30px;
+                    border: 2px solid white;
+                    border-radius: 100%;
+                    margin-top: -15px;
+                    margin-left: -15px;
+                    box-shadow: 0 0 1px #333;
+                    pointer-events: none;
+
+                    &.o_with_transition {
+                        transition: all 0.2s ease 0s;
+                    }
+
+                    &:before {
+                        pointer-events: none;
+                        content: "";
+                        display: block;
+                        width: 100px;
+                        height: 100px;
+                        margin-top: -37px;
+                        margin-left: -37px;
+                        border: 1px solid #EAEAEA;
+                        background: rgba(247, 76, 76, 0);
+                        border-radius: 100em;
+                        opacity: 1;
+                        box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
+                        transition: opacity 0.2s ease 0s;
+                    }
+                }
+            }
+        }
+    }
+
+    .wysiwyg_multizone.note-editor {
+        &>.note-toolbar-wrapper .note-toolbar {
+            height: $o-navbar-height;
+
+            .btn {
+                height: $o-navbar-height;
+            }
+        }
+
+        &>.note-statusbar {
+            display: none;
+        }
+
+        &>.note-editing-area {
+            overflow: visible;
+        }
+    }
+
+    .wysiwyg_multizone.note-popover.popover {
+        border-width: 0 1px;
+
+        .popover-content .btn {
+            height: $o-navbar-height;
+        }
+    }
+
+    .wysiwyg_multizone.note-popover,
+    .wysiwyg_multizone.note-editor>.note-toolbar-wrapper .note-toolbar {
+        background-color: $o-we-color-dark;
+
+        .btn {
+            background-color: $o-we-color-dark;
+            color: $o-we-color-text-normal;
+            border: none;
+            padding: 0.0625rem 0.3125rem !important; // force this because of themes
+
+            >.fa {
+                color: $o-we-color-text-normal;
+            }
+
+            &:hover {
+                color: $o-we-color-text-light;
+
+                >.fa {
+                    color: $o-we-color-text-light;
+                }
+            }
+
+            &.active {
+                background-color: $o-we-color-dark;
+                color: $o-we-color-text-light;
+
+                >.fa {
+                    color: $o-we-color-text-light;
+                }
+            }
+        }
+
+        >.btn-group {
+            margin-top: 0;
+
+            &.show,
+            .btn-group.show {
+                .dropdown-toggle {
+                    border-top: 2px solid white;
+                    background-color: $o-we-color-darker;
+                    color: white;
+                    box-shadow: none;
+
+                    >.fa,
+                    >span {
+                        color: white;
+                    }
+                }
+            }
+        }
+
+        .dropdown-menu {
+            margin: 0;
+            border-radius: 0;
+            background-color: $o-we-color-darker;
+            color: $o-we-color-text-normal;
+            white-space: normal;
+
+            .dropdown-item {
+                width: 100%;
+                color: $o-we-color-text-light;
+
+                >.fa {
+                    color: $o-we-color-text-light;
+                }
+
+                &:hover {
+                    background-color: $o-we-tab-active-bg;
+                    color: white;
+
+                    >.fa {
+                        color: white;
+                    }
+                }
+            }
+        }
+
+        .note-para .dropdown-menu {
+            min-width: 147px;
+        }
+
+        .note-style .dropdown-item * {
+            color: $o-we-color-text-light;
+        }
+    }
+}