[FIX] web, web_editor: customize colorpicker inputs from web_editor

Styles for the hex and rgba inputs from the color picker were modified
on directly from the web module, which means that for a specification
concerning only the frontend colorpicker, the backend colorpicker was
also changed.

This commit reverts the changes that were made and only applies the new
style for the website editor.

Related to https://github.com/odoo/odoo/pull/65249

closes odoo/odoo#67396

X-original-commit: 9529e29615699942aac89099cd37144e052b9004
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web/static/src/scss/colorpicker.scss

@@ -28,9 +28,6 @@
     }
     .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div  {
         border: 1px solid black;
-        &:focus-within {
-            border-color: $o-we-sidebar-content-field-input-border-color;
-        }
     }
     .o_color_picker_inputs {
         font-size: 10px;
@@ -39,10 +36,6 @@
             font-family: monospace !important; // FIXME: the monospace font used in the editor has not consistent ch units on Firefox
             height: 18px;
             font-size: 11px;
-            border: none;
-            &:focus {
-                outline: none;
-            }
         }
         .o_hex_div input {
             width: 7ch;

addons/web/static/src/xml/colorpicker.xml

@@ -16,7 +16,7 @@
         </div>
         <div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
         <div class="o_color_picker_inputs d-flex justify-content-between mb-2">
-            <t t-set="input_classes" t-value="'p-0 text-center text-monospace bg-transparent text-white'" />
+            <t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent text-white'" />
 
             <div class="o_hex_div bg-black-50 px-1 d-flex align-items-baseline">
                 <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -1517,6 +1517,21 @@ body.editor_enable.editor_has_snippets {
         @extend %we-generic-button;
     }
     .o_colorpicker_sections {
+        .o_colorpicker_widget {
+            .o_hex_div, .o_rgba_div  {
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+            }
+            .o_color_picker_inputs {
+                input {
+                    border: none;
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
+        }   
 
         .o_we_color_btn, .o_we_color_combination_btn {
             float: left;