odoo_source/addons/website/static/src/scss/website.edit_mode.scss

$-editor-messages-margin-x: 2%;
%o-editor-messages {
    width: 100% - $-editor-messages-margin-x * 2; // Need to be forced here to avoid flickering
    margin: 20px $-editor-messages-margin-x;
    border: 2px dashed #999999;
    padding: 12px 0px;
    text-align: center;
    color: #999999;

    &:before {
        content: attr(data-editor-message);
        display: block;
        font-size: 20px;
        line-height: 50px; // Useful for the "wizz" animation on snippet click to be more visible
    }
    &:after {
        content: attr(data-editor-sub-message);
        display: block;
    }
}
.o_we_snippet_area_animation {
    animation-delay: 999ms; // Disable it but allow to inherit the animation

    &::before {
        animation: inherit;
        animation-delay: 0ms;
    }
}

.o_editable {
    &:not(:empty), &[data-oe-type] {
        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover,
        &.o_editable_date_field_linked {
            box-shadow: $o-brand-odoo 0 0 5px 2px inset;
        }
    }
    &:focus, &[data-oe-type] {
        min-height: 0.8em;
        min-width: 8px;

        // TODO this feature just needs to be reviewed to not have to make
        // exceptions such as this
        &#o_footer_scrolltop_wrapper {
            min-height: 0;
            min-width: 0;
        }
    }
    .btn, &.btn {
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto;
        cursor: text!important;
    }
    /* The placeholder text will only be visible before the 1st edition,
       after edition JW will add a br in empty boxes and break this selector */
    &[placeholder]:empty:not(:focus):before {
        content: attr(placeholder);
        opacity: 0.3;
    }

    &.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty {
        &#wrap:empty, &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
            @extend %o-editor-messages;
            padding: 112px 0px;
        }
        > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
            @extend %o-editor-messages;
            height: auto;
            color: $o-brand-odoo;
        }
        > p:empty:only-child {
            color: #aaa;
        }
    }
}
.editor_enable [data-oe-readonly]:hover {
    cursor: default;
}
.oe_structure_solo > .oe_drop_zone {
    // TODO implement something more robust. This is currently for our only
    // use case of oe_structure_solo: the footer. The dropzone in there need to
    // be 1px lower that the end-of-page dropzone to distinguish them. The
    // usability has to be reviewed anyway.
    transform: translateY(10px); // For some reason "1px" is not enough...
}

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
    user-select: none;
}

.oe_editable:focus,
.css_editable_hidden,
.editor_enable .css_editable_mode_hidden {
    outline: none!important;
}

.editor_enable .css_non_editable_mode_hidden,
.o_editable .media_iframe_video .css_editable_mode_display {
    display: block!important;
}

// TODO: in master check if the class / rule is relevant at all
.editor_enable [data-oe-type=html].oe_no_empty:empty {
    height: 16px!important;
}

// EDITOR BAR
table.editorbar-panel {
    cursor: pointer;
    width: 100%;
    td { border: 1px solid #aaa}
    td.selected { background-color: #b1c9d9}
}
.link-style {
    .dropdown > .btn {
        min-width: 160px;
    }
    .link-style {
        display: none;
    }
    li {
        text-align: center;
        label {
            width: 100px;
            margin: 0 5px;
        }
    }
    .col-md-2 > * {
        line-height: 2em;
    }
}

// fontawesome
.note-editable .fa {
    cursor: pointer;
}

// parallax dropzones are in conflict with outside of parallax dropzones
.parallax .oe_structure > .oe_drop_zone {
    &:first-child {
        top: 16px;
    }
    &:last-child {
        bottom: 16px;
    }
}

.editor_enable .o_add_language {
    display: none !important;
}

// Facebook Page
.editor_enable .o_facebook_page:not(.o_facebook_preview) {
    iframe {
        pointer-events: none;
    }
    .o_facebook_alert .o_add_facebook_page {
        cursor: pointer;
    }
}

body.editor_enable.editor_has_snippets {
    padding-top: 0 !important;

    .s_popup .modal {
        // s_popup in edit mode
        background-color: transparent;

        &.fade .modal-dialog {
            transform: none;
        }
    }

    #oe_main_menu_navbar + #wrapwrap .o_header_affixed {
        top: 0;
    }
}

.editor_has_snippets {
    .o_header_affixed {
        right: $o-we-sidebar-width !important;
    }
}

.editor_enable {
    @if o-website-value('header-template') == 'sidebar' {
        #wrapwrap > header {
            @if o-website-value('hamburger-position') != 'right' {
                right: $o-we-sidebar-width;
            }
        }
    }
}

//s_dynamic_snippet
body.editor_enable {
    .s_dynamic {
        > * {
            pointer-events: none;
        }
        [data-url] {
            cursor: inherit;
        }
    }
}