[IMP] web_editor, *: make general adaptations of the editor UI

*: website

Part of https://github.com/odoo/odoo/pull/55959
task-2157252

2 files changed, 49 insertions, 29 deletions

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 18db07185d3..55faa0a39f0 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -10,7 +10,8 @@ $o-we-bg-darkest: #000000 !default;
 $o-we-bg-darker: #141217 !default;
 $o-we-bg-dark: #191922 !default;
 $o-we-bg-light: #2b2b33 !default;
-$o-we-bg-lighter: #4b4b59 !default;
+$o-we-bg-lighter: #3e3e46 !default;
+$o-we-bg-lightest: #595964 !default;
 
 $o-we-fg-darker: #9d9d9d !default;
 $o-we-fg-dark: #C6C6C6 !default;
@@ -52,10 +53,17 @@ $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-clickable-bg: $o-we-bg-lightest!default;
+$o-we-item-clickable-color: $o-we-fg-light!default;
+$o-we-item-clickable-hover-bg: $o-we-bg-dark!default;
+$o-we-item-pressed-bg: $o-we-bg-darker !default;
 $o-we-item-pressed-color: $o-we-fg-lighter !default;
 
+$o-we-item-standup-color-light: $o-we-fg-lighter;
+$o-we-item-standup-color-dark: $o-we-bg-darkest;
+$o-we-item-standup-top: inset 0 1px 0;
+$o-we-item-standup-bottom: inset 0 -1px 0;
+
 $o-we-dropdown-spacing: 5px !default;
 $o-we-dropdown-bg: $o-we-bg-darker !default;
 $o-we-dropdown-border-width: 1px !default;
@@ -63,7 +71,7 @@ $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: 34px !default;
 $o-we-dropdown-item-spacing: 1px !default;
-$o-we-dropdown-item-bg: $o-we-bg-lighter !default;
+$o-we-dropdown-item-bg: $o-we-bg-lightest !default;
 $o-we-dropdown-item-bg-hover: $o-we-bg-light !default;
 $o-we-dropdown-item-color: $o-we-fg-dark !default;
 $o-we-dropdown-item-hover-color: $o-we-fg-light !default;
@@ -79,8 +87,6 @@ $o-we-sidebar-width: $o-we-sidebar-border-width + 290px !default;
 
 $o-we-sidebar-top-height: 46px !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-size-ratio: 1 !default;
 $o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
 $o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
@@ -102,14 +108,9 @@ $o-we-sidebar-content-padding-base: 10px !default;
 $o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
 $o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
 
-$o-we-sidebar-content-main-title-border-extension: -1px !default;
-$o-we-sidebar-content-main-title-border-color: $o-we-bg-lighter !default;
 $o-we-sidebar-content-main-title-height: 32px !default;
-$o-we-sidebar-content-main-title-shadow-start: rgba(black, 0.4);
-$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;
 
@@ -131,6 +132,7 @@ $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-color: $o-we-item-clickable-color !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;
@@ -152,7 +154,7 @@ $o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-acti
 $o-we-sidebar-content-field-colorpicker-size: 20px !default;
 $o-we-sidebar-content-field-colorpicker-size-large: 26px !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-lighter !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lightest !default;
 $o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default;
 $o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default;
 $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 675e44a9622..27d0d967721 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -107,13 +107,21 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
-%we-generic-link {
+%we-generic-clickable {
+    outline: none;
+    text-decoration: none;
+    line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
     cursor: pointer;
+
+    &[disabled] {
+        opacity: .5;
+    }
+}
+
+%we-generic-link {
     color: $o-we-sidebar-content-field-color;
-    line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
-    text-decoration: none;
-    outline: none;
     @include we-svg-icon();
+    @extend %we-generic-clickable;
 
     &:not([disabled]) {
         &.active, &:hover {
@@ -133,21 +141,27 @@ body.editor_enable.editor_has_snippets {
             }
         }
     }
-    &[disabled] {
-        opacity: .5;
-    }
 }
 
 %we-generic-button {
-    @extend %we-generic-link;
+    @extend %we-generic-clickable;
     @include o-text-overflow(block);
+    @include we-svg-icon($o-we-sidebar-content-field-clickable-color, $o-we-sidebar-content-field-clickable-color);
+
     padding: 0 $o-we-sidebar-content-field-button-group-button-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-clickable-color;
+
+    &:not([disabled]):hover {
+        @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
+        color: $o-we-sidebar-content-field-pressed-color;
+    }
 
     &.active {
         background: $o-we-sidebar-content-field-pressed-bg;
+        color: $o-we-sidebar-content-field-pressed-color;
     }
 }
 
@@ -200,9 +214,8 @@ body.editor_enable.editor_has_snippets {
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
-        border: solid $o-we-sidebar-tabs-border-color;
-        border-width: $o-we-sidebar-tabs-border-width 0;
         background: $o-we-sidebar-tabs-bg;
+        box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
         color: $o-we-sidebar-tabs-color;
 
         > button {
@@ -251,6 +264,7 @@ body.editor_enable.editor_has_snippets {
     > #o_scroll {
         background-color: $o-we-sidebar-blocks-content-bg;
         padding: 0 $o-we-sidebar-blocks-content-spacing;
+        box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
 
         .o_panel, .o_panel_header {
             padding: $o-we-sidebar-blocks-content-spacing 0;
@@ -419,16 +433,17 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-options {
             position: relative;
             display: block;
-            box-shadow: 0 $o-we-sidebar-content-main-title-border-extension 0 $o-we-sidebar-content-main-title-border-color;
-            padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
-            background-image: $o-we-sidebar-content-main-title-shadow;
-            background-size: 100% ($o-we-sidebar-content-main-title-height / 2);
-            background-repeat: no-repeat;
+            padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
+            background: $o-we-bg-lighter;
+            box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
 
             > we-title {
                 display: flex;
                 align-items: center;
-                margin-bottom: $o-we-sidebar-content-main-title-margin-bottom - $o-we-sidebar-content-field-spacing;
+                margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent);
+                padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
+                background: $o-we-bg-light;
+                box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
                 font-size: $o-we-sidebar-content-main-title-font-size;
 
                 > span {
@@ -523,6 +538,9 @@ body.editor_enable.editor_has_snippets {
                 > img {
                     margin-bottom: 1px; // Not sure why but not really centered otherwise
                 }
+                > svg {
+                    margin-bottom: 2px; // Not sure why but not really centered otherwise
+                }
             }
             &.fa > div {
                 display: none;
@@ -1036,7 +1054,7 @@ body.editor_enable.editor_has_snippets {
         overflow-y: auto;
         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;
+        box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
 
         .o_panel_header {
             padding: $o-we-sidebar-content-field-spacing 0;