[IMP] web_editor: increase font-size/spacing of the editor UI

11px was set as default font-size when achieving 5 or 6 edition levels
in the sidebar was the norm. Thanks to the snippet's cleanup, resulting
in a reduced number of editable elements, we can now increase the
default fon-size and, consequentially, all general spacings.

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

1 files changed, 10 insertions, 9 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 1deb721d119..18db07185d3 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -72,12 +72,12 @@ $o-we-dropdown-item-active-color: $o-we-fg-lighter !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-font-size: 12px !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-width: $o-we-sidebar-border-width + 290px !default;
 
-$o-we-sidebar-top-height: 26px !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;
@@ -98,8 +98,9 @@ $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) !default;
+$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;
@@ -115,12 +116,12 @@ $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-spacing: 7px !default;
 $o-we-sidebar-content-field-color: $o-we-fg-darker !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-spacing: 6px !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;
@@ -160,11 +161,11 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
 $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: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$o-we-sidebar-content-field-input-unit-font-size: 9px !default;
+$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
 $o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
 
 // This value allows 5 fa icons (fit one row exactly with this)
-$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.5 !default;
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.2 !default;
 
 $o-we-sidebar-content-field-progress-height: 4px !default;
 $o-we-sidebar-content-field-progress-control-height: 10px !default;