[FIX] website: restore editor component styles

Following the new editor of https://github.com/odoo/odoo/pull/29775,
many editor styles and behaviors were broken:
- Translation colors
- Background sizing cursor
- etc, etc

This is because commit https://github.com/odoo/odoo/commit/b49745e52d7a7bc27afd416206dcd5fa242aa07a
decided to wrap all the scss rules of the website editor scss file in
a `body.editor_enable` rule without any care. For example, the rule for
translation colors became:

`body.editor_enable > html[lang] > body.editor_enable > ...`

which obviously does not work.

closes odoo/odoo#34190

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 465 insertions, 457 deletions

diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index a4d8cea8729..d3fb73c5591 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -1,641 +1,649 @@
+//------------------------------------------------------------------------------
+// Modifications applied on normal website DOM while being in the editor.
+//------------------------------------------------------------------------------
+
 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;
+    #wrapwrap {
+        height: calc(100vh - #{$o-navbar-height});
+        padding-top: 0px;
 
-            .btn-group {
-                height: 100%;
-            }
+        .btn {
+            -webkit-user-select: none;
+        }
+    }
+}
 
-            .btn {
-                height: 100%;
-                margin: 0;
-                padding: 10px;
-                line-height: 1.2;
-                font-size: 13px;
-                font-family: $o-we-font-family;
+//------------------------------------------------------------------------------
+// Editor components style.
+//------------------------------------------------------------------------------
+
+// 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%;
+        }
 
-                transition: all 0.3s ease 0s;
-                border: none;
-                border-radius: 0;
+        .btn {
+            height: 100%;
+            margin: 0;
+            padding: 10px;
+            line-height: 1.2;
+            font-size: 13px;
+            font-family: $o-we-font-family;
 
-                .fa {
-                    margin-right: $grid-gutter-width/4;
+            transition: all 0.3s ease 0s;
+            border: none;
+            border-radius: 0;
 
-                    &.fa-times {
-                        color: $o-we-color-danger;
-                    }
-                }
+            .fa {
+                margin-right: $grid-gutter-width/4;
 
-                &.btn-primary {
-                    @include button-variant($o-brand-odoo, $o-brand-odoo);
+                &.fa-times {
+                    color: $o-we-color-danger;
                 }
+            }
 
-                &.btn-secondary {
-                    @include button-variant($o-we-color-dark, $o-we-color-dark);
+            &.btn-primary {
+                @include button-variant($o-brand-odoo, $o-brand-odoo);
+            }
 
-                    &:hover {
-                        background: rgba(black, 0.5);
-                    }
-                }
+            &.btn-secondary {
+                @include button-variant($o-we-color-dark, $o-we-color-dark);
 
-                &:focus,
-                &:active,
-                &:focus:active {
-                    outline: none;
+                &:hover {
+                    background: rgba(black, 0.5);
                 }
             }
 
-            .dropdown-menu {
-                left: auto;
-                right: 0;
+            &:focus,
+            &:active,
+            &:focus:active {
+                outline: none;
             }
         }
-    }
 
-    #wrapwrap {
-        height: calc(100vh - #{$o-navbar-height});
-        padding-top: 0px;
-
-        .btn {
-            -webkit-user-select: none;
+        .dropdown-menu {
+            left: auto;
+            right: 0;
         }
     }
+}
 
-    // Translations
-    .oe_translate_examples li {
-        margin: 10px;
-        padding: 4px;
-    }
+// 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;
+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;
-        }
+    &[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;
-        }
+    &.o_dirty {
+        background: rgba($o-we-translated-content-color, 0.25) !important;
     }
+}
 
-    // NOTE EDITOR
+// 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;
+// 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%));
+    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;
-        }
+    #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;
-            }
+    #o_scroll {
+        .o_panel_header {
+            color: #999999;
         }
     }
+}
 
-    .oe_snippet {
-        background-color: $o-we-color-normal;
+.oe_snippet {
+    background-color: $o-we-color-normal;
 
-        .oe_snippet_thumbnail {
-            .oe_snippet_thumbnail_img {
-                border: 1px solid $o-we-color-normal;
-            }
+    .oe_snippet_thumbnail {
+        .oe_snippet_thumbnail_img {
+            border: 1px solid $o-we-color-normal;
+        }
 
-            img.oe_snippet_thumbnail_img {}
+        img.oe_snippet_thumbnail_img {}
 
-            .oe_snippet_thumbnail_title {
-                border: 1px solid $o-we-color-dark;
-                color: $o-we-color-text-light;
-            }
+        .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;
-            }
+        &: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;
-            }
+// 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;
-            }
+    .o_colorpicker_section {
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
 
-            >button {
+        >button {
 
-                &:hover,
-                &.selected {
-                    box-shadow: 0px 0px 2px 2px $o-we-color-light;
-                }
+            &:hover,
+            &.selected {
+                box-shadow: 0px 0px 2px 2px $o-we-color-light;
+            }
 
-                &[data-event="foreColor"] {
-                    background-color: $o-we-color-normal;
+            &[data-event="foreColor"] {
+                background-color: $o-we-color-normal;
 
-                    &:before {
-                        background-color: rgba(white, 0.3);
-                    }
+                &:before {
+                    background-color: rgba(white, 0.3);
                 }
             }
         }
+    }
 
-        .note-palette-title {
-            color: $o-we-color-text-light;
-        }
+    .note-palette-title {
+        color: $o-we-color-text-light;
+    }
 
-        .palette-reset {
-            .note-color-reset {
-                color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
+    .palette-reset {
+        .note-color-reset {
+            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
 
-                &:hover {
-                    color: $o-we-color-danger;
-                }
+            &: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;
+// 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;
-            }
+        &:after {
+            border-bottom: $o-we-dropzone-border;
+        }
 
-            &.oe_vertical {
-                width: $o-we-dropzone-size;
-                margin: 0 (-$o-we-dropzone-size/2);
+        &.oe_vertical {
+            width: $o-we-dropzone-size;
+            margin: 0 (-$o-we-dropzone-size/2);
 
-                &:after {
-                    border-right: $o-we-dropzone-border;
-                }
+            &:after {
+                border-right: $o-we-dropzone-border;
             }
         }
     }
+}
 
-    // MANIPULATORS
-    #oe_manipulators {
+// MANIPULATORS
+#oe_manipulators {
 
-        // SNIPPET MANIPULATORS
-        .oe_overlay {
+    // SNIPPET MANIPULATORS
+    .oe_overlay {
 
-            // OVERLAY OPTIONS
-            >.oe_overlay_options {
-                font-family: $o-we-font-family;
+        // 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};
+            >.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;
+                    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: lighten($o-we-color-dark, 10%);
+                            background-color: darken($o-we-color-danger, 20%);
                         }
+                    }
 
-                        &.oe_snippet_remove {
-                            background-color: $o-we-color-danger;
-                            border-color: darken($o-we-color-danger, 20%);
+                    >.fa {
+                        color: $o-we-color-text-light;
+                    }
+                }
 
-                            &:hover {
-                                background-color: darken($o-we-color-danger, 20%);
-                            }
+                // 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%);
                         }
 
-                        >.fa {
-                            color: $o-we-color-text-light;
+                        &:before,
+                        &:after {
+                            background-color: $o-we-color-text-light;
                         }
                     }
 
-                    // CUSTOMIZE MENU BUTTON
-                    >.oe_options {
-                        .btn {
-                            background-color: $o-we-color-dark;
+                    // 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,
-                            &:active,
-                            &:focus {
-                                background-color: lighten($o-we-color-dark, 5%);
-                                border-color: lighten($o-we-color-dark, 10%);
+                            &:hover {
+                                background-color: fade-out($o-we-color-dark, 0.5);
                             }
 
-                            &:before,
-                            &:after {
-                                background-color: $o-we-color-text-light;
+                            &.active {
+                                background-color: fade-out($o-we-color-dark, 0.5);
                             }
                         }
 
-                        // 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-header {
+                            color: wheat;
 
-                            .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 {
+                            &.o_parent_editor_header {
                                 color: wheat;
-
-                                &.o_parent_editor_header {
-                                    color: wheat;
-                                }
                             }
+                        }
 
-                            .dropdown-submenu {
-                                &::before {
-                                    border-left-color: $o-we-color-text-light;
-                                }
+                        .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;
-            }
-
+        &.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);
-        }
+// Animations
+@keyframes fadeInDownSmall {
+    0% {
+        opacity: 0;
+        transform: translate(0, -5px);
+    }
 
-        100% {
-            opacity: 1;
-            transform: translate(0, 0);
-        }
+    100% {
+        opacity: 1;
+        transform: translate(0, 0);
     }
+}
 
-    @keyframes fadeInOut {
-        0% {
-            opacity: 0;
-        }
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+    }
 
-        25% {
-            opacity: 1;
-        }
+    25% {
+        opacity: 1;
+    }
 
-        75% {
-            opacity: 1;
-        }
+    75% {
+        opacity: 1;
+    }
 
-        100% {
-            opacity: 0;
-        }
+    100% {
+        opacity: 0;
     }
+}
 
-    @keyframes inputHighlighter {
-        from {
-            background: $o-brand-primary;
-        }
+@keyframes inputHighlighter {
+    from {
+        background: $o-brand-primary;
+    }
 
-        to {
-            width: 0;
-            background: transparent;
-        }
+    to {
+        width: 0;
+        background: transparent;
     }
+}
 
-    // MODALS
-    body .modal {
+// MODALS
+body .modal {
 
-        // BACKGROUND IMAGE OPTIONS
-        .o_bg_img_opt_modal .o_bg_img_opt {
-            margin: 15px 0;
+    // BACKGROUND IMAGE OPTIONS
+    .o_bg_img_opt_modal .o_bg_img_opt {
+        margin: 15px 0;
 
-            .help-control {
-                @include o-position-absolute(15px, 15px);
-            }
+        .help-control {
+            @include o-position-absolute(15px, 15px);
+        }
 
-            .help {
-                margin: 15px 0;
+        .help {
+            margin: 15px 0;
 
-                .simulator {
-                    position: relative;
-                    float: left;
-                    margin-right: 15px;
-                    width: 120px;
-                    height: 100px;
+            .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, 0, 0, 0);
-                        border: 1px dotted #888787;
-                        background-image: url(/web/image);
-                        background-position: center center;
-                        background-size: cover;
+                        @include o-position-absolute(0, 12px, 20px, 12px);
                     }
 
                     .el {
-                        @include o-position-absolute(10px, 0, 10px, 0);
-                        border: 1px solid #222;
+                        @include o-position-absolute(0, 0, 20px, 0);
                     }
+                }
+            }
 
-                    &.contain_bg {
-                        .bg {
-                            @include o-position-absolute(0, 12px, 20px, 12px);
-                        }
+            +* {
+                clear: left;
+            }
+        }
 
-                        .el {
-                            @include o-position-absolute(0, 0, 20px, 0);
-                        }
-                    }
-                }
+        .o_bg_img_opt_cover_edition {
+            @include o-we-preview-box;
+            padding: 0 25px 25px 25px;
 
-                +* {
-                    clear: left;
-                }
+            h6 {
+                color: white;
+                font-weight: bold;
             }
 
-            .o_bg_img_opt_cover_edition {
-                @include o-we-preview-box;
-                padding: 0 25px 25px 25px;
+            .o_bg_img_opt_object {
+                position: relative;
+                background: white;
+                min-height: 10px;
+                @include o-we-preview-content;
 
-                h6 {
-                    color: white;
-                    font-weight: bold;
+                >img {
+                    cursor: crosshair;
+                    border-top: 1px solid #5A5A5A;
+                    border-bottom: 1px solid #111;
                 }
 
-                .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;
+                }
+            }
 
-                    &: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_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;
+                .o_x {
+                    margin-right: 10px
+                }
+            }
 
-                    span {
-                        font-weight: normal;
-                    }
+            .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;
 
-                    .o_x {
-                        margin-right: 10px
-                    }
+                &.grid-2 {
+                    top: 66.66%
                 }
 
-                .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-3 {
-                        top: 0;
-                        left: 33.33%;
-                        width: 1px;
-                        height: 100%
-                    }
+                &.grid-4 {
+                    top: 0;
+                    left: 66.66%;
+                    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;
                 }
 
-                .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;
+                &:before {
                     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;
-                    }
+                    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;
+.wysiwyg_multizone.note-editor {
+    &>.note-toolbar-wrapper .note-toolbar {
+        height: $o-navbar-height;
 
-            .btn {
-                height: $o-navbar-height !important; // force this because of themes
-            }
+        .btn {
+            height: $o-navbar-height !important; // force this because of themes
         }
+    }
 
-        &>.note-statusbar {
-            display: none;
-        }
+    &>.note-statusbar {
+        display: none;
+    }
 
-        &>.note-editing-area {
-            overflow: visible;
-        }
+    &>.note-editing-area {
+        overflow: visible;
     }
+}
 
-    .wysiwyg_multizone.note-popover.popover {
-        border-width: 0 1px;
+.wysiwyg_multizone.note-popover.popover {
+    border-width: 0 1px;
 
-        .popover-content .btn {
-            height: $o-navbar-height;
-        }
+    .popover-content .btn {
+        height: $o-navbar-height;
     }
+}
 
-    .wysiwyg_multizone.note-popover,
-    .wysiwyg_multizone.note-editor>.note-toolbar-wrapper .note-toolbar {
-        // force this because of themes
+.wysiwyg_multizone.note-popover,
+.wysiwyg_multizone.note-editor>.note-toolbar-wrapper .note-toolbar {
+    // force this because of themes
+    background-color: $o-we-color-dark !important;
+
+    .btn {
         background-color: $o-we-color-dark !important;
+        color: $o-we-color-text-normal !important;
+        border: none !important;
+        padding: 0.0625rem 0.3125rem !important;
 
-        .btn {
-            background-color: $o-we-color-dark !important;
+        >.fa {
             color: $o-we-color-text-normal !important;
-            border: none !important;
-            padding: 0.0625rem 0.3125rem !important;
+        }
 
-            >.fa {
-                color: $o-we-color-text-normal !important;
-            }
+        &:hover {
+            color: $o-we-color-text-light !important;
 
-            &:hover {
+            >.fa {
                 color: $o-we-color-text-light !important;
-
-                >.fa {
-                    color: $o-we-color-text-light !important;
-                }
             }
+        }
 
-            &.active {
-                background-color: $o-we-color-dark !important;
-                color: $o-we-color-text-light !important;
+        &.active {
+            background-color: $o-we-color-dark !important;
+            color: $o-we-color-text-light !important;
 
-                >.fa {
-                    color: $o-we-color-text-light !important;
-                }
+            >.fa {
+                color: $o-we-color-text-light !important;
             }
         }
+    }
 
-        >.btn-group {
-            margin-top: 0 !important;
+    >.btn-group {
+        margin-top: 0 !important;
 
-            &.show,
-            .btn-group.show {
-                .dropdown-toggle {
-                    border-top: 2px solid white !important;
-                    background-color: $o-we-color-darker !important;
-                    color: white !important;
-                    box-shadow: none !important;
+        &.show,
+        .btn-group.show {
+            .dropdown-toggle {
+                border-top: 2px solid white !important;
+                background-color: $o-we-color-darker !important;
+                color: white !important;
+                box-shadow: none !important;
 
-                    >.fa,
-                    >span {
-                        color: white !important;
-                    }
+                >.fa,
+                >span {
+                    color: white !important;
                 }
             }
         }
+    }
 
-        .dropdown-menu {
-            margin: 0 !important;
-            border-radius: 0 !important;
-            background-color: $o-we-color-darker !important;
-            color: $o-we-color-text-normal !important;
-            white-space: normal !important;
+    .dropdown-menu {
+        margin: 0 !important;
+        border-radius: 0 !important;
+        background-color: $o-we-color-darker !important;
+        color: $o-we-color-text-normal !important;
+        white-space: normal !important;
 
-            .dropdown-item {
-                width: 100% !important;
+        .dropdown-item {
+            width: 100% !important;
+            color: $o-we-color-text-light !important;
+
+            >.fa {
                 color: $o-we-color-text-light !important;
+            }
 
-                >.fa {
-                    color: $o-we-color-text-light !important;
-                }
+            &:hover {
+                background-color: $o-we-tab-active-bg !important;
+                color: white !important;
 
-                &:hover {
-                    background-color: $o-we-tab-active-bg !important;
+                >.fa {
                     color: white !important;
-
-                    >.fa {
-                        color: white !important;
-                    }
                 }
             }
         }
+    }
 
-        .note-para .dropdown-menu {
-            min-width: 147px !important;
-        }
+    .note-para .dropdown-menu {
+        min-width: 147px !important;
+    }
 
-        .note-style .dropdown-item * {
-            color: $o-we-color-text-light !important;
-        }
+    .note-style .dropdown-item * {
+        color: $o-we-color-text-light !important;
     }
 }