From c16428cf39a9a0c5cd0a8aae749a617030dfdf3c Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Wed, 4 Oct 2023 14:24:12 +0200
Subject: [PATCH] [FIX] web_editor, website: adapt dropzone transparency

Since the introduction of the new dropzone design at [1], the dropzones
were not transparent enough anymore and the inline content behind them
was not readable.

This commit adapts the layout of dropzones to make the content behind
them more readable.

[1]: https://github.com/odoo/odoo/commit/8ca644252e2d3a1f836735454c1f936529a7914e

task-3537616

Part-of: odoo/odoo#137569
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../web_editor/static/src/scss/web_editor.variables.scss   | 2 ++
 addons/web_editor/static/src/scss/wysiwyg_snippets.scss    | 7 +++----
 addons/website/static/src/scss/website.edit_mode.scss      | 7 +++----
 3 files changed, 8 insertions(+), 8 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 04a96b5fcc1..c841919c7af 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -46,6 +46,8 @@ $o-we-handle-inside-line-width: 3px !default;
 $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-dropzone-accent-color: $o-we-accent !default;
+$o-we-dropzone-bg-color: rgba($o-we-dropzone-accent-color, .5) !default;
 
 // Translations
 $o-we-content-to-translate-color: rgba(255, 255, 90, 0.5) !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 6544c8e3fdf..ebef74151d5 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2050,21 +2050,20 @@ we-select.o_we_border_preview_aligned_select {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        box-shadow: inset 0 0 $o-we-dropzone-size 0 rgba($o-we-handles-accent-color, .5);
+        box-shadow: inset 0 0 $o-we-dropzone-size 0 scale-color($o-we-dropzone-accent-color, $alpha: -50%);
     }
 }
 
 .oe_drop_zone {
-    background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
+    background: $o-we-dropzone-bg-color;
     animation: dropZoneInsert 1s linear 0s infinite alternate;
 
     &.oe_insert {
         position: relative;
         width: 100%;
         border-radius: $border-radius-lg;
-        outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
+        outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color;
         outline-offset: -$o-we-dropzone-border-width;
-        backdrop-filter: blur(2px);
         z-index: $o-we-overlay-zindex;
     }
 }
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 803648e0f57..409770e242a 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -1,11 +1,10 @@
 $-editor-messages-margin-x: 2%;
 %o-editor-messages {
-    background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
+    background: $o-we-dropzone-bg-color;
     text-align: center;
-    color: $o-we-handles-accent-color;
-    outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
+    color: #fff;
+    outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color;
     outline-offset: -$o-we-dropzone-border-width;
-    backdrop-filter: blur(2px);
 
     &:before {
         content: attr(data-editor-message);