[REF] portal, website, web: rename/regroup LESS files

10 files changed, 1057 insertions, 1061 deletions

diff --git a/addons/portal/static/src/less/website.wrapwrap.less b/addons/portal/static/src/less/website.wrapwrap.less
index 196863bb0e7..ff3aab36fa4 100644
--- a/addons/portal/static/src/less/website.wrapwrap.less
+++ b/addons/portal/static/src/less/website.wrapwrap.less
@@ -1,6 +1,5 @@
 ///
-/// This file regroups the general rules for website design. See the website.snippets.less rules for
-/// snippets-specific rules.
+/// This file regroups the general rules for website design.
 ///
 
 // Resize and vertically align navbar’s items relative to @navbar-height
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 23b1b71f0a0..a90c8b67d67 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -12,7 +12,7 @@
 
         <!-- FIXME remove website / portal dependency ..? -->
         <link href="/portal/static/src/less/website.wrapwrap.less" rel="stylesheet" type="text/less"/>
-        <link href="/website/static/src/less/website.snippets.less" rel="stylesheet" type="text/less"/>
+        <link href="/website/static/src/less/website.less" rel="stylesheet" type="text/less"/>
 
         <!-- TODO: Put in the right report ..? -->
         <link href="https://fonts.googleapis.com/css?family=Work+Sans:thin,light,regular,medium,bold,semi-bold" rel="stylesheet"/>
diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
deleted file mode 100644
index 53d2296a464..00000000000
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ /dev/null
@@ -1,568 +0,0 @@
-// INPUTS
-@o-switch-size: 2ex;
-@o-switch-inactive-color: @gray-lighter;
-
-.o_switch {
-    .o-flex-display();
-    .o-align-items(center);
-    font-weight: normal;
-    cursor: pointer;
-
-    > input {
-        display: none;
-
-        + span {
-            background-color: @o-switch-inactive-color;
-            box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
-            border-radius: 100rem;
-            height: @o-switch-size;
-            width: @o-switch-size * 1.8;
-            margin-right: 0.5em;
-            display: inline-block;
-            .transition(all 0.3s @o-we-md-ease);
-
-            &:after {
-                content: "";
-                background: @o-we-color-paper;
-                display: block;
-                width: @o-switch-size - 0.2;
-                height: @o-switch-size - 0.2;
-                margin-top: 0.1ex;
-                margin-left: 0.3ex;
-                border-radius: 100rem;
-                .transition(all 0.3s @o-we-md-ease);
-                box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
-            }
-        }
-
-        &:checked + span {
-            box-shadow: none;
-            .o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
-
-            &:after {
-                margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
-            }
-        }
-    }
-}
-
-.dropdown-menu label .o_switch {
-    margin: 0;
-    padding: 2px 0;
-}
-
-.text-input-group {
-    position: relative;
-    margin-bottom: 45px;
-
-    input {
-        font-size: 18px;
-        padding: 10px 10px 10px 5px;
-        display: block;
-        width: 300px;
-        border: none;
-        border-bottom: 1px solid #757575;
-    }
-    input:focus { outline: none; }
-
-    /* LABEL ======================================= */
-    label {
-        color: #999;
-        font-size: 18px;
-        font-weight: normal;
-        .o-position-absolute(@top: 10px, @left: 5px);
-        pointer-events: none;
-        .transition(0.2s ease all)
-    }
-
-    /* active state */
-    input:focus ~ label, input:valid ~ label {
-        top: -20px;
-        font-size: 14px;
-        color: #5264AE;
-    }
-
-    /* BOTTOM BARS ================================= */
-    .bar    { position: relative; display: block; width: 300px; }
-    .bar:before, .bar:after {
-        content: '';
-        height: 2px;
-        width: 0;
-        bottom: 1px;
-        .o-position-absolute();
-        background: #5264AE;
-        .transition(0.2s ease all);
-    }
-    .bar:before {
-        left: 50%;
-    }
-    .bar:after {
-        right: 50%;
-    }
-
-    /* active state */
-    input:focus ~ .bar:before, input:focus ~ .bar:after {
-        width: 50%;
-    }
-
-    /* HIGHLIGHTER ================================== */
-    .highlight {
-        .o-position-absolute(@top: 25%, @left: 0);
-        height: 60%;
-        width: 100px;
-        pointer-events: none;
-        opacity: 0.5;
-    }
-
-    /* active state */
-    input:focus ~ .highlight {
-        .animation(inputHighlighter 0.3s ease);
-    }
-}
-
-// DRAG&DROP ANIMATIONS
-.oe_snippet_body {
-    opacity: 0;
-    .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
-}
-
-// ACE EDITOR
-.o_ace_view_editor {
-    @o-ace-color: #2F3129;
-    background: @o-ace-color;
-    color: white;
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
-    opacity: 0.97;
-
-    .o_ace_view_editor_title {
-        .o-flex(0, 0, auto);
-        .o-flex-display();
-        .o-align-items(center);
-        padding: @grid-gutter-width/4;
-
-        > .o_ace_type_switcher > button::after {
-            .o-caret-down();
-            margin-left: 4px;
-        }
-
-        > * {
-            .o-flex(0, 0, auto);
-            margin: 0 @grid-gutter-width/4;
-
-            &.o_include_option {
-                .o-flex-display();
-                .o-align-items(center);
-                font-size: 11px;
-
-                > .o_checkbox {
-                    margin-right: @grid-gutter-width/4;
-                }
-            }
-
-            &.o_res_list {
-                .o-flex(1, 1, auto);
-                min-width: 60px;
-            }
-        }
-    }
-    #ace-view-id {
-        .o-flex(0, 0, auto);
-        padding: @grid-gutter-width/4 @grid-gutter-width/2;
-        background-color: lighten(@o-ace-color, 10%);
-    }
-    #ace-view-editor {
-        height: 70%; // in case flex is not supported
-        .o-flex(1, 1, auto);
-        .ace_gutter {
-            cursor: ew-resize;
-
-            .ace_gutter-cell.o_error {
-                position: relative;
-                &::after {
-                    .o-position-absolute(-100%, 0, -100%, 0);
-                    .ace-line-error-mixin();
-                }
-            }
-        }
-        .ace_resize_bar {
-            .o-position-absolute(@right: 0);
-            width: 25px;
-            height: 100%;
-            cursor: ew-resize;
-        }
-        .ace_scroller.o_error::after {
-            .o-position-absolute(0, auto, 0, 0);
-            width: 3px;
-            .ace-line-error-mixin();
-        }
-
-        .ace-line-error-mixin() {
-            content: "";
-            z-index: 1000;
-            display: block;
-            background-color: @brand-danger;
-            opacity: 0.5;
-            pointer-events: none;
-        }
-    }
-}
-.o_ace_select2_dropdown {
-    width: auto!important;
-    padding-top: 4px;
-    font-family: monospace!important;
-
-    > .select2-results {
-        max-height: none;
-        max-height: 70vh;
-
-        .select2-result-label {
-            padding-top: 1px;
-            padding-bottom: 2px;
-
-            >.o_ace_select2_result {
-                padding: 0;
-                font-size: 12px;
-                white-space: nowrap;
-            }
-        }
-    }
-}
-
-// MODALS
-body .modal {
-    // SELECT MEDIA
-    .o_select_media_dialog {
-        width: 80%;
-
-        .modal-body {
-            .nav-tabs .active > a[href="#editor-media-icon"] {
-                background-color: white;
-            }
-
-            li.search {
-                float: right;
-
-                ul.pager li:last-child{
-                    margin-left: 2px;
-                }
-                .form-group {
-                    position: relative;
-                    margin: 0 10px 0 0;
-                    > input {
-                        padding-right: 30px;
-                    }
-                    > span {
-                        .o-position-absolute(7px, 7px);
-                        font-size: 1.3em;
-                    }
-                }
-            }
-
-            .well {
-                border-color: @gray-lighter;
-                border-top-width: 0;
-            }
-
-            .o_existing_attachment_cell {
-                @odoo-border-image: 1px;
-                .o_existing_attachment_remove {
-                    .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
-                    padding: 3px 5px 5px 5px;
-                    background-color: fade(white, 80%);
-                    text-shadow: 0 0 1px white;
-                    border-radius: 0 0 0 2px;
-                    opacity: 0;
-                    cursor: pointer;
-
-                    &:hover {
-                        background-color: white;
-                        color: @o-we-color-danger;
-                    }
-                }
-                .o_image {
-                    border: @odoo-border-image solid transparent;
-                    cursor: pointer;
-
-                    &.o_webimage {
-                        width: 100%;
-                        height: auto;
-                        background-image: none!important;
-                    }
-                }
-                &.o_selected .o_image {
-                    border-color: @odoo-brand-primary;
-                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
-                }
-                &:hover {
-                    .o_existing_attachment_remove {
-                        opacity: 1;
-                    }
-                }
-            }
-            .font-icons-icons {
-                padding: 20px 0;
-
-                > span {
-                    text-align: center;
-                    font-size: 22px;
-                    margin: 5px;
-                    width: 50px;
-                    height: 50px;
-                    padding: 15px;
-                    cursor: pointer;
-
-                    &.o_selected {
-                        cursor: auto;
-                        background-color: @o-we-color-paper;
-                        box-shadow: 0px 0px 0px 1px @o-we-color-success;
-                    }
-                }
-            }
-
-            #editor-media-image, #editor-media-document {
-                .well {
-                    label {
-                        margin: auto 10px;
-                    }
-
-                    .btn-group {
-                        margin-right: 10px;
-                    }
-                }
-            }
-
-            // VIDEO TAB
-            #editor-media-video .well {
-                padding: 0;
-                .o-flex-display();
-                .o-flex-flow(row, wrap);
-
-                .o_video_dialog_form {
-                    .o-flex(1, 1, auto);
-                    min-width: 0;
-                    padding: 20px;
-
-                    #o_video_form_group {
-                        position: relative;
-                        width: 100%;
-
-                        > textarea {
-                            width: 100%;
-                            min-height: 95px;
-                            padding-bottom: 25px;
-                            overflow-y: scroll;
-                        }
-
-                        > .o_validate_feedback {
-                            .o-position-absolute(auto, 10px, 10px);
-
-                            > .fa {
-                                display: none;
-                            }
-                        }
-                        &.has-error > .o_validate_feedback > .fa-exclamation-triangle {
-                            display: block;
-                        }
-                        &.has-success > .o_validate_feedback > .fa-check {
-                            display: block;
-                        }
-                    }
-                }
-
-                #video-preview {
-                    position: relative;
-                    .o-flex(1, 0, 50%);
-                    .o-flex-display();
-                    .o-flex-flow(column, nowrap);
-                    .o-justify-content(center);
-
-                    .o-we-preview-box(0 19px);
-                    border: none;
-
-                    .media_iframe_video {
-                        width: 100%;
-                    }
-
-                    .o_video_dialog_iframe {
-                        .o-we-preview-content();
-                        max-width: 100%;
-                        max-height: 100%;
-
-                        &.alert {
-                            .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
-                            margin: 0 auto;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    // BACKGROUND IMAGE OPTIONS
-    .o_bg_img_opt_modal .o_bg_img_opt {
-        margin: 15px 0;
-
-        .help-control {
-            .o-position-absolute(15px, 15px);
-        }
-        .help {
-            margin: 15px 0;
-
-            .simulator {
-                position: relative;
-                float: left;
-                margin-right: 15px;
-                width: 120px;
-                height: 100px;
-                .bg {
-                    .o-position-absolute(0, 0, 0, 0);
-                    border: 1px dotted #888787;
-                    background-image: url(/web/image);
-                    background-position: center center;
-                    .o-background-size(cover);
-                }
-                .el {
-                    .o-position-absolute(10px, 0, 10px, 0);
-                    border: 1px solid #222;
-                }
-                &.contain_bg {
-                    .bg {
-                        .o-position-absolute(0, 12px, 20px, 12px);
-                    }
-                    .el {
-                        .o-position-absolute(0, 0, 20px, 0);
-                    }
-                }
-            }
-            + * {
-                clear: left;
-            }
-        }
-
-        .o_bg_img_opt_cover_edition {
-            .o-we-preview-box();
-
-            h6 {
-                color: white;
-                font-weight: bold;
-            }
-            .o_bg_img_opt_object {
-                position: relative;
-                background: white;
-                min-height: 10px;
-                .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);
-                .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 {
-                .o-position-absolute(@top: 33.33%, @left: 0);
-                display: block;
-                width: 100%;
-                height: 1px;
-                background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
-                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 {
-                .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 {
-                    .o-transition(all, 0.2s);
-                }
-                &: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);
-                    .o-transition(opacity, 0.2s);
-                }
-            }
-        }
-    }
-
-    // LINK EDITOR DIALOG COLOR SELECTOR
-    .o_link_dialog {
-        .o_link_dialog_color > .o_link_dialog_color_item {
-            position: relative;
-            width: 30px;
-            height: 30px;
-            padding: 0; // Important for themes
-            border: 2px solid rgba(0, 0, 0, 0.25);
-            border-radius: 50%;
-
-            input:checked + i::before {
-                content: "\f00c";
-                .o-position-absolute(@top: 6px, @left: 5px);
-            }
-
-            &.btn-link {
-                padding: 3px 9px;
-
-                > span {
-                    text-decoration: underline;
-                }
-            }
-        }
-        .o_link_dialog_preview {
-            border-left: 1px solid @gray-lighter;
-        }
-    }
-}
-
-.ui-autocomplete {
-    z-index: @zindex-modal + 1;
-}
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index e7ba19f332d..5e1261a1094 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -1085,3 +1085,572 @@ body.editor_enable {
         background-color: inherit;
     }
 }
+
+// INPUTS
+@o-switch-size: 2ex;
+@o-switch-inactive-color: @gray-lighter;
+
+.o_switch {
+    .o-flex-display();
+    .o-align-items(center);
+    font-weight: normal;
+    cursor: pointer;
+
+    > input {
+        display: none;
+
+        + span {
+            background-color: @o-switch-inactive-color;
+            box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
+            border-radius: 100rem;
+            height: @o-switch-size;
+            width: @o-switch-size * 1.8;
+            margin-right: 0.5em;
+            display: inline-block;
+            .transition(all 0.3s @o-we-md-ease);
+
+            &:after {
+                content: "";
+                background: @o-we-color-paper;
+                display: block;
+                width: @o-switch-size - 0.2;
+                height: @o-switch-size - 0.2;
+                margin-top: 0.1ex;
+                margin-left: 0.3ex;
+                border-radius: 100rem;
+                .transition(all 0.3s @o-we-md-ease);
+                box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
+            }
+        }
+
+        &:checked + span {
+            box-shadow: none;
+            .o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
+
+            &:after {
+                margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
+            }
+        }
+    }
+}
+
+.dropdown-menu label .o_switch {
+    margin: 0;
+    padding: 2px 0;
+}
+
+.text-input-group {
+    position: relative;
+    margin-bottom: 45px;
+
+    input {
+        font-size: 18px;
+        padding: 10px 10px 10px 5px;
+        display: block;
+        width: 300px;
+        border: none;
+        border-bottom: 1px solid #757575;
+    }
+    input:focus { outline: none; }
+
+    /* LABEL ======================================= */
+    label {
+        color: #999;
+        font-size: 18px;
+        font-weight: normal;
+        .o-position-absolute(@top: 10px, @left: 5px);
+        pointer-events: none;
+        .transition(0.2s ease all)
+    }
+
+    /* active state */
+    input:focus ~ label, input:valid ~ label {
+        top: -20px;
+        font-size: 14px;
+        color: #5264AE;
+    }
+
+    /* BOTTOM BARS ================================= */
+    .bar    { position: relative; display: block; width: 300px; }
+    .bar:before, .bar:after {
+        content: '';
+        height: 2px;
+        width: 0;
+        bottom: 1px;
+        .o-position-absolute();
+        background: #5264AE;
+        .transition(0.2s ease all);
+    }
+    .bar:before {
+        left: 50%;
+    }
+    .bar:after {
+        right: 50%;
+    }
+
+    /* active state */
+    input:focus ~ .bar:before, input:focus ~ .bar:after {
+        width: 50%;
+    }
+
+    /* HIGHLIGHTER ================================== */
+    .highlight {
+        .o-position-absolute(@top: 25%, @left: 0);
+        height: 60%;
+        width: 100px;
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    /* active state */
+    input:focus ~ .highlight {
+        .animation(inputHighlighter 0.3s ease);
+    }
+}
+
+// DRAG&DROP ANIMATIONS
+.oe_snippet_body {
+    opacity: 0;
+    .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+}
+
+// ACE EDITOR
+.o_ace_view_editor {
+    @o-ace-color: #2F3129;
+    background: @o-ace-color;
+    color: white;
+    .o-flex-display();
+    .o-flex-flow(column, nowrap);
+    opacity: 0.97;
+
+    .o_ace_view_editor_title {
+        .o-flex(0, 0, auto);
+        .o-flex-display();
+        .o-align-items(center);
+        padding: @grid-gutter-width/4;
+
+        > .o_ace_type_switcher > button::after {
+            .o-caret-down();
+            margin-left: 4px;
+        }
+
+        > * {
+            .o-flex(0, 0, auto);
+            margin: 0 @grid-gutter-width/4;
+
+            &.o_include_option {
+                .o-flex-display();
+                .o-align-items(center);
+                font-size: 11px;
+
+                > .o_checkbox {
+                    margin-right: @grid-gutter-width/4;
+                }
+            }
+
+            &.o_res_list {
+                .o-flex(1, 1, auto);
+                min-width: 60px;
+            }
+        }
+    }
+    #ace-view-id {
+        .o-flex(0, 0, auto);
+        padding: @grid-gutter-width/4 @grid-gutter-width/2;
+        background-color: lighten(@o-ace-color, 10%);
+    }
+    #ace-view-editor {
+        height: 70%; // in case flex is not supported
+        .o-flex(1, 1, auto);
+        .ace_gutter {
+            cursor: ew-resize;
+
+            .ace_gutter-cell.o_error {
+                position: relative;
+                &::after {
+                    .o-position-absolute(-100%, 0, -100%, 0);
+                    .ace-line-error-mixin();
+                }
+            }
+        }
+        .ace_resize_bar {
+            .o-position-absolute(@right: 0);
+            width: 25px;
+            height: 100%;
+            cursor: ew-resize;
+        }
+        .ace_scroller.o_error::after {
+            .o-position-absolute(0, auto, 0, 0);
+            width: 3px;
+            .ace-line-error-mixin();
+        }
+
+        .ace-line-error-mixin() {
+            content: "";
+            z-index: 1000;
+            display: block;
+            background-color: @brand-danger;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+    }
+}
+.o_ace_select2_dropdown {
+    width: auto!important;
+    padding-top: 4px;
+    font-family: monospace!important;
+
+    > .select2-results {
+        max-height: none;
+        max-height: 70vh;
+
+        .select2-result-label {
+            padding-top: 1px;
+            padding-bottom: 2px;
+
+            >.o_ace_select2_result {
+                padding: 0;
+                font-size: 12px;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+// MODALS
+body .modal {
+    // SELECT MEDIA
+    .o_select_media_dialog {
+        width: 80%;
+
+        .modal-body {
+            .nav-tabs .active > a[href="#editor-media-icon"] {
+                background-color: white;
+            }
+
+            li.search {
+                float: right;
+
+                ul.pager li:last-child{
+                    margin-left: 2px;
+                }
+                .form-group {
+                    position: relative;
+                    margin: 0 10px 0 0;
+                    > input {
+                        padding-right: 30px;
+                    }
+                    > span {
+                        .o-position-absolute(7px, 7px);
+                        font-size: 1.3em;
+                    }
+                }
+            }
+
+            .well {
+                border-color: @gray-lighter;
+                border-top-width: 0;
+            }
+
+            .o_existing_attachment_cell {
+                @odoo-border-image: 1px;
+                .o_existing_attachment_remove {
+                    .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
+                    padding: 3px 5px 5px 5px;
+                    background-color: fade(white, 80%);
+                    text-shadow: 0 0 1px white;
+                    border-radius: 0 0 0 2px;
+                    opacity: 0;
+                    cursor: pointer;
+
+                    &:hover {
+                        background-color: white;
+                        color: @o-we-color-danger;
+                    }
+                }
+                .o_image {
+                    border: @odoo-border-image solid transparent;
+                    cursor: pointer;
+
+                    &.o_webimage {
+                        width: 100%;
+                        height: auto;
+                        background-image: none!important;
+                    }
+                }
+                &.o_selected .o_image {
+                    border-color: @odoo-brand-primary;
+                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+                }
+                &:hover {
+                    .o_existing_attachment_remove {
+                        opacity: 1;
+                    }
+                }
+            }
+            .font-icons-icons {
+                padding: 20px 0;
+
+                > span {
+                    text-align: center;
+                    font-size: 22px;
+                    margin: 5px;
+                    width: 50px;
+                    height: 50px;
+                    padding: 15px;
+                    cursor: pointer;
+
+                    &.o_selected {
+                        cursor: auto;
+                        background-color: @o-we-color-paper;
+                        box-shadow: 0px 0px 0px 1px @o-we-color-success;
+                    }
+                }
+            }
+
+            #editor-media-image, #editor-media-document {
+                .well {
+                    label {
+                        margin: auto 10px;
+                    }
+
+                    .btn-group {
+                        margin-right: 10px;
+                    }
+                }
+            }
+
+            // VIDEO TAB
+            #editor-media-video .well {
+                padding: 0;
+                .o-flex-display();
+                .o-flex-flow(row, wrap);
+
+                .o_video_dialog_form {
+                    .o-flex(1, 1, auto);
+                    min-width: 0;
+                    padding: 20px;
+
+                    #o_video_form_group {
+                        position: relative;
+                        width: 100%;
+
+                        > textarea {
+                            width: 100%;
+                            min-height: 95px;
+                            padding-bottom: 25px;
+                            overflow-y: scroll;
+                        }
+
+                        > .o_validate_feedback {
+                            .o-position-absolute(auto, 10px, 10px);
+
+                            > .fa {
+                                display: none;
+                            }
+                        }
+                        &.has-error > .o_validate_feedback > .fa-exclamation-triangle {
+                            display: block;
+                        }
+                        &.has-success > .o_validate_feedback > .fa-check {
+                            display: block;
+                        }
+                    }
+                }
+
+                #video-preview {
+                    position: relative;
+                    .o-flex(1, 0, 50%);
+                    .o-flex-display();
+                    .o-flex-flow(column, nowrap);
+                    .o-justify-content(center);
+
+                    .o-we-preview-box(0 19px);
+                    border: none;
+
+                    .media_iframe_video {
+                        width: 100%;
+                    }
+
+                    .o_video_dialog_iframe {
+                        .o-we-preview-content();
+                        max-width: 100%;
+                        max-height: 100%;
+
+                        &.alert {
+                            .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+                            margin: 0 auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // BACKGROUND IMAGE OPTIONS
+    .o_bg_img_opt_modal .o_bg_img_opt {
+        margin: 15px 0;
+
+        .help-control {
+            .o-position-absolute(15px, 15px);
+        }
+        .help {
+            margin: 15px 0;
+
+            .simulator {
+                position: relative;
+                float: left;
+                margin-right: 15px;
+                width: 120px;
+                height: 100px;
+                .bg {
+                    .o-position-absolute(0, 0, 0, 0);
+                    border: 1px dotted #888787;
+                    background-image: url(/web/image);
+                    background-position: center center;
+                    .o-background-size(cover);
+                }
+                .el {
+                    .o-position-absolute(10px, 0, 10px, 0);
+                    border: 1px solid #222;
+                }
+                &.contain_bg {
+                    .bg {
+                        .o-position-absolute(0, 12px, 20px, 12px);
+                    }
+                    .el {
+                        .o-position-absolute(0, 0, 20px, 0);
+                    }
+                }
+            }
+            + * {
+                clear: left;
+            }
+        }
+
+        .o_bg_img_opt_cover_edition {
+            .o-we-preview-box();
+
+            h6 {
+                color: white;
+                font-weight: bold;
+            }
+            .o_bg_img_opt_object {
+                position: relative;
+                background: white;
+                min-height: 10px;
+                .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);
+                .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 {
+                .o-position-absolute(@top: 33.33%, @left: 0);
+                display: block;
+                width: 100%;
+                height: 1px;
+                background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
+                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 {
+                .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 {
+                    .o-transition(all, 0.2s);
+                }
+                &: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);
+                    .o-transition(opacity, 0.2s);
+                }
+            }
+        }
+    }
+
+    // LINK EDITOR DIALOG COLOR SELECTOR
+    .o_link_dialog {
+        .o_link_dialog_color > .o_link_dialog_color_item {
+            position: relative;
+            width: 30px;
+            height: 30px;
+            padding: 0; // Important for themes
+            border: 2px solid rgba(0, 0, 0, 0.25);
+            border-radius: 50%;
+
+            input:checked + i::before {
+                content: "\f00c";
+                .o-position-absolute(@top: 6px, @left: 5px);
+            }
+
+            &.btn-link {
+                padding: 3px 9px;
+
+                > span {
+                    text-decoration: underline;
+                }
+            }
+        }
+        .o_link_dialog_preview {
+            border-left: 1px solid @gray-lighter;
+        }
+    }
+}
+
+.ui-autocomplete {
+    z-index: @zindex-modal + 1;
+}
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 4bfe84887d0..63f491c6855 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -53,7 +53,7 @@
 </template>
 
 <template id="less_helpers" inherit_id="web.less_helpers">
-    <xpath expr="." position="inside">
+    <xpath expr="link[last()]" position="after">
         <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.variables.less"/>
     </xpath>
 </template>
@@ -90,7 +90,6 @@
     <t t-call="web.less_helpers"/>
 
     <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.less"/>
-    <link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.components.less"/>
 
     <script type="text/javascript" src="/web_editor/static/lib/nearest/jquery.nearest.js"/>
     <script type="text/javascript" src="/web_editor/static/src/js/editor/editor.js"/>
diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backend.less
index 2021761aa1c..2021761aa1c 100644
--- a/addons/website/static/src/less/website.backendDashboard.less
+++ b/addons/website/static/src/less/website.backend.less
diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.less
index 388a7180d96..388a7180d96 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.less
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
deleted file mode 100644
index 8cbf1ba7d98..00000000000
--- a/addons/website/static/src/less/website.ui.components.less
+++ /dev/null
@@ -1,484 +0,0 @@
-///
-/// This file regroups the style of website UI components (edition modals, forms, ...).
-///
-
-.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
-    color: transparent;
-    position: relative;
-    display: inline-block;
-    opacity: @opacity;
-    .square(@size);
-
-    &:hover, &:focus {
-        outline: none;
-        opacity: @opacity-hover;
-
-        &::after, &::before {
-            background: @color-hover;
-        }
-    }
-
-    &:after, &:before {
-        content: '';
-        margin-top: -1px;
-        background: @color;
-        .size(100%, @thickness);
-        .o-position-absolute(50%, @left:0);
-        .o-transform(rotate(45deg));
-    }
-
-    &:after {
-        .o-transform(rotate(-45deg));
-    }
-}
-
-// MODALS
-body .modal {
-    &.o_technical_modal {
-        .o-w-preserve-base();
-        .o-w-preserve-headings();
-        .o-w-preserve-forms();
-        .o-w-preserve-links();
-        .o-w-preserve-btn();
-        .o-w-preserve-wells();
-        .o-w-preserve-modals();
-        .o-w-preserve-tabs();
-
-        button.close {
-            .o-w-close-icon(12px);
-            margin-right: -2px;
-        }
-    }
-
-    // MOBILE PREVIEW
-    &.oe_mobile_preview {
-        text-align: center;
-
-        .modal-dialog {
-            display: inline-block;
-            width: auto;
-
-            .close {
-                color: lightgray;
-                opacity: 1;
-                font-size: 25px;
-                font-weight: normal;
-            }
-
-            .modal-content {
-                background-color: black!important;
-                border: 3px outset gray;
-                border-radius: 20px;
-
-                .modal-header {
-                    border: none;
-                    cursor: pointer;
-                    font-family: @o-we-font-family;
-
-                    h4 {
-                        color: lightgray;
-                        font-family:inherit;
-                        font-weight: normal;
-
-                        .fa {
-                            margin-left: @grid-gutter-width/2;
-                        }
-                    }
-                }
-
-                .modal-body {
-                    background-color: inherit!important;
-                    border-radius: 20px;
-                    padding: 15px;
-
-                    @mobile-preview-width: 320px;
-                    @mobile-preview-height: 530px;
-
-                    .o-flex-display();
-                    width: @mobile-preview-width + 15;
-                    height: @mobile-preview-height;
-                    .o-transition(all, 400ms);
-
-                    &.o_invert_orientation {
-                        width: @mobile-preview-height + 15;
-                        height: @mobile-preview-width;
-                    }
-
-                    > iframe {
-                        display: block;
-                        width: 100%;
-                        border: none;
-                    }
-                }
-
-                .modal-footer {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    // TOP MENU EDITOR
-    .oe_menu_editor {
-        ul {
-            padding-left: 37px;
-        }
-
-        li {
-            margin-top: -1px;
-
-            .input-group-addon {
-                border-radius: 0;
-            }
-        }
-    }
-
-    // SEO CONFIGURATION
-    &.oe_seo_configuration {
-        #language-box {
-            padding-right: 25px;
-            background-color: white;
-            margin-left: -1px;
-        }
-
-        .table {
-            td {
-                vertical-align: middle;
-
-                &:first-child {
-                    padding-right: 15px;
-                    border-width: 0;
-                    width: 35%;
-                }
-
-                &:last-child {
-                    visibility: hidden;
-                }
-            }
-
-            > tfoot {
-                display: none;
-            }
-
-            &.js_seo_has_content {
-                td {
-                    &:first-child {
-                        width: 55%;
-                        padding-right: 15px;
-                        border: 1px solid @o-we-color-text-light;
-                        text-align: right;
-                        background-color: @o-we-color-paper;
-
-                        @media screen and (min-width: @screen-md-min) {
-                            width: 38%;
-                        }
-                    }
-
-                    &:last-child {
-                        border: none;
-                        visibility: visible;
-                        padding-left: 15px;
-
-                        @media screen and (min-width: @screen-md-min) {
-                            padding-left: 50px;
-                        }
-                    }
-                }
-
-                tbody {
-                    td {
-                        padding: 5px;
-                        .o-transition(padding, .3s);
-
-                        &:first-child {
-                            border-width: 0 1px;
-
-                            .label {
-                                position: relative;
-                                display: inline-block;
-                                padding: 7px 35px;
-                                font-size: 16px;
-                                font-weight: normal;
-
-                                .oe_remove {
-                                    .o-w-close-icon(10px, white, @o-we-color-danger, 2px);
-                                    .o-position-absolute(5px, 5px);
-                                }
-                            }
-                        }
-
-                        &:last-child {
-                            .label {
-                                display: block;
-                                font-size: 12px;
-                                font-weight: normal;
-                                opacity: 0.8;
-                                cursor: pointer;
-
-                                &:hover {
-                                    opacity: 1;
-                                }
-                            }
-                        }
-                    }
-
-                    tr {
-                        .o-animation(fadeInDownSmall, .3s);
-
-                        &:first-child {
-                            td:first-child {
-                                padding-top: 10px;
-                            }
-                        }
-
-                        &:last-child {
-                            td:first-child {
-                                padding-bottom: 10px;
-                                border-bottom-width: 1px;
-                            }
-                        }
-                    }
-                }
-
-                > tfoot {
-                    display: table-footer-group;
-
-                    hr {
-                        margin: 10px 0;
-                    }
-
-                    td, td:first-child {
-                        border: none;
-                        background: none;
-                    }
-                }
-            }
-        }
-
-        li.oe_seo_preview_g {
-            list-style: none;
-            font-family: arial, sans-serif;
-
-            .r {
-                cursor: pointer;
-                color:#1a0dab;
-                font-size: 18px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                -webkit-text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            .s {
-                font-size: 13px;
-                line-height: 18px;
-                color: #545454;
-                .kv {
-                    color: #006621;
-                    font-size: 14px;
-                    line-height: 18px;
-                }
-                .st {
-                    height: 50px;
-                }
-            }
-        }
-    }
-}
-
-// ADD NEW PAGE MODAL
-#o_new_content_menu_choices {
-    .o-position-absolute(@odoo-navbar-height, 0, 0, 0);
-    position: fixed;
-    .o-flex-display();
-    .o-justify-content(center);
-    .o-align-items(center);
-    font-family: @o-we-font-family;
-
-    &::before {
-        content: " ";
-        .o-position-absolute(0, 0, 0, 0);
-        z-index: -1;
-        pointer-events: none;
-        background-color: black;
-        opacity: 0.8;
-    }
-
-    > ul {
-        .o-flex-display();
-        .o-flex-flow(row, wrap);
-        .o-justify-content(space-around);
-        width: auto;
-        max-width: 60%;
-        max-height: 100%;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        li {
-            display: block;
-            opacity: 0;
-            .animation(fadeInDownSmall 1s forwards);
-            margin: 2em 32px;
-            padding: 0 15px;
-
-            a {
-                display: block;
-                font-size: 34px;
-                margin: auto;
-                text-align: center;
-
-                i {
-                    width: 110px;
-                    height: 110px;
-                    border: 3px solid lighten(#2C2C36, 10%);
-                    border-radius: 100%;
-                    line-height: 104px;
-                    background-color: #2C2C36;
-                    color: white;
-
-                    .o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1));
-                }
-                p {
-                    color: white;
-                    margin-top: 0.7em;
-                    font-size: 0.5em;
-                }
-
-                &:hover, &:focus {
-                    text-decoration: none;
-                    i {
-                        border-color: #1cc1a9;
-                        box-shadow: 0 0 10px rgba(28, 193, 169, 0.46);
-                    }
-                }
-            }
-        }
-    }
-}
-
-// LOGIN FORM
-.oe_login_form, .oe_signup_form, .oe_reset_password_form {
-    max-width: 300px;
-    position: relative;
-    margin: 50px auto;
-}
-
-// CUSTOMIZE THEME
-#theme_error {
-    background: #ffc;
-}
-#theme_customize_modal {
-    overflow: visible;
-    z-index: 1020;
-    display: block;
-    .modal-dialog {
-        .o-position-absolute(@odoo-navbar-height + 10, 10px);
-        width: auto;
-        margin: 0;
-        font-family: Roboto;
-    }
-    .loading_backdrop {
-        display: none;
-    }
-    &.loading .loading_backdrop {
-        .o-position-absolute(0, 0, 0, 0);
-        display: block;
-        background: black;
-        opacity: 0.3;
-        z-index: 1;
-    }
-    label {
-        display: block;
-        text-align: center;
-        > div, > img {
-            border: 1px solid #fff;
-            line-height: 30px;
-            font-size: 0.9em;
-            margin: 2px 4px;
-        }
-        &.checked > div, &.checked > img {
-            box-shadow: 2px 2px 3px #888;
-            border: 1px solid #666;
-        }
-        img {
-            width: 60px;
-            height: 35px;
-            margin: 2px;
-            border: 1px solid rgba(136, 136, 136, 0.5);
-        }
-        input {
-            display: none;
-        }
-    }
-}
-
-// ACE EDITOR
-.o_ace_view_editor {
-    .o-w-preserve-base();
-    .o-w-preserve-btn();
-    .o-w-preserve-forms();
-
-    .o-position-absolute(@odoo-navbar-height, 0, 0);
-    position: fixed;
-    z-index: 1001;
-}
-
-// POPOVER NAVIGATION
-.tour .popover-navigation {
-    margin-left: 13px;
-    margin-bottom: 8px;
-}
-
-// PUBLISH
-.css_published {
-    .btn-danger, .css_publish {
-        display: none;
-    }
-}
-.css_unpublished {
-    .btn-success, .css_unpublish {
-        display: none;
-    }
-}
-[data-publish='off'] > *:not(.css_options) {
-    opacity: 0.5;
-}
-
-// Do not show path behind the links in browser printing
-@media print {
-    a[href]:after {
-        content: initial;
-    }
-}
-
-// Pages Management
-.o_page_management_info{
-    .o_switch{
-        padding-top: 7px;
-    }
-}
-.popover_dep{
-    overflow-x: auto;
-}
-#edit_website_pages{
-    .fa-check{
-        color: #00a09d;
-    }
-    .fa-eye-slash{
-        color: #00a09d;
-    }
-    th{
-        background-color: @odoo-brand-primary;
-        color: white;
-    }
-    td{
-        a.fa{
-            color: @odoo-brand-primary;
-            margin-left: 5px;
-        }
-        .text-muted{
-            opacity: 0.5;
-        }
-    }
-}
\ No newline at end of file
diff --git a/addons/website/static/src/less/website.ui.less b/addons/website/static/src/less/website.ui.less
index 1a379d44b6a..737fd277258 100644
--- a/addons/website/static/src/less/website.ui.less
+++ b/addons/website/static/src/less/website.ui.less
@@ -1,5 +1,6 @@
 ///
-/// This file regroups main website UI layout rules (when the user is connected).
+/// This file regroups main website UI layout rules (when the user is connected)
+/// and the UI components rules.
 ///
 
 // LAYOUTING
@@ -73,3 +74,484 @@ div.o_checkbox {
         display: none;
     }
 }
+
+.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
+    color: transparent;
+    position: relative;
+    display: inline-block;
+    opacity: @opacity;
+    .square(@size);
+
+    &:hover, &:focus {
+        outline: none;
+        opacity: @opacity-hover;
+
+        &::after, &::before {
+            background: @color-hover;
+        }
+    }
+
+    &:after, &:before {
+        content: '';
+        margin-top: -1px;
+        background: @color;
+        .size(100%, @thickness);
+        .o-position-absolute(50%, @left:0);
+        .o-transform(rotate(45deg));
+    }
+
+    &:after {
+        .o-transform(rotate(-45deg));
+    }
+}
+
+// MODALS
+body .modal {
+    &.o_technical_modal {
+        .o-w-preserve-base();
+        .o-w-preserve-headings();
+        .o-w-preserve-forms();
+        .o-w-preserve-links();
+        .o-w-preserve-btn();
+        .o-w-preserve-wells();
+        .o-w-preserve-modals();
+        .o-w-preserve-tabs();
+
+        button.close {
+            .o-w-close-icon(12px);
+            margin-right: -2px;
+        }
+    }
+
+    // MOBILE PREVIEW
+    &.oe_mobile_preview {
+        text-align: center;
+
+        .modal-dialog {
+            display: inline-block;
+            width: auto;
+
+            .close {
+                color: lightgray;
+                opacity: 1;
+                font-size: 25px;
+                font-weight: normal;
+            }
+
+            .modal-content {
+                background-color: black!important;
+                border: 3px outset gray;
+                border-radius: 20px;
+
+                .modal-header {
+                    border: none;
+                    cursor: pointer;
+                    font-family: @o-we-font-family;
+
+                    h4 {
+                        color: lightgray;
+                        font-family:inherit;
+                        font-weight: normal;
+
+                        .fa {
+                            margin-left: @grid-gutter-width/2;
+                        }
+                    }
+                }
+
+                .modal-body {
+                    background-color: inherit!important;
+                    border-radius: 20px;
+                    padding: 15px;
+
+                    @mobile-preview-width: 320px;
+                    @mobile-preview-height: 530px;
+
+                    .o-flex-display();
+                    width: @mobile-preview-width + 15;
+                    height: @mobile-preview-height;
+                    .o-transition(all, 400ms);
+
+                    &.o_invert_orientation {
+                        width: @mobile-preview-height + 15;
+                        height: @mobile-preview-width;
+                    }
+
+                    > iframe {
+                        display: block;
+                        width: 100%;
+                        border: none;
+                    }
+                }
+
+                .modal-footer {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    // TOP MENU EDITOR
+    .oe_menu_editor {
+        ul {
+            padding-left: 37px;
+        }
+
+        li {
+            margin-top: -1px;
+
+            .input-group-addon {
+                border-radius: 0;
+            }
+        }
+    }
+
+    // SEO CONFIGURATION
+    &.oe_seo_configuration {
+        #language-box {
+            padding-right: 25px;
+            background-color: white;
+            margin-left: -1px;
+        }
+
+        .table {
+            td {
+                vertical-align: middle;
+
+                &:first-child {
+                    padding-right: 15px;
+                    border-width: 0;
+                    width: 35%;
+                }
+
+                &:last-child {
+                    visibility: hidden;
+                }
+            }
+
+            > tfoot {
+                display: none;
+            }
+
+            &.js_seo_has_content {
+                td {
+                    &:first-child {
+                        width: 55%;
+                        padding-right: 15px;
+                        border: 1px solid @o-we-color-text-light;
+                        text-align: right;
+                        background-color: @o-we-color-paper;
+
+                        @media screen and (min-width: @screen-md-min) {
+                            width: 38%;
+                        }
+                    }
+
+                    &:last-child {
+                        border: none;
+                        visibility: visible;
+                        padding-left: 15px;
+
+                        @media screen and (min-width: @screen-md-min) {
+                            padding-left: 50px;
+                        }
+                    }
+                }
+
+                tbody {
+                    td {
+                        padding: 5px;
+                        .o-transition(padding, .3s);
+
+                        &:first-child {
+                            border-width: 0 1px;
+
+                            .label {
+                                position: relative;
+                                display: inline-block;
+                                padding: 7px 35px;
+                                font-size: 16px;
+                                font-weight: normal;
+
+                                .oe_remove {
+                                    .o-w-close-icon(10px, white, @o-we-color-danger, 2px);
+                                    .o-position-absolute(5px, 5px);
+                                }
+                            }
+                        }
+
+                        &:last-child {
+                            .label {
+                                display: block;
+                                font-size: 12px;
+                                font-weight: normal;
+                                opacity: 0.8;
+                                cursor: pointer;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+                    }
+
+                    tr {
+                        .o-animation(fadeInDownSmall, .3s);
+
+                        &:first-child {
+                            td:first-child {
+                                padding-top: 10px;
+                            }
+                        }
+
+                        &:last-child {
+                            td:first-child {
+                                padding-bottom: 10px;
+                                border-bottom-width: 1px;
+                            }
+                        }
+                    }
+                }
+
+                > tfoot {
+                    display: table-footer-group;
+
+                    hr {
+                        margin: 10px 0;
+                    }
+
+                    td, td:first-child {
+                        border: none;
+                        background: none;
+                    }
+                }
+            }
+        }
+
+        li.oe_seo_preview_g {
+            list-style: none;
+            font-family: arial, sans-serif;
+
+            .r {
+                cursor: pointer;
+                color:#1a0dab;
+                font-size: 18px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                -webkit-text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .s {
+                font-size: 13px;
+                line-height: 18px;
+                color: #545454;
+                .kv {
+                    color: #006621;
+                    font-size: 14px;
+                    line-height: 18px;
+                }
+                .st {
+                    height: 50px;
+                }
+            }
+        }
+    }
+}
+
+// ADD NEW PAGE MODAL
+#o_new_content_menu_choices {
+    .o-position-absolute(@odoo-navbar-height, 0, 0, 0);
+    position: fixed;
+    .o-flex-display();
+    .o-justify-content(center);
+    .o-align-items(center);
+    font-family: @o-we-font-family;
+
+    &::before {
+        content: " ";
+        .o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        pointer-events: none;
+        background-color: black;
+        opacity: 0.8;
+    }
+
+    > ul {
+        .o-flex-display();
+        .o-flex-flow(row, wrap);
+        .o-justify-content(space-around);
+        width: auto;
+        max-width: 60%;
+        max-height: 100%;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+            display: block;
+            opacity: 0;
+            .animation(fadeInDownSmall 1s forwards);
+            margin: 2em 32px;
+            padding: 0 15px;
+
+            a {
+                display: block;
+                font-size: 34px;
+                margin: auto;
+                text-align: center;
+
+                i {
+                    width: 110px;
+                    height: 110px;
+                    border: 3px solid lighten(#2C2C36, 10%);
+                    border-radius: 100%;
+                    line-height: 104px;
+                    background-color: #2C2C36;
+                    color: white;
+
+                    .o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1));
+                }
+                p {
+                    color: white;
+                    margin-top: 0.7em;
+                    font-size: 0.5em;
+                }
+
+                &:hover, &:focus {
+                    text-decoration: none;
+                    i {
+                        border-color: #1cc1a9;
+                        box-shadow: 0 0 10px rgba(28, 193, 169, 0.46);
+                    }
+                }
+            }
+        }
+    }
+}
+
+// LOGIN FORM
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+    max-width: 300px;
+    position: relative;
+    margin: 50px auto;
+}
+
+// CUSTOMIZE THEME
+#theme_error {
+    background: #ffc;
+}
+#theme_customize_modal {
+    overflow: visible;
+    z-index: 1020;
+    display: block;
+    .modal-dialog {
+        .o-position-absolute(@odoo-navbar-height + 10, 10px);
+        width: auto;
+        margin: 0;
+        font-family: Roboto;
+    }
+    .loading_backdrop {
+        display: none;
+    }
+    &.loading .loading_backdrop {
+        .o-position-absolute(0, 0, 0, 0);
+        display: block;
+        background: black;
+        opacity: 0.3;
+        z-index: 1;
+    }
+    label {
+        display: block;
+        text-align: center;
+        > div, > img {
+            border: 1px solid #fff;
+            line-height: 30px;
+            font-size: 0.9em;
+            margin: 2px 4px;
+        }
+        &.checked > div, &.checked > img {
+            box-shadow: 2px 2px 3px #888;
+            border: 1px solid #666;
+        }
+        img {
+            width: 60px;
+            height: 35px;
+            margin: 2px;
+            border: 1px solid rgba(136, 136, 136, 0.5);
+        }
+        input {
+            display: none;
+        }
+    }
+}
+
+// ACE EDITOR
+.o_ace_view_editor {
+    .o-w-preserve-base();
+    .o-w-preserve-btn();
+    .o-w-preserve-forms();
+
+    .o-position-absolute(@odoo-navbar-height, 0, 0);
+    position: fixed;
+    z-index: 1001;
+}
+
+// POPOVER NAVIGATION
+.tour .popover-navigation {
+    margin-left: 13px;
+    margin-bottom: 8px;
+}
+
+// PUBLISH
+.css_published {
+    .btn-danger, .css_publish {
+        display: none;
+    }
+}
+.css_unpublished {
+    .btn-success, .css_unpublish {
+        display: none;
+    }
+}
+[data-publish='off'] > *:not(.css_options) {
+    opacity: 0.5;
+}
+
+// Do not show path behind the links in browser printing
+@media print {
+    a[href]:after {
+        content: initial;
+    }
+}
+
+// Pages Management
+.o_page_management_info{
+    .o_switch{
+        padding-top: 7px;
+    }
+}
+.popover_dep{
+    overflow-x: auto;
+}
+#edit_website_pages{
+    .fa-check{
+        color: #00a09d;
+    }
+    .fa-eye-slash{
+        color: #00a09d;
+    }
+    th{
+        background-color: @odoo-brand-primary;
+        color: white;
+    }
+    td{
+        a.fa{
+            color: @odoo-brand-primary;
+            margin-left: 5px;
+        }
+        .text-muted{
+            opacity: 0.5;
+        }
+    }
+}
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index b205864b8ff..960bfea0790 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -3,7 +3,7 @@
 <!-- Assets -->
 <template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets (used in backend interface)">
     <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" href="/website/static/src/less/website.backendDashboard.less"/>
+        <link rel="stylesheet" href="/website/static/src/less/website.backend.less"/>
     </xpath>
     <xpath expr="//script[last()]" position="after">
         <script type="text/javascript" src="/website/static/src/js/backend/button.js"/>
@@ -20,9 +20,8 @@
 
 <template id="assets_frontend" inherit_id="web.assets_frontend" name="Website Assets">
     <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.less"/>
         <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.ui.less"/>
-        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.ui.components.less"/>
-        <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.snippets.less"/>
         <link rel="stylesheet" type="text/less" href="/website/static/src/less/website.zoomodoo.less"/>
     </xpath>
     <xpath expr="//script[last()]" position="after">