[IMP] web_editor, *: review the editor design CSS

*: web, mass_mailing, website, website_form, website_sale New CSS design of the editor (step 1/x). This work is unfortunately far from perfect but is a first step towards what we want. In particular, much CSS linked to elements that are meant to be removed/moved in the upcoming weeks was done in a huge rush but will thus hopefully be removed/reviewed before the 14.0 release. As the design is now far more complex including gradients and other "complex" elements, it was also very difficult to keep a design based on css-variable so this system was removed, which means that the editor now appears the same everywhere (backend, frontend, ...). The original goal of this system was to have an adapted style for backend, frontend and website visitors. Unfortunately, the current result was a very good frontend editor design, a not-so-good backend editor design (for mass mailing at least) and a totally unadapted design for the website visitors. Making this perfect will be achievable by loading different assets for those 3 areas and hopefully those assets will only differ by the values of editor scss variables. Part of https://github.com/odoo/odoo/pull/53930 task-2157252
author: qsm-odoo <qsm@odoo.com> 2020-07-01 14:52:06 +0000
committer: qsm-odoo <qsm@odoo.com> 2020-07-14 14:43:16 +0000
commit: f16113a06e31c0dd04f13be5537d24a8e3d4f96a (patch)
tree: 3f636fd512ce1d8b2bb7b953ce6fe7e56c2438c5
parent: 6c31104fa99e3e9b5c28195a0c4060d95c78b94e (diff)
20 files changed, 859 insertions, 576 deletions
diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index a9c84da00f0..5ca2d758931 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -12,15 +12,15 @@
         height: $o-we-toolbar-height;
         line-height: $o-we-toolbar-height;
         border-radius: 0;
-        background-color: $o-we-bg-color;
-        color: $o-we-color;
+        background-color: $o-we-sidebar-bg;
+        color: #212629;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: none !important;
 
         &:hover, &:focus, &:active {
-            color: $o-we-color-light;
+            color: #4e525b;
         }
 
         i {
@@ -30,7 +30,7 @@
 
     &.show > a {
         color: white;
-        background-color: $o-we-color;
+        background-color: #212629;
     }
 
     .dropdown-menu {
@@ -42,7 +42,7 @@
         margin: 0;
         border-radius: 0;
         overflow: auto;
-        background-color: $o-we-bg-color;
+        background-color: $o-we-sidebar-bg;
         z-index: 1050;
 
         &.show {
@@ -71,7 +71,7 @@
 
 
             &:hover {
-                background-color: $o-we-bg-color;
+                background-color: $o-we-sidebar-bg;
 
                 .o_thumb {
                     border: 1px solid black;
@@ -80,7 +80,7 @@
 
             &.selected .o_thumb {
                 border: 2px solid $o-brand-odoo;
-                background-color: $o-we-bg-color;
+                background-color: $o-we-sidebar-bg;
             }
         }
     }
@@ -113,7 +113,7 @@ body.o_force_mail_theme_choice {
                     .o_thumb {
                         display: none;
                         padding-top: 107%;
-                        border: 1px solid $o-we-color-light;
+                        border: 1px solid #4e525b;
                         border-top: 1px solid $o-we-border-color;
                         box-shadow: 0 5px 10px rgba(black, 0.8);
                         will-change: transform;
@@ -135,7 +135,7 @@ body.o_force_mail_theme_choice {
                     }
 
                     &:hover {
-                        background-color: $o-we-color;
+                        background-color: #212629;
 
                         .o_thumb {
                             box-shadow: 0 5px 30px 1px rgba(black, 0.6);
@@ -202,7 +202,7 @@ body.editor_enable.o_basic_theme.o_in_iframe {
     @media (max-width: map-get($grid-breakpoints, 'lg')) {
         width: auto;
         margin-left: $o-we-sidebar-width;
-    }  
+    }
 }
 
 :root {
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index 76d68c79ab3..94c243777d9 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -8,7 +8,7 @@
         max-height: 100px;
     }
     h4 {
-        color: $o-we-color-text-normal;
+        color: #999999;
         font-weight: 700;
         text-transform: uppercase;
     }
@@ -102,7 +102,7 @@
             }
             &.o_total strong {
                 color: white;
-            } 
+            }
         }
     }
 }
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index f40490dbc86..12a21bde93a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -834,6 +834,7 @@ var SnippetsMenu = Widget.extend({
         'block_preview_overlays': '_onBlockPreviewOverlays',
         'unblock_preview_overlays': '_onUnblockPreviewOverlays',
         'user_value_widget_opening': '_onUserValueWidgetOpening',
+        'user_value_widget_closing': '_onUserValueWidgetClosing',
         'reload_snippet_template': '_onReloadSnippetTemplate',
     },
     // enum of the SnippetsMenu's tabs.
@@ -1838,7 +1839,7 @@ var SnippetsMenu = Widget.extend({
                 stop: function (ev, ui) {
                     $toInsert.removeClass('oe_snippet_body');
 
-                    if (!dropped && ui.position.top > 3 && ui.position.left + 50 > self.$el.outerWidth()) {
+                    if (!dropped && ui.position.top > 3 && ui.position.left > self.el.getBoundingClientRect().right) {
                         var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
                         if ($el.length) {
                             $el.after($toInsert);
@@ -2276,10 +2277,18 @@ var SnippetsMenu = Widget.extend({
     },
     /**
      * Called when an user value widget is being opened -> close all the other
-     * user value widgets of all editors.
+     * user value widgets of all editors + add backdrop.
      */
     _onUserValueWidgetOpening: function () {
         this._closeWidgets();
+        this.el.classList.add('o_we_backdrop');
+    },
+    /**
+     * Called when an user value widget is being closed -> rely on the fact only
+     * one widget can be opened at a time: remove the backdrop.
+     */
+    _onUserValueWidgetClosing: function () {
+        this.el.classList.remove('o_we_backdrop');
     },
 });
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 3c2bcb2b22e..d6fd28e7ed0 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -161,6 +161,8 @@ const UserValueWidget = Widget.extend({
      * Closes the widget (only meaningful for widgets that can be closed).
      */
     close: function () {
+        this.trigger_up('user_value_widget_closing');
+        this.el.classList.remove('o_we_widget_opened');
         this._userValueWidgets.forEach(widget => widget.close());
     },
     /**
@@ -380,6 +382,13 @@ const UserValueWidget = Widget.extend({
         this.trigger_up('user_value_update', data);
     },
     /**
+     * Opens the widget (only meaningful for widgets that can be opened).
+     */
+    open() {
+        this.trigger_up('user_value_widget_opening');
+        this.el.classList.add('o_we_widget_opened');
+    },
+    /**
      * Adds the given widget to the known list of user value sub-widgets (useful
      * for container widgets).
      *
@@ -699,6 +708,13 @@ const SelectUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
+    open() {
+        this._super(...arguments);
+        this.menuTogglerEl.classList.add('active');
+    },
+    /**
+     * @override
+     */
     setValue: function (value, methodName) {
         this._userValueWidgets.forEach(widget => {
             widget.setValue('__NULL__', methodName);
@@ -751,8 +767,7 @@ const SelectUserValueWidget = UserValueWidget.extend({
         }
 
         if (!this.menuTogglerEl.classList.contains('active')) {
-            this.trigger_up('user_value_widget_opening');
-            this.menuTogglerEl.classList.add('active');
+            this.open();
         } else {
             this.close();
         }
@@ -966,7 +981,9 @@ const MultiUserValueWidget = UserValueWidget.extend({
      * @override
      */
     start: function () {
-        this.containerEl.appendChild(_buildRowElement('', this.options));
+        if (this.options && this.options.childNodes) {
+            this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
+        }
         return this._super(...arguments);
     },
 
@@ -1330,7 +1347,8 @@ const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
         await this._super(...arguments);
 
         const datetimePickerId = _.uniqueId('datetimepicker');
-        this.inputEl.setAttribute('class', 'datetimepicker-input mx-0 text-left');
+        this.el.classList.add('o_we_large_input');
+        this.inputEl.classList.add('datetimepicker-input', 'mx-0', 'text-left');
         this.inputEl.setAttribute('id', datetimePickerId);
         this.inputEl.setAttribute('data-target', '#' + datetimePickerId);
 
@@ -1443,7 +1461,6 @@ const RangeUserValueWidget = UserValueWidget.extend({
         await this._super(...arguments);
         this.input = document.createElement('input');
         this.input.type = "range";
-        this.input.className = "custom-range";
         this.containerEl.appendChild(this.input);
     },
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 39923c9c670..b2fb1ef821e 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -390,7 +390,7 @@ a.o_underline {
         background-color: lighten($o-we-ace-color, 10%);
 
         .o_ace_editor_resource_info {
-            color: $o-we-color-text-lighter;
+            color: #ebecee;
         }
     }
 
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 21ce8c9fe8d..f031e0c8a50 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -2,69 +2,182 @@
 /// This files regroups the variables and mixins which are specific to the editor.
 ///
 
-$o-support-13-0-color-system: false !default;
+//------------------------------------------------------------------------------
+// Odoo Editor UI
+//------------------------------------------------------------------------------
 
-$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$o-we-bg-darkest: #000000 !default;
+$o-we-bg-darker: #141217 !default;
+$o-we-bg-dark: #191922 !default;
+$o-we-bg-light: #23232D !default;
+$o-we-bg-lighter: #32323D !default;
+
+$o-we-fg-darker: #808080 !default;
+$o-we-fg-dark: #C6C6C6 !default;
+$o-we-fg-light: #D9D9D9 !default;
+$o-we-fg-lighter: #FFFFFF !default;
 
-$o-we-font-size: 13px;
-$o-we-line-height: 1.5;
-$o-we-bg-color: #F7F7F7 !default;
-$o-we-bg-color-dark: #a7a7a7 !default;
-$o-we-color: #212629 !default;
-$o-we-border-width: 1px !default;
-$o-we-border-color: rgba(0, 0, 0, 0.125) !default;
-$o-we-dropdown-bg-color: #FFFFFF;
-$o-we-dropdown-color: inherit;
-
-$o-we-color-dark: #2c2c36 !default;
-$o-we-color-darker: darken($o-we-color-dark, 2%) !default;
-$o-we-color-divider: #33363e !default;
-$o-we-color-light: #4e525b !default;
-$o-we-color-normal: #3D4047 !default;
-$o-we-color-text-normal: #999999 !default;
-$o-we-color-text-light: #d4d5d7 !default;
-$o-we-color-text-lighter: #ebecee !default;
 $o-we-color-danger: #e6586c !default;
 $o-we-color-warning: #f0ad4e !default;
 $o-we-color-success: #40ad67 !default;
 $o-we-color-info: #6999a8 !default;
 
-$o-we-sidebar-width: 230px !default;
+$o-we-bg: $o-we-bg-light !default;
+$o-we-color: $o-we-fg-light !default;
+$o-we-font-size: 13px !default;
+$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$o-we-accent: #00ABC1 !default;
+$o-we-border-width: 1px !default;
+$o-we-border-color: $o-we-bg-light !default;
+
+$o-we-ace-color: #2F3129 !default;
 
 $o-we-handles-offset-to-hide: 10000px !default;
 $o-we-handles-btn-size: 18px !default;
-$o-we-handles-accent-color: #00e2ff !default;
+$o-we-handles-accent-color: $o-we-accent !default;
 $o-we-handles-accent-color-preview: $o-enterprise-color !default;
 $o-we-handle-edge-size: 8px !default;
 $o-we-handle-border-width: 2px !default;
 
-// Transitions
-$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
-
-// Editor
 $o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable)
 $o-we-dropzone-border-width: 2px !default;
 $o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
 
-$o-we-ace-color: #2F3129 !default;
-
-$o-we-switch-size: 2ex !default;
-$o-we-switch-inactive-color: $o-we-bg-color !default;
-
-// Checklist
-$o-checklist-margin-left: 20px;
-$o-checklist-checkmark-width: 2px;
-$o-checklist-before-size: 13px;
-
-$o-we-toolbar-height: 32px;
+// Translations
+$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
+$o-we-translated-content-color: rgb(120, 215, 110) !default;
 
-// ============    'Preview' component Mixins    ===============
-// Create a "preview" work-area to edit/customize specific elements
+$o-we-toolbar-height: 32px !default;
+
+$o-we-item-border-width: 1px !default;
+$o-we-item-border-color: $o-we-bg-darkest !default;
+$o-we-item-border-radius: 1px !default;
+$o-we-item-clickable-bg: linear-gradient($o-we-bg-light, $o-we-bg-darker) !default;
+$o-we-item-pressed-bg: linear-gradient($o-we-bg-darkest, $o-we-bg-darker) !default;
+$o-we-item-pressed-color: $o-we-fg-light !default;
+
+$o-we-dropdown-spacing: 5px !default;
+$o-we-dropdown-bg: $o-we-bg-darker !default;
+$o-we-dropdown-border-width: 1px !default;
+$o-we-dropdown-border-color: $o-we-bg-darkest !default;
+$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
+$o-we-dropdown-item-height: 30px !default;
+$o-we-dropdown-item-spacing: 1px !default;
+$o-we-dropdown-item-bg: $o-we-bg-light !default;
+$o-we-dropdown-item-color: $o-we-fg-dark !default;
+$o-we-dropdown-item-active-color: $o-we-fg-light !default;
+
+$o-we-sidebar-bg: $o-we-bg !default;
+$o-we-sidebar-color: $o-we-color !default;
+$o-we-sidebar-font-size: 11px !default;
+$o-we-sidebar-border-width: $o-we-border-width !default;
+$o-we-sidebar-border-color: $o-we-border-color !default;
+$o-we-sidebar-width: $o-we-sidebar-border-width + 270px !default;
+
+$o-we-sidebar-top-height: 26px !default;
+
+$o-we-sidebar-tabs-border-width: $o-we-sidebar-border-width !default;
+$o-we-sidebar-tabs-border-color: $o-we-sidebar-border-color !default;
+$o-we-sidebar-tabs-height: $o-we-sidebar-tabs-border-width + 29px !default;
+$o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
+$o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
+$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
+$o-we-sidebar-tabs-active-border-width: 2px !default;
+$o-we-sidebar-tabs-active-border-color: $o-we-accent !default;
+$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default;
+
+$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default;
+$o-we-sidebar-blocks-content-spacing: 10px !default;
+$o-we-sidebar-blocks-content-snippet-spacing: 2px !default;
+$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default;
+
+$o-we-sidebar-content-highlight-bar-width: 2px !default;
+$o-we-sidebar-content-highlight-bar-color: $o-we-accent !default;
+
+$o-we-sidebar-content-gutter-item-indent: 5px !default;
+$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-highlight-bar-width + 12px !default;
+$o-we-sidebar-content-backdrop-bg: rgba(black, 0.5) !important;
+
+$o-we-sidebar-content-main-title-border-width: 1px !default;
+$o-we-sidebar-content-main-title-border-color: $o-we-bg-light !default;
+$o-we-sidebar-content-main-title-height: 32px !default;
+$o-we-sidebar-content-main-title-shadow-start: rgba(black, 0.7);
+$o-we-sidebar-content-main-title-shadow: linear-gradient($o-we-sidebar-content-main-title-shadow-start, rgba(black, 0)) !default;
+$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
+$o-we-sidebar-content-main-title-font-size: 13px !default;
+$o-we-sidebar-content-main-title-margin-bottom: 2px !default;
+
+$o-we-sidebar-content-block-spacing: 10px !default;
+
+$o-we-sidebar-content-fold-block-bg: $o-we-bg-dark !default;
+$o-we-sidebar-content-fold-block-inner-spacing: $o-we-sidebar-content-block-spacing !default;
+
+$o-we-sidebar-content-field-spacing: 5px !default;
+$o-we-sidebar-content-field-color: $o-we-fg-dark !default;
+$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-control-item-size: 1em !default;
+$o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
+$o-we-sidebar-content-field-label-spacing: 4px !default;
+$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-field-label-spacing + 102px !default;
+$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing !default;
+$o-we-sidebar-content-field-height: 22px !default;
+
+$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
+$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default;
+$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default;
+$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default;
+$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default;
+$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default;
+$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default;
+$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default;
+
+$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default;
+$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default;
+$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default;
+$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default;
+$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
+$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
+$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
+$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
+$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
+$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
+
+$o-we-sidebar-content-field-colorpicker-size: 20px !default;
+$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-light !important;
+$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !important;
+$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !important;
+$o-we-sidebar-content-field-colorpicker-cc-width: 208px !important;
+$o-we-sidebar-content-field-colorpicker-cc-height: 26px !important;
+
+$o-we-sidebar-content-field-input-max-width: 60px !default;
+$o-we-sidebar-content-field-input-bg: $o-we-bg-darker !default;
+$o-we-sidebar-content-field-input-font-family: monospace !default;
+$o-we-sidebar-content-field-input-unit-font-size: 9px !default;
+$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
+
+$o-we-sidebar-content-field-progress-height: 3px !default;
+$o-we-sidebar-content-field-progress-control-height: 7px !default;
+$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-progress-active-color: $o-we-accent !default;
+
+$o-we-sidebar-content-field-toggle-width: 20px !default;
+$o-we-sidebar-content-field-toggle-height: 12px !default;
+$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default;
+$o-we-sidebar-content-field-toggle-control-width: 11px !default;
+$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
+$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
+$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default;
+
+//------------------------------------------------------------------------------
+// Preview component Mixins
+//------------------------------------------------------------------------------
 
 @mixin o-we-preview-box($color-text: white) {
     border-top: 1px solid black;
     border-bottom: 1px solid white;
-    background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
+    background-image: linear-gradient(-150deg, $o-we-bg-light, $o-we-bg-dark);
 
     color:  $color-text;
 }
@@ -76,17 +189,18 @@ $o-we-toolbar-height: 32px;
     box-shadow: 0 0 15px 2px #000;
 }
 
-// ============    Preservation mixins    ===============
-// Used to preserve web_editor and website UI from themes customizations
+//------------------------------------------------------------------------------
+// Mixins to shield UI from themed bootstrap
+//------------------------------------------------------------------------------
 
 @mixin o-w-preserve-base {
     font-size: $o-we-font-size;
     font-family: $o-we-font-family;
     line-height: 1.5;
-    color: $o-we-color-divider;
+    color: #33363e;
 
     .text-muted {
-        color: $o-we-color-text-normal !important;
+        color: #999999 !important;
     }
 }
 
@@ -94,7 +208,7 @@ $o-we-toolbar-height: 32px;
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
         font-family: $o-we-font-family;
         line-height: 1.5;
-        color: $o-we-color-dark;
+        color: $o-we-bg-light;
         font-weight: bold;
     }
     h1, .h1 {
@@ -141,7 +255,7 @@ $o-we-toolbar-height: 32px;
         padding: 6px 12px;
         font-size: 14px;
         line-height: 1.5;
-        border: 1px solid $o-we-color-text-light;
+        border: 1px solid #d4d5d7;
         color: #555;
         background-color: #fff;
         border-radius: 0;
@@ -172,10 +286,9 @@ $o-we-toolbar-height: 32px;
 }
 
 @mixin o-w-preserve-modals {
-
     .modal-content {
         border-radius: 0;
-        background-color: $o-we-bg-color;
+        background-color: white;
 
         .modal-header {
             border-bottom-color: #e9ecef;
@@ -201,7 +314,7 @@ $o-we-toolbar-height: 32px;
         > li  {
             > a {
                 line-height: 1.5;
-                color: $o-we-color-light;
+                color: #4e525b;
 
                 &:hover {
                     border-color: #dee2e6;
@@ -209,8 +322,8 @@ $o-we-toolbar-height: 32px;
 
                 &.active {
                     &, &:hover, &:focus {
-                        color: $o-we-color-normal;
-                        background-color: $o-we-bg-color;
+                        color: #3D4047;
+                        background-color: white;
                         border-color: #dee2e6 #dee2e6 #FFFFFF;
                     }
                 }
@@ -231,11 +344,11 @@ $o-we-toolbar-height: 32px;
             color: white;
         }
         &.btn-secondary {
-            @include button-variant($o-we-bg-color, $o-we-bg-color);
+            @include button-variant(white, white);
             color: $o-brand-primary;
         }
         &.btn-link {
-            @include button-variant($o-we-bg-color, $o-we-bg-color);
+            @include button-variant(white, white);
             color: $o-brand-primary;
         }
         &.btn-success {
@@ -248,11 +361,11 @@ $o-we-toolbar-height: 32px;
         }
         &.btn-warning {
             @include button-variant($o-we-color-warning, $o-we-color-warning);
-            color: $o-we-color-divider;
+            color: #33363e;
         }
         &.btn-danger {
             @include button-variant($o-we-color-danger, $o-we-color-danger);
-            color: $o-we-color-divider;
+            color: #33363e;
         }
     }
 }
@@ -261,8 +374,8 @@ $o-we-toolbar-height: 32px;
     .card {
         padding: 19px;
         margin-bottom: 20px;
-        background-color: $o-we-bg-color;
-        border: 1px solid darken($o-we-bg-color, 5%);
+        background-color: white;
+        border: 1px solid darken(white, 5%);
         border-radius: 0;
         box-shadow: none;
     }
@@ -286,6 +399,17 @@ $o-we-toolbar-height: 32px;
     }
 }
 
+//------------------------------------------------------------------------------
+// Edited content
+//------------------------------------------------------------------------------
+
+$o-support-13-0-color-system: false !default;
+
+$o-checklist-margin-left: 20px;
+$o-checklist-checkmark-width: 2px;
+$o-checklist-before-size: 13px;
+
+
 // Edition colors
 
 // Note: the "base" palettes contain all possible keys a palette should or
@@ -416,10 +540,6 @@ $o-color-combinations-presets: (
 ) !default;
 $o-color-combinations-preset-number: 1;
 
-// Translations
-$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
-$o-we-translated-content-color: rgb(120, 215, 110) !default;
-
 // We allow snippets to be colored and elements like card and columns to be
 // colored as well. We need components targeted by those colored classes to
 // use the deepest coloring element config. We only allow here for this to
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index d5f3b759fb7..d76b7f4b648 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -5,18 +5,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 // external assets bundle can influence it without duplicating the css.
 :root {
     @include print-variable('o-we-toolbar-height', $o-we-toolbar-height);
-
-    @include print-variable('o-we-bg-color', $o-we-bg-color);
-    @include print-variable('o-we-bg-color-dark', $o-we-bg-color-dark);
-    @include print-variable('o-we-color', $o-we-color);
-    @include print-variable('o-we-color-accent', $o-we-color);
-
-    @include print-variable('o-we-dropdown-bg-color', $o-we-dropdown-bg-color);
-    @include print-variable('o-we-dropdown-color', $o-we-dropdown-color);
-
-    @include print-variable('o-we-snippets-bg-color', $o-we-bg-color);
-    @include print-variable('o-we-snippets-bg-info', $o-we-color-info);
-    @include print-variable('o-we-snippets-color', $o-we-color);
 }
 
 // EDITOR TOP BAR AND POPOVER
@@ -24,6 +12,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     max-width: 350px;
     left: 50% !important;
     transform: translate(-50%, 0);
+
     .popover-body {
         white-space: normal;
     }
@@ -31,6 +20,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
 .editor_enable {
     padding-top: var(--o-we-toolbar-height) !important;
+
     .note-popover .popover .popover-body {
         height: var(--o-we-toolbar-height);
     }
@@ -44,7 +34,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     position: fixed;
     z-index: $o-we-zindex;
     height: var(--o-we-toolbar-height);
-    background-color: var(--o-we-bg-color);
+    background-color: $o-we-bg;
+    transition: transform 400ms ease 0s; // For fullscreen
 
     .note-popover .popover {
         top: 0 !important;
@@ -69,7 +60,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 .panel-heading.note-toolbar {
     padding-bottom: 0;
     border-bottom: $o-we-border-width solid $o-we-border-color;
-    background-color: var(--o-we-bg-color);
+    background-color: $o-we-bg;
+    color: $o-we-color;
     font-family: $o-we-font-family;
 
     // Main layout of buttons
@@ -89,20 +81,13 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     // Active buttons and opened dropdowns
     .btn {
         padding: 0.5em 0.75em !important;
-        border-left: 1px solid transparent;
-        border-right: 1px solid transparent;
-        color: var(--o-we-color);
+        border-left: $o-we-item-border-width solid $o-we-item-border-color;
+        border-right: $o-we-item-border-width solid $o-we-item-border-color;
+        background: $o-we-sidebar-content-field-clickable-bg;
+        color: inherit;
         font-size: $o-we-font-size !important;
 
-        &.active {
-            background-color: var(--o-we-bg-color-dark);
-            color: var(--o-we-color-accent);
-        }
-
-        &:hover {
-            color: var(--o-we-color-accent);
-        }
-
+        &.active,
         &:focus, &:active, &:focus:active {
             @extend %we-active-button;
         }
@@ -115,24 +100,20 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
             content: '';
             @include o-position-absolute(100%, $o-we-border-width, auto, $o-we-border-width);
             height: $o-we-border-width;
-            background-color: var(--o-we-dropdown-bg-color);
         }
     }
     %we-active-button {
-        border-left-color: $o-we-border-color;
-        border-right-color: $o-we-border-color;
-        background: var(--o-we-dropdown-bg-color);
+        background: $o-we-sidebar-content-field-pressed-bg;
+        color: $o-we-sidebar-content-field-pressed-color;
         box-shadow: none !important;
         outline: none !important;
     }
     .dropdown-menu {
-        margin-top: 0;
-        border: $o-we-border-width solid $o-we-border-color;
-        border-top-color: transparent;
-        border-radius: 0;
-        background-color: var(--o-we-dropdown-bg-color);
-        color: var(--o-we-dropdown-color);
-        box-shadow: none;
+        margin-top: $o-we-dropdown-spacing;
+        padding: 0;
+        border: $o-we-dropdown-border-width solid $o-we-dropdown-border-color;
+        background-color: $o-we-dropdown-bg;
+        box-shadow: $o-we-dropdown-shadow;
     }
     .dropdown-menu.show { // To overcome .note-XXX .dropdown-menu rules
         min-width: 0;
@@ -141,14 +122,47 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         display: block;
         max-width: none;
         overflow: visible;
-        color: var(--o-we-color);
+        margin-top: 0;
+        padding: 0 1em;
+        border: none;
+        background: none;
+        background-clip: padding-box;
+        background-color: $o-we-dropdown-item-bg;
+        color: $o-we-dropdown-item-color;
+        line-height: $o-we-dropdown-item-height;
+
+        &:not(.d-none) ~ .dropdown-item {
+            // Use a border-top instead of a margin-top as when the
+            // mouse goes from one select button to another, the
+            // option preview should switch from the first button's
+            // option to the second one without reset to selected
+            // state in between.
+            border-top: $o-we-dropdown-item-spacing solid transparent;
+        }
 
-        &:hover {
-            background-color: var(--o-we-bg-color) !important;
-            color: var(--o-we-color-accent) !important;
+        &.active {
+            color: $o-we-dropdown-item-active-color;
+        }
+    }
+    li > .dropdown-item {
+        border-top: $o-we-dropdown-item-spacing solid transparent;
+    }
 
+    .note-style {
+        .dropdown-item {
             > * {
-                color: inherit !important;
+                display: inline;;
+            }
+            &, > * {
+                line-height: 2;
+            }
+            &[data-value="blockquote"] {
+                padding-top: 0.5em;
+                padding-bottom: 0.5em;
+
+                > * {
+                    display: block;
+                }
             }
         }
     }
@@ -159,7 +173,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         max-width: 150px;
     }
     .note-color-palette div .note-color-btn {
-        border-color: var(--o-we-dropdown-bg-color);
+        border-color: $o-we-dropdown-bg;
     }
     .note-custom-color-palette .note-color-row {
         height: auto!important;
@@ -169,7 +183,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
             width: 20px;
             padding: 0;
             margin: 0;
-            border: 1px solid var(--o-we-dropdown-bg-color);
+            border: 1px solid $o-we-dropdown-bg;
         }
     }
 }
@@ -457,13 +471,9 @@ img::selection {
         button:not(.btn), label {
             margin: 0;
             border: none;
-            border-right: 1px solid var(--o-we-bg-color-dark);
-            background-color: var(--o-we-bg-color);
-            color: var(--o-we-color);
-
-            &:hover {
-                background-color: var(--o-we-bg-color-dark);
-            }
+            border-right: 1px solid $o-we-bg;
+            background-color: $o-we-bg;
+            color: $o-we-color;
 
             &:first-child {
                 border-top-left-radius: 0.25rem;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index da7caa44c5f..f803ea557aa 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -47,52 +47,99 @@ body.editor_enable.editor_has_snippets {
         }
     }
 }
+
+
+.oe_snippet {
+    // No root because can be drag and drop (and the helper is in the body)
+    position: relative;
+    z-index: $o-we-zindex;
+    width: 100px;
+    background-color: $o-we-sidebar-blocks-content-snippet-bg;
+
+    &.ui-draggable-dragging {
+        transform: rotate(3deg);
+        box-shadow: 0 5px 25px -10px black;
+        transition: transform 0.3s, box-shadow 0.3s;
+    }
+
+    > :not(.oe_snippet_thumbnail) {
+        display: none !important;
+    }
+
+    .oe_snippet_thumbnail {
+        width: 100%;
+
+        .oe_snippet_thumbnail_img {
+            width: 100%;
+            height: 0;
+            padding-bottom: 75%;
+            background-size: cover;
+            background-position: center center;
+            text-align: center;
+            overflow: hidden;
+        }
+
+        img.oe_snippet_thumbnail_img {
+            height: auto;
+            padding-bottom: 0;
+        }
+    }
+
+    .oe_snippet_thumbnail_title {
+        display: none;
+    }
+}
+
 // SNIPPET PANEL
 #oe_snippets {
     @include o-w-preserve-btn;
 
-    @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
+    @include o-position-absolute(var(--o-we-toolbar-height), auto, 0, 0);
     position: fixed;
     z-index: $o-we-zindex;
     display: flex;
     flex-flow: column nowrap;
     width: $o-we-sidebar-width;
 
-    border-right: $o-we-border-width solid $o-we-border-color;
-    background-color: var(--o-we-snippets-bg-color);
-    color: var(--o-we-snippets-color);
-    box-shadow: 0px 10px 10px -10px black inset;
-    font-family: Roboto, $font-family-sans-serif;
-    font-size: $o-we-font-size;
-    line-height: $o-we-line-height;
+    border-right: $o-we-sidebar-border-width solid $o-we-sidebar-border-color;
+    background-color: $o-we-sidebar-bg;
+    color: $o-we-sidebar-color;
+    font-family: $o-we-font-family;
+    font-size: $o-we-sidebar-font-size;
+    font-weight: 700;
+    line-height: 1;
 
-    transition: left 400ms $o-we-md-ease 0s;
+    transition: transform 400ms ease 0s; // Also for fullscreen
+    transform: translateX(-100%);
 
     &.o_loaded {
-        left: 0 !important;
+        transform: none;
     }
 
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
-        height: var(--o-we-toolbar-height);
-        background: var(--o-we-bg-color);
-        color: var(--o-we-color);
-        font-family: $o-we-font-family;
+        height: $o-we-sidebar-tabs-height;
+        border-bottom: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color;
+        background: $o-we-sidebar-tabs-bg;
+        color: $o-we-sidebar-tabs-color;
 
         > button {
             flex: 1 1 auto;
             border: none;
             background: transparent;
             color: inherit;
+            font-weight: inherit; // Don't know why but does not work without it
             @include o-text-overflow();
 
-            &.active {
-                background: var(--o-we-snippets-bg-color);
-                color: var(--o-we-snippets-color);
+            &:disabled {
+                color: $o-we-sidebar-tabs-disabled-color;
             }
 
+            &.active,
             &:focus, &:active, &:focus:active {
+                border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
+                color: $o-we-sidebar-tabs-active-color;
                 outline: none;
             }
         }
@@ -104,60 +151,49 @@ body.editor_enable.editor_has_snippets {
         overflow: auto;
     }
 
-    .o_panel_header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3%;
-        color: inherit;
-        margin-bottom: 3%;
-
-        i {
-            margin-right: 5px;
+    > #o_scroll {
+        background-color: $o-we-sidebar-blocks-content-bg;
+        padding: 0 $o-we-sidebar-blocks-content-spacing;
+
+        .o_panel, .o_panel_header {
+            padding: $o-we-sidebar-blocks-content-spacing 0;
         }
-    }
 
-    > #o_scroll {
         .o_panel_body {
-            &:after {
-                content: " ";
+            margin-left: -$o-we-sidebar-blocks-content-snippet-spacing;
+
+            &::after {
+                content: "";
                 display: table;
-                clear: both;
+                clear: left;
             }
 
-            .oe_snippet {
+            > .oe_snippet {
                 float: left;
-                width: 45.5%;
-                margin: 0 0 6% 3%;
-                box-shadow: none;
-                background-color: transparent;
+                width: percentage(1 / 3);
+                background-clip: padding-box;
+                border-left: $o-we-sidebar-blocks-content-snippet-spacing solid transparent;
+                margin-bottom: $o-we-sidebar-blocks-content-snippet-spacing;
                 user-select: none;
 
                 cursor: pointer;
                 cursor: copy;
                 cursor: grab;
 
-                .oe_snippet_thumbnail {
-                    .oe_snippet_thumbnail_img {
-                        border: none;
-                    }
-
-                    .oe_snippet_thumbnail_title {
-                        border: none;
-                        padding: 5px 0;
-                    }
+                &:nth-child(3n+1) {
+                    clear: left;
+                }
 
-                    &:hover .oe_snippet_thumbnail_img {
-                        transition: transform 200ms ease 0s;
-                        transform: scale(1.05);
-                    }
+                .oe_snippet_thumbnail_title {
+                    display: block;
+                    padding: $o-we-sidebar-blocks-content-spacing / 2;
+                    text-align: center;
                 }
 
                 &.o_disabled {
                     .oe_snippet_thumbnail {
                         background-color: rgba(255, 0, 0, 0.75);
                     }
-
                     .oe_snippet_thumbnail_img {
                         opacity: 0.8;
                     }
@@ -167,20 +203,14 @@ body.editor_enable.editor_has_snippets {
                     .oe_snippet_thumbnail_img {
                         opacity: 0.5;
                     }
-
                     .btn.o_install_btn {
                         display: none;
                         @include o-position-absolute($top: 16px);
                     }
-
                     &:hover .btn.o_install_btn {
                         display: block;
                     }
                 }
-
-                &:nth-child(2n + 1) {
-                    clear: left;
-                }
             }
         }
         #snippet_custom .oe_snippet .oe_snippet_thumbnail {
@@ -213,39 +243,51 @@ body.editor_enable.editor_has_snippets {
     }
 
     > .o_we_customize_panel {
+        position: relative;
 
-        @mixin we-icon-button($icon, $color: null) {
+        @mixin we-icon-button($icon, $color: $o-we-sidebar-content-field-control-item-color, $align: right) {
             @extend %we-icon-button;
-            padding-right: 0.5em + 1em + 0.5em;
+            padding-#{$align}: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
 
             &::after {
                 content: $icon;
                 color: $color;
+
+                @if $align == left {
+                    right: auto;
+                    left: $o-we-sidebar-content-field-control-item-spacing;
+                }
             }
         }
 
-        we-button, we-toggler {
+        @mixin large-component() {
             flex: 1 1 auto;
+            width: $o-we-sidebar-width / 2; // TODO maybe there is a better way to implement this
+        }
+
+        we-button, we-toggler {
             cursor: pointer;
             @include o-text-overflow(block);
-            padding: 0.1em 0.4em;
-            margin: 0;
-            border: 1px solid var(--o-we-bg-color-dark);
-            border-radius: 0;
-            background-color: var(--o-we-bg-color-dark);
-            color: var(--o-we-color);
-            line-height: 1.5;
-            white-space: nowrap;
+            padding: 0 $o-we-sidebar-content-field-clickable-spacing;
+            border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+            border-radius: $o-we-sidebar-content-field-border-radius;
+            background: $o-we-sidebar-content-field-clickable-bg;
+            color: $o-we-sidebar-content-field-color;
+            line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
             text-align: left;
 
-            &.fa, &.fas, &.fab, &.far {
-                flex: 0 0 auto;
+            &.active {
+                background: $o-we-sidebar-content-field-pressed-bg;
+                color: $o-we-sidebar-content-field-pressed-color;
+            }
+
+            &.fa {
                 display: inline-block;
-                margin: 0 0 0 0.3em;
+                margin: 0 0 0 $o-we-sidebar-content-field-multi-spacing;
                 padding: 0;
                 border: none;
-                background-color: transparent;
-                color: var(--o-we-snippets-color);
+                background: none;
+                color: inherit;
                 text-align: center;
 
                 &.fa-times, &.fa-minus {
@@ -267,6 +309,7 @@ body.editor_enable.editor_has_snippets {
             &.o_we_primary_btn {
                 display: inline-flex !important;
                 width: auto;
+                background: none;
                 background-color: $o-brand-primary;
                 color: white;
 
@@ -276,30 +319,25 @@ body.editor_enable.editor_has_snippets {
             }
         }
         we-toggler {
-            @include we-icon-button('\f107');
+            @include we-icon-button('\f0d7');
 
             + * {
                 display: none !important;
-                margin-top: -1px !important;
-                background-color: rgba(0, 0, 0, 0.3);
+                border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color;
+                background-color: $o-we-sidebar-content-field-dropdown-bg;
+                box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
             }
-            &.active {
-                &::after {
-                    content: '\f106';
-                }
-
-                + * {
-                    display: block !important;
-                }
+            &.active + * {
+                display: block !important;
             }
         }
         %we-icon-button {
             position: relative;
 
             &::after {
-                @include o-position-absolute(50%, 0.5em);
+                @include o-position-absolute(50%, $o-we-sidebar-content-field-control-item-spacing);
                 transform: translateY(-50%);
-                width: 1em;
+                width: $o-we-sidebar-content-field-control-item-size;
                 text-align: center;
                 font-family: FontAwesome;
             }
@@ -313,25 +351,32 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-options {
             position: relative;
             display: block;
-            padding: 1em;
-            color: var(--o-we-snippets-color);
-
-            &:nth-child(2n) {
-                background-color: rgba(0, 0, 0, 0.1);
+            padding: 0 $o-we-sidebar-content-block-spacing $o-we-sidebar-content-block-spacing $o-we-sidebar-content-indent;
+            border-top: $o-we-sidebar-content-main-title-border-width solid $o-we-sidebar-content-main-title-border-color;
+            background-image: $o-we-sidebar-content-main-title-shadow;
+            background-size: 100% ($o-we-sidebar-content-main-title-height / 2);
+            background-repeat: no-repeat;
+
+            &:first-child {
+                border-top-color: $o-we-sidebar-content-main-title-shadow-start;
             }
 
             > we-title {
                 display: flex;
                 align-items: center;
-                margin-bottom: 0.5em;
-                text-transform: uppercase;
-                font-weight: bold;
-                color: inherit !important;
+                margin-bottom: $o-we-sidebar-content-main-title-margin-bottom - $o-we-sidebar-content-field-spacing;
+
+                > span {
+                    color: $o-we-sidebar-content-main-title-color !important;
+                    font-size: $o-we-sidebar-content-main-title-font-size;
+                    line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width;
+                }
 
                 > we-button-group {
                     flex: 0 0 auto;
                     display: block;
                     margin-left: auto;
+                    color: $o-we-sidebar-content-field-control-item-color;
                     text-align: center;
 
                     > we-customizeblock-option {
@@ -347,24 +392,18 @@ body.editor_enable.editor_has_snippets {
             position: relative;
             display: block;
 
-            > *, > div > * {
-                display: block;
-                margin-top: 0.5em;
-            }
-
             .dropdown-menu {
                 // FIXME temporary fix for m2o option for example
                 position: static !important;
             }
 
             > we-alert {
-                background-color: var(--o-we-snippets-bg-info);
+                background-color: $o-we-color-info;
                 display: block;
-                margin: -.5em;
-                padding: .5em;
+                padding: $o-we-sidebar-content-field-label-spacing;
 
                 we-title {
-                    margin-bottom: 0.5em;
+                    margin-bottom: $o-we-sidebar-content-field-label-spacing;
                     text-transform: uppercase;
                     font-weight: bold;
                 }
@@ -384,53 +423,74 @@ body.editor_enable.editor_has_snippets {
         //----------------------------------------------------------------------
 
         .o_we_user_value_widget {
-            flex: 1 1 auto;
-            min-width: 0;
             @extend %o-we-inline;
+            margin-top: $o-we-sidebar-content-field-spacing;
 
             > div {
                 display: flex;
-                align-items: baseline;
-                justify-content: flex-end;
+                align-items: center;
+                min-height: $o-we-sidebar-content-field-height;
             }
         }
 
         // Buttons
         we-button.o_we_user_value_widget {
+            > div {
+                // Needed otherwise cannot work because of flex display
+                @include o-text-overflow(block);
+                min-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+                line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+            }
             &.active {
-                @include we-icon-button('\f00c', $o-we-color-success);
+                @include we-icon-button('\f00c', $align: left);
             }
-
-            > div {
-                justify-content: flex-start;
+            &.fa > div {
+                display: none;
             }
         }
 
         // Checkboxes
         .o_we_checkbox_wrapper.o_we_user_value_widget {
-            @extend .o_we_force_inline;
-            flex: 0 0 auto;
             padding: 0;
             border: none;
-            background-color: transparent;
-            color: inherit;
+            background: none;
+
+            > div {
+                display: flex;
+                min-height: $o-we-sidebar-content-field-height;
+                line-height: $o-we-sidebar-content-field-height;
+            }
 
             we-checkbox {
                 flex: 0 0 auto;
-                display: block;
-                width: 1em;
-                height: 1em;
-                margin-left: auto;
-                border: 1px solid var(--o-we-bg-color-dark);
-                border-radius: 0;
-                background-color: var(--o-we-bg-color-dark);
+                display: flex;
+                align-items: center;
+                width: $o-we-sidebar-content-field-toggle-width;
+                height: $o-we-sidebar-content-field-toggle-height;
+                background-color: $o-we-sidebar-content-field-toggle-bg;
+                border-radius: 10rem;
+
+                &::after {
+                    content: "";
+                    display: block;
+                    width: $o-we-sidebar-content-field-toggle-control-width;
+                    height: $o-we-sidebar-content-field-toggle-control-height;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-toggle-control-bg;
+                    box-shadow: $o-we-sidebar-content-field-toggle-control-shadow;
+                }
             }
 
             &.active {
-                padding-right: 0;
+                padding-left: 0;
+
+                we-checkbox {
+                    background-color: $o-we-sidebar-content-field-toggle-active-bg;
+                    justify-content: flex-end;
+                }
 
                 &::after {
-                    right: 0;
+                    display: none;
                 }
             }
         }
@@ -439,67 +499,119 @@ body.editor_enable.editor_has_snippets {
         we-select.o_we_user_value_widget {
             position: relative;
 
-            we-toggler {
-                flex: 0 0 100%;
-
-                &.active {
-                    background-color: transparent;
-                    border-color: var(--o-we-color);
-                }
+            &:not(.o_we_icon_select) we-toggler {
+                @include large-component();
             }
+
             we-select-menu {
                 @include o-position-absolute(100%, 0, auto, 0);
                 z-index: $zindex-dropdown;
-                border: 1px solid var(--o-we-color);
-                background-color: var(--o-we-bg-color-dark);
                 max-height: 600px;
                 overflow-y: auto;
-            }
+                margin-top: $o-we-sidebar-content-field-dropdown-spacing !important;
 
-            &.o_we_icon_select {
-                flex: 0 0 auto;
+                > we-title {
+                    line-height: $o-we-sidebar-content-field-dropdown-item-height;
+                }
+
+                we-button {
+                    @include we-icon-button('', $align: left); // Always a padding on the left
+                    margin-top: 0;
+                    border: none;
+                    background: none;
+                    background-clip: padding-box;
+                    background-color: $o-we-sidebar-content-field-dropdown-item-bg;
+                    color: $o-we-sidebar-content-field-dropdown-item-color;
+
+                    > div {
+                        line-height: $o-we-sidebar-content-field-dropdown-item-height;
+                    }
+
+                    &:not(.d-none) ~ we-button {
+                        // Use a border-top instead of a margin-top as when the
+                        // mouse goes from one select button to another, the
+                        // option preview should switch from the first button's
+                        // option to the second one without reset to selected
+                        // state in between.
+                        border-top: $o-we-sidebar-content-field-dropdown-item-spacing solid transparent;
+                    }
+
+                    &.active {
+                        color: $o-we-sidebar-content-field-dropdown-item-active-color;
+                    }
+                }
             }
         }
 
         // Inputs
         we-input.o_we_user_value_widget {
 
+            > div {
+                flex: 0 1 auto;
+                width: $o-we-sidebar-content-field-input-max-width;
+                border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                border-radius: $o-we-sidebar-content-field-border-radius;
+                background-color: $o-we-sidebar-content-field-input-bg;
+
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+            }
+
+            &.o_we_large_input > div {
+                flex: 1 1 auto;
+            }
+
             input {
+                box-sizing: content-box;
                 flex: 1 1 auto;
                 width: 0;
-                min-width: 1.5em;
-                margin: 0 2px 0 0;
-                padding: 0 2px;
+                min-width: 2ch;
+                height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+                padding: 0 $o-we-sidebar-content-field-clickable-spacing;
                 border: none;
                 border-radius: 0;
-                background-color: var(--o-we-bg-color-dark);
-                color: var(--o-we-color);
+                background-color: transparent;
+                color: inherit;
+                font-family: $o-we-sidebar-content-field-input-font-family;
+
+                &::placeholder {
+                    color: $o-we-sidebar-content-field-control-item-color;
+                }
+                &:focus {
+                    outline: none;
+                }
             }
             span {
                 flex: 0 0 auto;
+                padding-right: $o-we-sidebar-content-field-label-spacing;
+                font-size: $o-we-sidebar-content-field-input-unit-font-size;
+                color: $o-we-sidebar-content-field-control-item-color;
             }
         }
 
         // Color Pickers
         .o_we_so_color_palette.o_we_user_value_widget {
-            @extend .o_we_force_inline;
-            flex: 0 0 auto;
 
             .o_we_color_preview {
                 @extend %o-preview-alpha-background;
-                display: block;
                 flex: 0 0 auto;
-                width: 1em;
-                height: 1em;
-                margin-left: auto;
-                border: 1px solid white;
+                display: block;
+                width: $o-we-sidebar-content-field-colorpicker-size;
+                height: $o-we-sidebar-content-field-colorpicker-size;
+                border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                border-radius: 10rem;
+
+                &::after {
+                    box-shadow: $o-we-sidebar-content-field-colorpicker-shadow;
+                }
             }
             we-toggler {
                 display: none;
             }
         }
 
-        // Chart Snippet
+        // Matrix (e.g. Chart Snippet)
         we-matrix {
             overflow-y: auto;
 
@@ -511,7 +623,7 @@ body.editor_enable.editor_has_snippets {
                     text-align: center;
                     we-button {
                         display: inline-block;
-                        color: white;
+                        color: inherit;
                         height: 100%;
 
                         &.o_we_matrix_remove_col, &.o_we_matrix_remove_row {
@@ -519,9 +631,9 @@ body.editor_enable.editor_has_snippets {
                         }
                     }
                     input {
-                        border: 1px solid var(--o-we-bg-color-dark);
-                        background-color: var(--o-we-bg-color-dark);
-                        color: var(--o-we-color);
+                        border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                        background-color: $o-we-sidebar-content-field-input-bg;
+                        color: inherit;
                         font-size: 12px;
                         width: 100%;
                     }
@@ -540,20 +652,129 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
-        we-multi we-row > div {
-            flex-wrap: wrap;
+        // Progress bar widget
+        we-range.o_we_user_value_widget {
 
-            we-select .o_we_user_value_widget > div > we-select-menu {
-                top: 0;
-            }
-            we-row {
-                flex-basis: 100%;
+            input[type="range"] {
+                @include large-component();
+                height: $o-we-sidebar-content-field-height;
+                padding: 0;
+                background-color: transparent;
+                appearance: none;
+
+                &:focus {
+                    outline: none;
+
+                    &::-webkit-slider-thumb { box-shadow: none; }
+                    &::-moz-range-thumb     { box-shadow: none; }
+                    &::-ms-thumb            { box-shadow: none; }
+                }
+                &::-moz-focus-outer {
+                    border: 0;
+                }
+                &::-webkit-slider-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    margin-top: ($o-we-sidebar-content-field-progress-height - $o-we-sidebar-content-field-progress-control-height) / 2;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-webkit-slider-runnable-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    // Unfortunately, Chrome does not support customizing the lower part of the track
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                    box-shadow: none;
+
+                    position: relative;
+                    // z-index: 1000;
+                }
+                &::-moz-range-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-moz-range-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                    box-shadow: none;
+                }
+                &::-moz-range-progress {
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                }
+                &::-ms-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    margin-top: 0;
+                    margin-right: 0;
+                    margin-left: 0;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-ms-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    background-color: transparent;
+                    border-color: transparent;
+                    border-width: $o-we-sidebar-content-field-progress-control-height / 2;
+                    box-shadow: none;
+                }
+                &::-ms-fill-lower {
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    border-radius: 10rem;
+                    @include border-radius($custom-range-track-border-radius);
+                }
+                &::-ms-fill-upper {
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-radius: 10rem;
+                }
             }
         }
 
-        we-range input {
-            flex-grow: 1;
-            width: 1px;
+        // Multi widgets
+        we-multi.o_we_user_value_widget {
+            margin-top: 0;
+
+            > div {
+                flex-flow: row wrap;
+
+                > * {
+                    flex: 1 1 auto; // Needed for colorpicker...
+                }
+            }
         }
 
         //----------------------------------------------------------------------
@@ -562,17 +783,25 @@ body.editor_enable.editor_has_snippets {
 
         we-row {
             position: relative;
-            flex: 1 1 auto;
-            min-width: 0;
             @extend %o-we-inline;
+            margin-top: $o-we-sidebar-content-field-spacing;
+
+            .o_we_user_value_widget {
+                margin-top: 0;
+                min-width: 4em; // Ideally rely on actual natural min-width, but does not work...
+            }
+            we-button, .o_we_so_color_palette {
+                &.o_we_user_value_widget {
+                    min-width: auto; // ... except for these ones
+                }
+            }
 
             > div {
                 display: flex;
                 align-items: center;
-                justify-content: flex-end;
 
-                > * + * {
-                    margin-left: 0.5em;
+                > :not(.d-none) ~ * {
+                    margin-left: $o-we-sidebar-content-field-multi-spacing;
                 }
             }
 
@@ -581,27 +810,31 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
-        %o-we-inline:not(.o_we_fw) {
+        %o-we-inline {
             display: flex;
             flex-flow: row wrap;
-            align-items: center;
 
             > we-title {
-                @include o-text-overflow();
-                max-width: 95%;
-                min-width: 30%;
-                margin-right: 5%;
+                width: 100%;
             }
             > div {
-                flex: 1 1 auto;
-                min-width: 30%;
+                flex: 0 1 auto;
+                min-width: 0;
+                margin-top: $o-we-sidebar-content-field-spacing;
             }
 
-            &.o_we_force_inline {
+            &:not(.o_we_fw) {
                 flex-flow: row nowrap;
+                align-items: center;
 
+                > we-title {
+                    flex: 0 0 auto;
+                    @include o-text-overflow();
+                    width: $o-we-sidebar-content-field-label-width;
+                    padding-right: $o-we-sidebar-content-field-label-spacing;
+                }
                 > div {
-                    min-width: 0;
+                    margin-top: 0;
                 }
             }
         }
@@ -611,67 +844,35 @@ body.editor_enable.editor_has_snippets {
         flex: 0 0 auto;
         max-height: 220px;
         overflow-y: auto;
-        background-color: var(--o-we-bg-color);
-        border-top: 2px solid;
+        padding: $o-we-sidebar-blocks-content-spacing;
+        background-color: $o-we-sidebar-blocks-content-bg;
+        border-top: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color;
+
+        .o_panel_header {
+            padding: $o-we-sidebar-content-field-spacing 0;
+        }
 
         .o_we_invisible_entry {
-            padding: 0.5rem;
+            padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-clickable-spacing;
             cursor: pointer;
 
             &:hover {
-                background-color: var(--o-we-snippets-bg-color);
+                background-color: $o-we-sidebar-bg;
             }
         }
     }
-}
-
-.oe_snippet {
-    // No root because can be drag and drop (and the helper is in the body)
-    position: relative;
-    z-index: $o-we-zindex;
-    width: 100px;
-    background-color: var(--o-we-snippets-bg-color);
-    color: var(--o-we-snippets-color);
-
-    &.ui-draggable-dragging {
-        transform: rotate(3deg);
-        box-shadow: 0 5px 25px -10px black;
-        transition: transform 0.3s, box-shadow 0.3s;
-    }
-
-    > :not(.oe_snippet_thumbnail) {
-        display: none !important;
-    }
-
-    .oe_snippet_thumbnail {
-        width: 100%;
-
-        .oe_snippet_thumbnail_img {
-            width: 100%;
-            height: 0;
-            border: $o-we-border-width solid $o-we-border-color;
-            padding-bottom: 75%;
-            background-size: cover;
-            background-position: center center;
-            text-align: center;
-            overflow: hidden;
-        }
 
-        img.oe_snippet_thumbnail_img {
-            height: auto;
-            padding-bottom: 0;
-        }
-
-        .oe_snippet_thumbnail_title {
+    &.o_we_backdrop {
+        > .o_we_customize_panel::after {
+            content: "";
+            @include o-position-absolute(0, 0, 0, 0);
             display: block;
-            padding: 5px;
-            font-size: 12px;
-            font-weight: 300;
-            text-shadow: none;
+            pointer-events: none;
+            background: $o-we-sidebar-content-backdrop-bg;
         }
 
-        &:hover .oe_snippet_thumbnail_title {
-            color: var(--o-we-color-accent);
+        .o_we_widget_opened {
+            z-index: $zindex-dropdown;
         }
     }
 }
@@ -701,27 +902,34 @@ body.editor_enable.editor_has_snippets {
 
 // SNIPPET OPTIONS
 .colorpicker {
+    background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg;
+    color: $o-we-sidebar-content-field-colorpicker-dropdown-color;
+
     .d-flex .btn.o_we_colorpicker_switch_pane_btn {
-        font-size: 0.8em !important;
+        color: inherit !important;
+        font-size: inherit !important;
+        font-weight: inherit !important;
 
         &.active {
-            border-bottom: 1px solid $o-we-handles-accent-color !important;
+            color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color;
+            border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
         }
-
         + .o_colorpicker_reset {
-            border: 1px solid var(--o-we-color) !important;
-            border-radius: 2px !important;
-            font-size: 0.8em !important;
-            padding: 0 2px !important;
+            padding: 0 $o-we-sidebar-content-field-clickable-spacing !important;
+            border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color !important;
+            border-radius: $o-we-sidebar-content-field-border-radius !important;
+            background: $o-we-sidebar-content-field-clickable-bg !important;
+            line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width !important;
+            color: inherit !important;
+            font-size: inherit !important;
+            font-weight: inherit !important;
             align-self: center;
         }
-
         &:focus {
             box-shadow: none;
         }
     }
     .o_colorpicker_sections {
-        font-size: 14px;
 
         .o_we_color_btn, .o_we_color_combination_btn {
             float: left;
@@ -729,7 +937,7 @@ body.editor_enable.editor_has_snippets {
             padding-top: percentage(1 / 8);
             margin: 0;
             border: none;
-            box-shadow: inset 0 0 0 1px var(--o-we-bg-color-dark);
+            box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg;
 
             &.o_colorpicker_reset {
                 background-color: transparent;
@@ -752,23 +960,27 @@ body.editor_enable.editor_has_snippets {
             padding: 0;
             margin: 0;
             background-clip: padding-box;
-            border-top: 4px solid transparent;
-            border-bottom: 4px solid transparent;
+            border-top: $o-we-sidebar-content-field-spacing solid transparent;
+            border-bottom: $o-we-sidebar-content-field-spacing solid transparent;
 
             > .o_we_cc_preview_wrapper {
-                padding: 8px;
+                padding: $o-we-sidebar-content-field-clickable-spacing;
             }
 
             + .o_we_color_combination_btn {
-                margin-top: -4px;
+                margin-top: -$o-we-sidebar-content-field-spacing;
             }
         }
 
         .o_colorpicker_section {
+            padding-top: $o-we-sidebar-content-field-spacing;
 
-            > :first-child {
-                margin: 4px 0;
+            &::after {
+                content: "";
+                display: table;
+                clear: both;
             }
+
             .o_we_color_btn {
                 position: relative;
 
@@ -798,30 +1010,6 @@ body.editor_enable.editor_has_snippets {
             }
         }
     }
-
-    .note-palette-title {
-        padding: 10px 0 10px 10px;
-        font-weight: bold;
-    }
-
-    .palette-reset {
-        @include o-position-absolute(0, 0);
-        margin: 0;
-        padding: 5px 10px 0;
-
-        .note-color-reset {
-            font-size: 20px !important;
-            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
-            margin: 1px 0 0;
-            padding: 0;
-            cursor: pointer;
-
-            &:hover {
-                background: transparent !important;
-                color: $o-we-color-danger;
-            }
-        }
-    }
 }
 
 // DROPZONES
@@ -1016,9 +1204,9 @@ body.editor_enable.editor_has_snippets {
 
                     > * {
                         margin: 0 2px;
-                        border: 1px solid $o-we-color-text-normal;
+                        border: 1px solid #999999;
                         border-radius: 20%;
-                        color: $o-we-color-text-normal;
+                        color: #999999;
                         opacity: 0.5;
                         transition: opacity 400ms ease 0s;
                         cursor: pointer;
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 24b950afc8c..ca231278fd1 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -1,6 +1,7 @@
 odoo.define('website.snippet.editor', function (require) {
 'use strict';
 
+const {_t} = require('web.core');
 const weSnippetEditor = require('web_editor.snippet.editor');
 const wSnippetOptions = require('website.editor.snippets.options');
 
@@ -64,7 +65,7 @@ weSnippetEditor.Class.include({
 
         if (!this.fakeThemeEl) {
             this.fakeThemeEl = document.createElement('theme');
-            this.fakeThemeEl.dataset.name = "";
+            this.fakeThemeEl.dataset.name = _t("General Options");
             this.el.appendChild(this.fakeThemeEl);
         }
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 189497b738d..0626c0fba11 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -33,7 +33,8 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
         linkButton.classList.add('o_we_redirect_to', 'fa', 'fa-fw', 'fa-external-link');
         linkButton.title = _t("Redirect to URL in a new tab");
         this.containerEl.appendChild(linkButton);
-        $(this.inputEl).addClass('text-left');
+        this.el.classList.add('o_we_large_input');
+        this.inputEl.classList.add('text-left');
         wUtils.autocompleteWithPages(this, $(this.inputEl));
     },
 
@@ -590,6 +591,33 @@ options.registry.background.include({
     },
 });
 
+options.registry.SwitchTheme = options.Class.extend({
+    isTopOption: true,
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @see this.selectClass for parameters
+     */
+    switchTheme: async function (previewMode, widgetValue, params) {
+        const save = await new Promise(resolve => {
+            Dialog.confirm(this, _t("Changing theme requires to leave the editor. This will save all your changes, are you sure you want to proceed? Be careful that changing the theme will reset all your color customizations."), {
+                confirm_callback: () => resolve(true),
+                cancel_callback: () => resolve(false),
+            });
+        });
+        if (!save) {
+            return;
+        }
+        this.trigger_up('request_save', {
+            reload: false,
+            onSuccess: () => window.location.href = '/web#action=website.theme_install_kanban_action',
+        });
+    },
+});
+
 options.registry.Theme = options.Class.extend({
     events: {
         'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick',
@@ -725,24 +753,6 @@ options.registry.Theme = options.Class.extend({
             dialog.open();
         });
     },
-    /**
-     * @see this.selectClass for parameters
-     */
-    switchTheme: async function (previewMode, widgetValue, params) {
-        const save = await new Promise(resolve => {
-            Dialog.confirm(this, _t("Changing theme requires to leave the editor. This will save all your changes, are you sure you want to proceed? Be careful that changing the theme will reset all your color customizations."), {
-                confirm_callback: () => resolve(true),
-                cancel_callback: () => resolve(false),
-            });
-        });
-        if (!save) {
-            return;
-        }
-        this.trigger_up('request_save', {
-            reload: false,
-            onSuccess: () => window.location.href = '/web#action=website.theme_install_kanban_action',
-        });
-    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index b916b232a85..1a4acd4aac9 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -2,10 +2,10 @@ $-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 $o-we-color-text-normal;
+    border: 2px dashed #999999;
     padding: 112px 0px;
     text-align: center;
-    color: $o-we-color-text-normal;
+    color: #999999;
 
     &:before {
         content: attr(data-editor-message);
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index de2b602cd21..d004626b03b 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -19,13 +19,15 @@
 }
 
 // INPUTS
+$o-we-switch-size: 2ex !default;
+$o-we-switch-inactive-color: #F7F7F7 !default;
 .o_switch {
     display: flex;
     align-items: center;
     font-weight: normal;
     cursor: pointer;
 
-    >input {
+    > input {
         display: none;
 
         + span {
@@ -36,18 +38,18 @@
             width: $o-we-switch-size * 1.8;
             margin-right: 0.5em;
             display: inline-block;
-            transition: all 0.3s $o-we-md-ease;
+            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 
             &:after {
                 content: "";
-                background: $o-we-bg-color;
+                background: white;
                 display: block;
                 width: $o-we-switch-size - 0.2;
                 height: $o-we-switch-size - 0.2;
                 margin-top: 0.1ex;
                 margin-left: 0.1ex;
                 border-radius: 100rem;
-                transition: all 0.3s $o-we-md-ease;
+                transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
                 box-shadow: 0 1px 1px darken($o-we-switch-inactive-color, 35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color, 10%);
             }
         }
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 539a1c3860f..882529d7ac6 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -8,7 +8,7 @@ body {
     // Set frontend direction that will be flipped with
     // rtlcss for right-to-left text direction.
     direction: ltr;
-    transition: padding 0.35s;
+    transition: padding 400ms ease 0s;
 }
 body.o_connected_user {
     padding-top: $o-navbar-height!important;
@@ -29,9 +29,6 @@ body.o_connected_user {
         }
     }
 }
-#oe_main_menu_navbar, #web_editor-top-edit, #oe_snippets {
-    transition: transform 0.35s !important;
-}
 
 // MAIN MENU STYLE (added above navbar.scss)
 #oe_main_menu_navbar {
@@ -39,9 +36,10 @@ body.o_connected_user {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
     z-index: $zindex-modal - 10;
-
     font-family: $o-we-font-family;
     font-size: 14px;
+    transition: transform 400ms ease 0s; // For fullscreen
+
     a:hover, a:focus {
         text-decoration: none;
     }
@@ -164,7 +162,7 @@ body .modal {
                         }
                     }
                     .close {
-                        color: $o-we-color-light;
+                        color: #4e525b;
                     }
                 }
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index ac02704f523..90be93c7f79 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -10,16 +10,6 @@
     // Override css variables to influence the default style of the editor
     // without duplicating the css.
     @include print-variable('o-we-toolbar-height', $o-navbar-height);
-    @include print-variable('o-we-bg-color', $o-we-color-dark);
-    @include print-variable('o-we-bg-color-dark', $o-we-color-darker);
-    @include print-variable('o-we-color', $o-we-color-text-normal);
-    @include print-variable('o-we-color-accent', $o-we-color-text-light);
-
-    @include print-variable('o-we-dropdown-bg-color', $o-we-color-darker);
-    @include print-variable('o-we-dropdown-color', $o-we-color-text-normal);
-
-    @include print-variable('o-we-snippets-bg-color', $o-we-color-normal);
-    @include print-variable('o-we-snippets-color', $o-we-color-text-light);
 
     // Need info about the color of each color palette
     @for $index from 1 through length($o-color-palettes) - 1 { // Not the user one
@@ -30,63 +20,48 @@
 }
 
 // EDITOR TOP BAR AND POPOVER
-#web_editor-top-edit {
-    form.navbar-form {
-        @include o-position-absolute(0, 0, 0, auto);
-        z-index: $zindex-popover + 5;
-        height: $o-navbar-height;
-        margin: 0;
-        padding: 0;
-        transition: right 0.4s $o-we-md-ease 0s;
-        border-left: 1px solid $o-we-color-divider;
-
-        .btn-group {
-            height: 100%;
-        }
+#web_editor-top-edit .o_we_website_top_actions {
+    @include o-position-absolute($top: 0, $left: 0);
+    z-index: $zindex-popover + 5;
+    display: flex;
+    width: $o-we-sidebar-width;
+    height: $o-we-sidebar-top-height;
+    background-color: $o-we-sidebar-tabs-bg;
+
+    .btn-group, .btn {
+        height: 100%;
+    }
 
-        .btn {
-            height: 100%;
-            margin: 0;
-            padding: 10px;
-            line-height: 1.2;
-            font-size: 13px;
-            font-family: $o-we-font-family;
-
-            transition: all 0.3s ease 0s;
-            border: none;
-            border-radius: 0;
-
-            .fa {
-                margin-right: $grid-gutter-width/4;
-
-                &.fa-times {
-                    color: $o-we-color-danger;
-                }
-            }
-
-            &.btn-primary {
-                @include button-variant($o-brand-odoo, $o-brand-odoo);
-            }
-
-            &.btn-secondary {
-                @include button-variant($o-we-color-dark, $o-we-color-dark);
-
-                &:hover {
-                    background: rgba(black, 0.5);
-                }
-            }
-
-            &:focus,
-            &:active,
-            &:focus:active {
-                outline: none;
-            }
-        }
+    .btn {
+        border: none;
+        border-radius: 0;
+        font-size: $o-we-sidebar-font-size;
+        font-weight: 700;
+        line-height: 1;
 
-        .dropdown-menu {
-            left: auto;
-            right: 0;
+        &.btn-primary {
+            @include button-variant($o-brand-primary, $o-brand-primary);
         }
+        &.btn-secondary {
+            @include button-variant($o-we-sidebar-tabs-bg, $o-we-sidebar-tabs-bg);
+        }
+        &:focus, &:active, &:focus:active {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+
+    .dropdown-menu {
+        left: auto;
+        right: 0;
+    }
+}
+
+#oe_snippets {
+    top: $o-we-sidebar-top-height;
+
+    .o_color_combinations_edition {
+        margin-top: $o-we-sidebar-content-field-spacing;
     }
 }
 
@@ -128,73 +103,25 @@ $i: 1;
     border-top: 1px solid currentColor !important;
 }
 
-$palette-size: 10em;
-.o_palette_color_preview {
-    flex: 0 0 auto;
-    display: inline-block;
-    width: $palette-size / 3;
-    height: 1.35em;
-    margin: 4px 0;
-    transition: width 150ms ease 0s;
-
-    &:nth-child(4), &:nth-child(5) {
-        width: 0;
+#oe_snippets > .o_we_customize_panel .o_we_user_value_widget.o_palette_color_preview_button {
+    > div {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: stretch;
     }
-}
-.o_palette_color_preview_button:hover .o_palette_color_preview {
-    width: $palette-size / 5;
-}
-
-// 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_we_color_btn {
-
-            &:hover,
-            &.selected {
-                box-shadow: 0px 0px 2px 2px $o-we-color-light;
-            }
-
-            &[data-event="foreColor"] {
-                background-color: $o-we-color-normal;
-
-                &:before {
-                    background-color: rgba(white, 0.3);
-                }
-            }
-        }
-    }
-
-    .note-palette-title, a, button:not(.o_we_color_combination_btn) {
-
-        &, &:hover {
-            color: $o-we-color-text-light;
-        }
+    .o_palette_color_preview {
+        flex: 1 0 0;
+        margin: 1px 0;
+        transition: flex 150ms ease 0s;
     }
-
-    .palette-reset {
-        .note-color-reset {
-            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
-
-            &:hover {
-                color: $o-we-color-danger;
-            }
+    &:not(:hover) .o_palette_color_preview {
+        &:nth-child(4), &:nth-child(5) {
+            flex: 0 0 0;
         }
     }
 }
 
+// SNIPPET OPTIONS
 we-collapse {
     position: relative;
     padding: 0.3em 0.3em 0.3em 1em;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 998c60f4963..bea9661aa21 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -13,9 +13,9 @@
     <!-- Editor top bar which contains the summernote tools and save/discard buttons -->
     <t t-name="website.editorbar">
         <div id="web_editor-top-edit">
-            <form class="navbar-form text-muted">
-                <button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j"><i class="fa fa-times"/> Discard</button>
-                <button type="button" class="btn btn-primary" data-action="save" accesskey="s"><i class="fa fa-floppy-o"/> Save</button>
+            <form class="o_we_website_top_actions">
+                <button type="button" class="btn btn-primary" data-action="save" accesskey="s">Save</button>
+                <button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j">Discard</button>
             </form>
         </div>
     </t>
diff --git a/addons/website/views/snippets/s_facebook_page.xml b/addons/website/views/snippets/s_facebook_page.xml
index e603b28e9b0..c7b772de867 100644
--- a/addons/website/views/snippets/s_facebook_page.xml
+++ b/addons/website/views/snippets/s_facebook_page.xml
@@ -10,7 +10,7 @@
 <template id="s_facebook_page_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div string="Page URL" data-js="facebookPage" data-selector=".o_facebook_page">
-            <we-input data-page-url="https://www.facebook.com/Odoo" data-no-preview="true"/>
+            <we-input class="o_we_large_input" data-page-url="https://www.facebook.com/Odoo" data-no-preview="true"/>
             <we-checkbox string="Cover Photo" data-option-name="show_cover" data-toggle-option="true" data-no-preview="true"/>
             <we-checkbox string="Timeline" data-option-name="tab.timeline" data-toggle-option="true" data-no-preview="true"/>
             <we-checkbox string="Events" data-option-name="tab.events" data-toggle-option="true" data-no-preview="true"/>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index e76a8fce6ac..691a5247db8 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -146,15 +146,13 @@
         <we-button data-set-shadow="inset" data-name="shadow_inset_opt">Inset</we-button>
     </we-select>
     <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt">
-        <we-colorpicker class="w-100 my-1" string="Color" data-select-style="" data-css-compatible=""/>
-        <we-row class="my-1">
-            <we-input string="X" data-select-style="" data-unit="px"/>
-            <we-input string="Y" data-select-style="" data-unit="px"/>
-        </we-row>
-        <we-row class="my-1">
-            <we-input string="Blur" data-select-style="" data-unit="px"/>
-            <we-input string="Spread" data-select-style="" data-unit="px"/>
+        <we-colorpicker string="Color" data-select-style="" data-css-compatible=""/>
+        <we-row string="Offset (X, Y)">
+            <we-input data-select-style="" data-unit="px"/>
+            <we-input data-select-style="" data-unit="px"/>
         </we-row>
+        <we-input string="Blur" data-select-style="" data-unit="px"/>
+        <we-input string="Spread" data-select-style="" data-unit="px"/>
         <!-- Inset parameter always hidden (as controlled above) but needed -->
         <!-- for the we-multi widget to work properly. -->
         <we-checkbox data-name="fake_inset_shadow_opt" data-select-style="inset"/>
@@ -687,8 +685,10 @@
     </div>
 
     <!-- Theme options -->
-    <div data-js="Theme" data-selector="theme" data-no-check="true">
+    <div data-js="SwitchTheme" data-selector="theme" data-no-check="true">
         <we-button class="o_we_primary_btn" data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
+    </div>
+    <div data-js="Theme" data-selector="theme" data-no-check="true">
         <we-alert class="o_old_color_system_warning d-none">
             It appears your website is still using the old color system of
             Odoo 13.0 in some places. We made sure it is still working but
@@ -708,7 +708,7 @@
                             data-use-css-color="true"/>
             <we-colorpicker data-customize-website-color="" data-color="o-color-5"
                             data-use-css-color="true"/>
-            <we-select class="ml-auto" data-icon="fa-lightbulb-o" data-variable="color-palettes-number"/>
+            <we-select data-icon="fa-lightbulb-o" data-variable="color-palettes-number"/>
         </we-row>
         <div class="o_color_combinations_edition"/>
         <we-row string="Status Colors">
diff --git a/addons/website_form/static/src/snippets/s_website_form/options.js b/addons/website_form/static/src/snippets/s_website_form/options.js
index 7338d64981b..173a1aa8dab 100644
--- a/addons/website_form/static/src/snippets/s_website_form/options.js
+++ b/addons/website_form/static/src/snippets/s_website_form/options.js
@@ -597,6 +597,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
         inputEl.dataset.fieldName = field.name;
         inputEl.dataset.addActionField = '';
         inputEl.setAttribute('string', field.string);
+        inputEl.classList.add('o_we_large_input');
         return inputEl;
     },
     /**
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index 4b3d9c9a790..2f9e343e681 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -92,14 +92,14 @@
                 <we-button data-multi-checkbox-display="horizontal">Horizontal</we-button>
                 <we-button data-multi-checkbox-display="vertical">Vertical</we-button>
             </we-select>
-            <we-input string="Label Name" data-set-label-text=""/>
+            <we-input string="Label Name" class="o_we_large_input" data-set-label-text=""/>
             <we-select string="Label Position" data-no-preview="true">
                 <we-button data-select-label-position="none">None</we-button>
                 <we-button data-select-label-position="top">Top</we-button>
                 <we-button data-select-label-position="left">Left</we-button>
                 <we-button data-select-label-position="right">Right</we-button>
             </we-select>
-            <we-input string="Input Placeholder" data-name="placeholder_opt" data-set-placeholder=""/>
+            <we-input string="Input Placeholder" class="o_we_large_input" data-name="placeholder_opt" data-set-placeholder=""/>
             <we-checkbox string="Required" data-name="required_opt" data-no-preview="true"
                 data-toggle-required="s_website_form_required"/>
             <we-checkbox string="Hidden" data-name="hidden_opt" data-no-preview="true"
diff --git a/addons/website_sale/views/snippets.xml b/addons/website_sale/views/snippets.xml
index 0e957d9ecec..2a273b045ad 100644
--- a/addons/website_sale/views/snippets.xml
+++ b/addons/website_sale/views/snippets.xml
@@ -72,7 +72,7 @@
             </we-row>
             <div class="d-none" data-name="ribbon_customize_opt">
                 <we-row string="Ribbon">
-                    <we-input data-set-ribbon-html="" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/>
+                    <we-input data-set-ribbon-html="" class="o_we_large_input" data-apply-to=".o_wsale_ribbon_dummy" data-no-preview="true"/>
                     <we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/>
                     <we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/>
                 </we-row>
author	qsm-odoo <qsm@odoo.com>	2020-07-01 14:52:06 +0000
committer	qsm-odoo <qsm@odoo.com>	2020-07-14 14:43:16 +0000
commit	f16113a06e31c0dd04f13be5537d24a8e3d4f96a (patch)
tree	3f636fd512ce1d8b2bb7b953ce6fe7e56c2438c5
parent	6c31104fa99e3e9b5c28195a0c4060d95c78b94e (diff)