diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 17c3ee13bb3..057ab94f645 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -1,226 +1,4 @@
-@each $url in $o-theme-font-urls {
- @if $url {
- @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
- }
-}
-
-.modal.o_theme_customize_modal {
- .modal-dialog {
- @include o-position-absolute(0, 2%);
- width: 96%;
- max-width: 550px;
- }
- .modal-header {
- background-color: $o-brand-odoo;
- color: white;
- border-radius: 0;
-
- * {
- color: inherit;
- }
- }
-
- .close:hover, .close:focus {
- color: white;
- }
-
- .nav {
- padding: 0;
-
- .nav-item {
- background-color: $o-brand-lightsecondary;
-
- .nav-link {
- color: $o-main-text-color;
-
- &.active {
- font-weight: bold;
- background-color: white;
- border: 1px solid #d9d7d7;
- border-left: 1px solid #333333;
- }
- &:hover, &:focus {
- text-decoration: none;
- }
- }
- }
- }
-
- .dropdown-menu {
- position: static !important;
- transform: none !important;
- min-width: 100%;
- }
-
- .o_theme_customize_option {
- position: relative;
- width: 100%;
-
- > img {
- width: 100%;
-
- + label {
- @include o-position-absolute(0, 0, 0, 0);
- width: auto;
- background: transparent !important;
- }
- }
-
- label {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- min-height: 24px;
- margin: 0;
- padding: 8px;
- text-align: center;
- font-size: 14px;
- line-height: 1;
- cursor: pointer;
-
- &:hover::after {
- content: "";
- pointer-events: none;
- @include o-position-absolute(0, 0, 0, 0);
- background-color: rgba(0, 32, 64, 0.03);
- }
-
- &.o_switch {
- justify-content: flex-start;
- }
- }
- &:not(.dropdown-item) label {
- border: 2px solid transparent;
- background-color: $o-brand-lightsecondary;
-
- &.checked {
- border-color: $o-brand-odoo;
- color: $o-brand-odoo;
- }
- }
-
- &.o_theme_customize_with_widget {
- label {
- justify-content: flex-start;
- text-align: left;
-
- &.checked {
- border-color: transparent;
- color: inherit;
- }
- }
- }
- }
-
- .o_theme_customize_color {
- position: relative;
- width: 30px;
- height: 20px;
- margin-left: auto;
- border: 1px solid black;
-
- &::before, &::after {
- content: "";
- @include o-position-absolute(0, 0, 0, 0);
- }
- &::before {
- background-image: url('/web_editor/static/src/img/transparent.png');
- }
- &::after {
- background-color: inherit;
- }
- }
-
- .o_theme_customize_input {
- flex: 1 1 auto;
- text-align: right;
-
- .fa-edit {
- visibility: hidden;
- color: $o-brand-primary;
- }
- }
- .o_theme_customize_option:hover .o_theme_customize_input .fa-edit {
- visibility: visible;
- }
-
- .o_theme_customize_active_input {
- @include o-position-absolute(0, 0, 0, 0);
- width: auto;
- padding: 3px;
-
- > * {
- height: 100% !important;
-
- &.form-control {
- background: white !important;
- }
-
- &.form-control, .btn {
- padding: 2px 8px !important;
- text-align: right !important;
- font-size: $font-size-sm !important;
- }
- }
- }
-
- .o_theme_customize_option_input {
- position: absolute;
- clip: rect(0, 0, 0, 0);
- pointer-events: none;
- }
-
- .o_theme_customize_option_list {
- box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
- }
-
- .o_theme_customize_dropdown_btn {
- background-color: $o-brand-lightsecondary;
- }
-
- $i: 1;
- @each $font in $o-theme-fonts {
- .o_theme_customize_option_font_#{$i} {
- font-family: if($font, $font, $font-family-base);
-
- &.o_theme_customize_option > label > span,
- &.dropdown-toggle {
- &::before {
- content: nth($o-theme-font-names, $i);
- }
- }
- }
- $i: $i + 1;
- }
-
- .o_theme_customize_delete_google_font {
- @include o-position-absolute(1px, 1px, 1px, auto);
- padding: 0 8px !important;
- }
-}
-
-
-.o_homepage_editor_welcome_message {
- padding-top: 128px;
- padding-bottom: 128px;
- font-family: Roboto, $font-family-sans-serif;
-
- .o_tooltip_container {
- transition: opacity 1s linear;
-
- > .o_tooltip {
- @include o-position-absolute;
- position: relative;
- display: inline-block;
- margin: 0 8px;
- opacity: 1;
- z-index: auto;
- }
- }
-}
-
.o_editable {
&:not(:empty), &[data-oe-type] {
&:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index bb51136ffac..5071e2f8b90 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -1,3 +1,224 @@
+@each $url in $o-theme-font-urls {
+ @if $url {
+ @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
+ }
+}
+
+.modal.o_theme_customize_modal {
+ .modal-dialog {
+ @include o-position-absolute(0, 2%);
+ width: 96%;
+ max-width: 550px;
+ }
+ .modal-header {
+ background-color: $o-brand-odoo;
+ color: white;
+ border-radius: 0;
+
+ * {
+ color: inherit;
+ }
+ }
+
+ .close:hover, .close:focus {
+ color: white;
+ }
+
+ .nav {
+ padding: 0;
+
+ .nav-item {
+ background-color: $o-brand-lightsecondary;
+
+ .nav-link {
+ color: $o-main-text-color;
+
+ &.active {
+ font-weight: bold;
+ background-color: white;
+ border: 1px solid #d9d7d7;
+ border-left: 1px solid #333333;
+ }
+ &:hover, &:focus {
+ text-decoration: none;
+ }
+ }
+ }
+ }
+
+ .dropdown-menu {
+ position: static !important;
+ transform: none !important;
+ min-width: 100%;
+ }
+
+ .o_theme_customize_option {
+ position: relative;
+ width: 100%;
+
+ > img {
+ width: 100%;
+
+ + label {
+ @include o-position-absolute(0, 0, 0, 0);
+ width: auto;
+ background: transparent !important;
+ }
+ }
+
+ label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-height: 24px;
+ margin: 0;
+ padding: 8px;
+ text-align: center;
+ font-size: 14px;
+ line-height: 1;
+ cursor: pointer;
+
+ &:hover::after {
+ content: "";
+ pointer-events: none;
+ @include o-position-absolute(0, 0, 0, 0);
+ background-color: rgba(0, 32, 64, 0.03);
+ }
+
+ &.o_switch {
+ justify-content: flex-start;
+ }
+ }
+ &:not(.dropdown-item) label {
+ border: 2px solid transparent;
+ background-color: $o-brand-lightsecondary;
+
+ &.checked {
+ border-color: $o-brand-odoo;
+ color: $o-brand-odoo;
+ }
+ }
+
+ &.o_theme_customize_with_widget {
+ label {
+ justify-content: flex-start;
+ text-align: left;
+
+ &.checked {
+ border-color: transparent;
+ color: inherit;
+ }
+ }
+ }
+ }
+
+ .o_theme_customize_color {
+ position: relative;
+ width: 30px;
+ height: 20px;
+ margin-left: auto;
+ border: 1px solid black;
+
+ &::before, &::after {
+ content: "";
+ @include o-position-absolute(0, 0, 0, 0);
+ }
+ &::before {
+ background-image: url('/web_editor/static/src/img/transparent.png');
+ }
+ &::after {
+ background-color: inherit;
+ }
+ }
+
+ .o_theme_customize_input {
+ flex: 1 1 auto;
+ text-align: right;
+
+ .fa-edit {
+ visibility: hidden;
+ color: $o-brand-primary;
+ }
+ }
+ .o_theme_customize_option:hover .o_theme_customize_input .fa-edit {
+ visibility: visible;
+ }
+
+ .o_theme_customize_active_input {
+ @include o-position-absolute(0, 0, 0, 0);
+ width: auto;
+ padding: 3px;
+
+ > * {
+ height: 100% !important;
+
+ &.form-control {
+ background: white !important;
+ }
+
+ &.form-control, .btn {
+ padding: 2px 8px !important;
+ text-align: right !important;
+ font-size: $font-size-sm !important;
+ }
+ }
+ }
+
+ .o_theme_customize_option_input {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+ pointer-events: none;
+ }
+
+ .o_theme_customize_option_list {
+ box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
+ }
+
+ .o_theme_customize_dropdown_btn {
+ background-color: $o-brand-lightsecondary;
+ }
+
+ $i: 1;
+ @each $font in $o-theme-fonts {
+ .o_theme_customize_option_font_#{$i} {
+ font-family: if($font, $font, $font-family-base);
+
+ &.o_theme_customize_option > label > span,
+ &.dropdown-toggle {
+ &::before {
+ content: nth($o-theme-font-names, $i);
+ }
+ }
+ }
+ $i: $i + 1;
+ }
+
+ .o_theme_customize_delete_google_font {
+ @include o-position-absolute(1px, 1px, 1px, auto);
+ padding: 0 8px !important;
+ }
+}
+
+.o_homepage_editor_welcome_message {
+ padding-top: 128px;
+ padding-bottom: 128px;
+ font-family: Roboto, $font-family-sans-serif;
+
+ .o_tooltip_container {
+ transition: opacity 1s linear;
+
+ > .o_tooltip {
+ @include o-position-absolute;
+ position: relative;
+ display: inline-block;
+ margin: 0 8px;
+ opacity: 1;
+ z-index: auto;
+ }
+ }
+}
+
// INPUTS
.o_switch {
display: flex;
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index a379e530f6f..258dd6d3fab 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -94,7 +94,6 @@
-
@@ -109,6 +108,8 @@
+
+