From a3e37ed5d9a0bd650add143df9da8962f2f6602b Mon Sep 17 00:00:00 2001 From: Liam Noonan Date: Wed, 15 Oct 2025 21:34:38 +0300 Subject: [PATCH 1/2] [IMP] web_theme_classic Refactor SCSS Refactor all selectors to mirror the way odoo sets them. This results in a MUCH broader application of our styles that is not limited to form views. Prefix all vars with "wtc-" in order to prevent them from overriding or being overridden by bootstrap vars. Suffix all vars with !default to ensure that they can be overriden by dark mode. Add $wtc-input-color-required to ensure text contrasts on $wtc-input-background-color-required. This is especially necessary in instances like the quantity and unit price columns of a sale order because by default these fields are set to a light blue. Remove border on .note-editable, i.e. the HTML editor. This feature was broken and, as far as I am concerned, unnecessary. Remove all button customization as it was all broken and is superceeded by OCA/web/web_save_discard_button anyways. --- web_theme_classic/README.rst | 3 + web_theme_classic/readme/CONTRIBUTORS.md | 2 + .../static/description/index.html | 4 + .../static/src/scss/web_theme_classic.scss | 210 ++++++++++++------ 4 files changed, 148 insertions(+), 71 deletions(-) diff --git a/web_theme_classic/README.rst b/web_theme_classic/README.rst index beeb235493fa..924e9680006e 100644 --- a/web_theme_classic/README.rst +++ b/web_theme_classic/README.rst @@ -80,6 +80,9 @@ Contributors ------------ - Sylvain LE GAL (https://www.twitter.com/legalsylvain) +- `Pyxiris `__ + + - `Liam Noonan `__ Maintainers ----------- diff --git a/web_theme_classic/readme/CONTRIBUTORS.md b/web_theme_classic/readme/CONTRIBUTORS.md index 4a6b63400c13..8ed90851b587 100644 --- a/web_theme_classic/readme/CONTRIBUTORS.md +++ b/web_theme_classic/readme/CONTRIBUTORS.md @@ -1 +1,3 @@ - Sylvain LE GAL () +- [Pyxiris](https://github.com/Pyxiris) + - [Liam Noonan](https://github.com/ljmnoonan) diff --git a/web_theme_classic/static/description/index.html b/web_theme_classic/static/description/index.html index 581ad7ee48ab..c8820f9bc640 100644 --- a/web_theme_classic/static/description/index.html +++ b/web_theme_classic/static/description/index.html @@ -418,6 +418,10 @@

Authors

Contributors

diff --git a/web_theme_classic/static/src/scss/web_theme_classic.scss b/web_theme_classic/static/src/scss/web_theme_classic.scss index 426906e37ad6..c02f74187178 100644 --- a/web_theme_classic/static/src/scss/web_theme_classic.scss +++ b/web_theme_classic/static/src/scss/web_theme_classic.scss @@ -2,72 +2,111 @@ Variables ************************************************************/ -$input-border-color: #cccccc; -$input-border-color-focus: #71639e; -$input-background-color-required: #d2d2ff; -$input-color-placeholder-required: #6c757d; - -$button-border-color: #dee2e6; +/* The wtc prefix keeps these from conflicting with bootstrap vars*/ +$wtc-input-border-color: $o-gray-500 !default; +$wtc-input-border-color-focus: $o-community-color !default; +$wtc-input-color-required: $o-gray-900 !default; +// Note, it is very important that this be a mix with transparent! The reason is that the normal $o-input-bg +// is transparent and so some styles are built assuming this. The most notable examples are monetary fields +// which are set up like this: +//
+//
+// +// $  +// 0.00 +// +// $  +// +//
+//
+// So a non transparent background on the element blocks off the display. so it is much better to immitate $o-input-invalid-bg +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/scss/primary_variables.scss#L170 +$wtc-input-background-color-required: mix(#0000ff, transparent, 10) !default; +$wtc-input-color-placeholder-required: #6c757d !default; /*********************************************************** - Form View : Handle Fields Borders + Handle Borders ************************************************************/ -.o_form_view { - .o_input, - .o_field_html > .note-editable { - /* Add border for all editable fields */ - border: 1px solid $input-border-color !important; - border-radius: 3px; - - /* add darker border on focus */ - &:focus { - border-color: $input-border-color-focus !important; - } - } - - .o_field_many2many_selection { - .o_input { - /* Prevent to have double border for many2many tags input fields */ - border: 0px solid !important; - } +/* Odoo sets this without consideration for nesting, as occurs with custom properties. + * https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L36C1-L39C2 + * We fix that here. We also use our special toned down version of $o-action for full borders */ +.o_field_widget:focus-within { + &:has(.o_field_widget) { + @include print-variable(o-input-border-color, $wtc-input-border-color); + @include print-variable(o-caret-color, $input-color); } + @include print-variable(o-input-border-color, $wtc-input-border-color-focus); + @include print-variable(o-caret-color, $wtc-input-border-color-focus); +} - .o_field_monetary { - /* Prevent to have double border for monetary fields */ - .o_input { - border: 0px solid !important; - } +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L50C1-L65C2 +.o_input { + border: $input-border-width solid var(--o-input-border-color); + border-radius: 3px; +} - #list_price_0 { - border: 1px solid $input-border-color !important; - border-radius: 3px; +// An odd case. The search input when adding a new user to an existing task from kanban +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss#L62C9-L62C55 +.o_m2m_tags_avatar_field_popover .o-autocomplete .o-autocomplete--input.o_input { + border-width: $input-border-width; + padding-left: $o-input-padding-x; +} - &:focus { - border-color: $input-border-color-focus !important; - } +// All these selectors are probably not necessary, but just following: +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/properties_field.scss#L12C1-L45C2 +.o_field_properties, +.o_field_properties.o_field_invalid, +.o_property_field_popover { + .o_input:focus, + .dropdown:focus ~ .o_dropdown_button, + .dropdown:focus-within ~ .o_dropdown_button, + .o_input:focus ~ .o_datepicker_button, + .o_dropdown_button:focus { + @include print-variable(o-input-border-color, $wtc-input-border-color-focus); + * { + @include print-variable( + o-input-border-color, + $wtc-input-border-color-focus + ); } } } -/*********************************************************** - Form View : Handle Button Borders -************************************************************/ +// Give tag type custom properties input borders too. Note the code we are overriding +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/property_value.scss#L43C1-L46C2 +.o_field_property_many2many_value:not(.readonly), +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/properties/property_tags.scss#L29C1-L32C2 +.o_field_property_tag:not(.readonly) { + border: $input-border-width solid var(--o-input-border-color); + border-radius: 3px; +} .o_form_view { - .btn-light { - border-color: $button-border-color; + /* Odoo sets borders to transparent unless hovered or focused. We override this. + * https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/form/form_controller.scss#L202C1-L204C6 */ + &:not(.o_field_highlight) + .o_field_widget:not(.o_field_invalid):not(.o_field_highlight) + .o_input:not(:hover):not(:focus) { + --o-input-border-color: #{$wtc-input-border-color}; } - .btn-light { - &:hover { - border-color: $button-border-color; + /* Monetary fields need some special help */ + .o_field_monetary { + /* Prevent having double border for monetary fields */ + span.o_input:has(~ input.o_input) { + border: $input-border-width solid transparent !important; } - } - .o_input { - padding-left: 4px; - padding-right: 2px; + /* Keep the monetary symbol away from the border when it is outside the border */ + /* For when the symbol is on the left side */ + span.o_input + span.opacity-0 { + margin-right: 3px; + } + /* For when the symbol is on the right side */ + span.o_input ~ span.opacity-0:not(span.o_input + span.opacity-0) { + margin-left: 3px; + } } } @@ -75,32 +114,61 @@ $button-border-color: #dee2e6; Form View : Handle Background for required fields ************************************************************/ -.o_form_view { - .o_required_modifier:not(.o_readonly_modifier) { - .o_input { - /* Add background for all editable and required fields */ - background-color: $input-background-color-required !important; - - /* darker placeholder as the background is darker */ - &::placeholder { - color: $input-color-placeholder-required; - } - } - } - - .o_required_modifier.o_field_selection:not(.o_readonly_modifier) { - /* Specific case for field selection */ - background-color: $input-background-color-required !important; - } +// https://github.com/odoo/odoo/blob/18.0/addons/web/static/src/views/fields/fields.scss#L31C1-L34C2 +.o_required_modifier { + @include print-variable( + o-input-background-color, + $wtc-input-background-color-required + ); } /*********************************************************** - Tree View : Handle style for required fields + Tree View : Handle style for input fields ************************************************************/ -.o_list_renderer - .o_data_row.o_selected_row - > .o_data_cell.o_required_modifier:not(.o_readonly_modifier) { - /* Disable border bottom as the field has now a background */ - border-bottom: 0px solid; +// We override all lists, not just in forms +.o_list_renderer .o_data_row { + // Prevent item description from getting $wtc-input-background-color-required when row not in focus + &:not(.selected_row) .o_input { + background-color: initial; + } + &.o_selected_row > .o_data_cell { + &.o_required_modifier:not(.o_readonly_modifier), + &.o_invalid_cell:not(.o_readonly_modifier) { + /* Disable border bottom as the field has now a background */ + border-bottom: 0px; + } + > .o_field_widget { + // We have to manually reintroduce the input invalid styles + &.o_field_invalid:not(.o_readonly_modifier):not(.o_invisible_modifier):has( + .o_input + ) { + --o-input-background-color: #{$o-input-invalid-bg}; + .o_input { + --o-input-border-color: #{$o-danger}; + } + } + &:not(.o_readonly_modifier):not(.o_invisible_modifier) { + &.o_required_modifier:not(.o_field_invalid) { + .o_input { + color: $wtc-input-color-required; + --o-input-background-color: #{$wtc-input-background-color-required} !important; + background-color: var(--o-input-background-color) !important; + } + } + // Handle borders + .o_input { + border: $input-border-width solid var(--o-input-border-color) !important; + /* Prevent double borders in nested o_input like tags */ + .o_input { + border: 0 !important; + } + } + } + // Handle monetary fields in list + &.o_field_monetary span.o_input:has(~ input.o_input) { + border: $input-border-width solid transparent !important; + } + } + } } From 5f2789c465c75fccb86cc0f32bcba3b2556865df Mon Sep 17 00:00:00 2001 From: Liam Noonan Date: Wed, 15 Oct 2025 22:07:01 +0300 Subject: [PATCH 2/2] [IMP] web_theme_classic Add dark mode assets web_dark_mode is not merged yet. https://github.com/OCA/web/pull/3324 --- web_theme_classic/__manifest__.py | 7 +++++++ .../static/src/scss/web_theme_classic.dark.scss | 2 ++ 2 files changed, 9 insertions(+) create mode 100644 web_theme_classic/static/src/scss/web_theme_classic.dark.scss diff --git a/web_theme_classic/__manifest__.py b/web_theme_classic/__manifest__.py index b5c33105c2f5..07cb30483464 100644 --- a/web_theme_classic/__manifest__.py +++ b/web_theme_classic/__manifest__.py @@ -18,6 +18,13 @@ "web.assets_backend": [ "/web_theme_classic/static/src/scss/web_theme_classic.scss", ], + "web.assets_web_dark": [ + ( + "before", + "/web_theme_classic/static/src/scss/web_theme_classic.scss", + "/web_theme_classic/static/src/scss/web_theme_classic.dark.scss", + ), + ], }, "installable": True, "application": True, diff --git a/web_theme_classic/static/src/scss/web_theme_classic.dark.scss b/web_theme_classic/static/src/scss/web_theme_classic.dark.scss new file mode 100644 index 000000000000..e867c23a3d57 --- /dev/null +++ b/web_theme_classic/static/src/scss/web_theme_classic.dark.scss @@ -0,0 +1,2 @@ +$wtc-input-border-color-focus: rgba($o-action, 0.5) !default; +$wtc-input-background-color-required: mix($o-action, transparent, 10) !default;