[IMP] website_description_internal: estilo comercial con paleta por defecto de Odoo

website_description_internal/static/src/scss/custom.scss

@@ -1,9 +1,89 @@
 .custom_website_description {
-    font-size: 18px;
-    color: #333;
-    line-height: 1.5;
-    padding: 15px;
-    background-color: #efefff;
-    border: 1px solid #99c;
-    border-radius: 12px;
+    --odoo-primary: var(--o-color-1, #875a7b);
+    --odoo-text: var(--o-cc1-text, #212529);
+    --odoo-bg: var(--o-cc1-bg, #ffffff);
+
+    max-width: 1100px;
+    margin: 0 auto;
+    font-size: clamp(16px, 1.05vw, 18px);
+    color: var(--odoo-text);
+    line-height: 1.72;
+    letter-spacing: 0.01em;
+    padding: 28px;
+    background-color: var(--odoo-bg);
+    border: 1px solid rgba(135, 90, 123, 0.25);
+    border-top: 4px solid var(--odoo-primary);
+    border-radius: 14px;
+    box-shadow: 0 10px 26px rgba(135, 90, 123, 0.12);
+    column-count: 2;
+    column-gap: 36px;
+    column-fill: balance;
+    text-wrap: pretty;
+    hyphens: auto;
+}
+
+.custom_website_description p,
+.custom_website_description ul,
+.custom_website_description ol {
+    margin-top: 0;
+    margin-bottom: 0.9em;
+}
+
+.custom_website_description ul,
+.custom_website_description ol {
+    padding-left: 1.2em;
+}
+
+.custom_website_description h1,
+.custom_website_description h2,
+.custom_website_description h3,
+.custom_website_description h4,
+.custom_website_description h5,
+.custom_website_description h6 {
+    color: var(--odoo-primary);
+    line-height: 1.3;
+    margin: 0 0 0.55em;
+    break-after: avoid;
+}
+
+.custom_website_description ul li::marker,
+.custom_website_description ol li::marker {
+    color: var(--odoo-primary);
+}
+
+.custom_website_description a {
+    color: var(--odoo-primary);
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.12em;
+}
+
+.custom_website_description blockquote {
+    border-left: 4px solid var(--odoo-primary);
+    margin: 0.9em 0;
+    padding: 0.25em 0 0.25em 1em;
+    color: var(--odoo-text);
+    background-color: rgba(135, 90, 123, 0.06);
+}
+
+.custom_website_description p,
+.custom_website_description li,
+.custom_website_description h1,
+.custom_website_description h2,
+.custom_website_description h3,
+.custom_website_description h4,
+.custom_website_description h5,
+.custom_website_description h6,
+.custom_website_description blockquote,
+.custom_website_description img,
+.custom_website_description table {
+    break-inside: avoid;
+}
+
+@media (max-width: 991.98px) {
+    .custom_website_description {
+        column-count: 1;
+        column-gap: 0;
+        padding: 20px;
+        line-height: 1.66;
+    }
 }

website_sale_product_library/__manifest__.py

@@ -21,6 +21,7 @@ Modifica la tienda online con los campos de product_library.
     "data": ["views/website_sale_views.xml"],
     "assets": {
         "web.assets_frontend": [
+            "website_sale_product_library/static/src/js/multimedia_hover_player.js",
             "website_sale_product_library/static/src/scss/custom.scss",
         ],
     },

website_sale_product_library/static/src/js/multimedia_hover_player.js

@@ -0,0 +1,40 @@
+/** @odoo-module */
+
+(function () {
+    const ACTIVE_CLASS = 'o_multimedia_player_active';
+
+    function getProductCard(el) {
+        return el && el.closest('.oe_product_cart');
+    }
+
+    function activateCard(card) {
+        if (!card) {
+            return;
+        }
+
+        const cards = document.querySelectorAll('.oe_product_cart.' + ACTIVE_CLASS);
+        cards.forEach((c) => {
+            if (c !== card) {
+                c.classList.remove(ACTIVE_CLASS);
+            }
+        });
+
+        card.classList.add(ACTIVE_CLASS);
+    }
+
+    document.addEventListener('click', (ev) => {
+        const player = ev.target.closest('.o_multimedia_hover_player');
+        if (!player) {
+            return;
+        }
+        activateCard(getProductCard(player));
+    });
+
+    document.addEventListener('focusin', (ev) => {
+        const iframe = ev.target.closest('.o_multimedia_hover_player iframe');
+        if (!iframe) {
+            return;
+        }
+        activateCard(getProductCard(iframe));
+    });
+})();

website_sale_product_library/static/src/scss/custom.scss

@@ -18,7 +18,9 @@
 }
 
 .oe_product_cart:hover .o_multimedia_hover_player,
-.o_multimedia_hover_player:hover {
+.o_multimedia_hover_player:hover,
+.oe_product_cart.o_multimedia_player_active .o_multimedia_hover_player,
+.o_multimedia_hover_player:focus-within {
     max-height: 60px;
     opacity: 1;
     pointer-events: auto;