/** * VISTA MOSAICO — Carta de Restaurante * * Namespace .rl-mosaico* / .rl-mosaico-overlay* * No comparte NINGUNA clase con la vista de lista, de modo que ambas * pueden convivir en la misma página sin pisarse. * * --------------------------------------------------------------- * PERSONALIZACIÓN DESDE EL TEMA * --------------------------------------------------------------- * Los tamaños de texto van en em/rem, así que HEREDAN del tema: si el * tema cambia la tipografía base, el mosaico se ajusta solo. * * El resto (colores, radios, separaciones) se expone como variables CSS. * Para redefinirlas basta con esto en el CSS del tema: * * .restaurant-menu { * --rl-mosaico-radio: 4px; * --rl-mosaico-gap: 24px; * --rl-mosaico-precio-color: #b8860b; * } * * NO hace falta tocar este archivo (se sobrescribiría al actualizar). */ .restaurant-menu { /* Colores. Por defecto se enganchan a las variables que ya usa la vista de lista, para que ambas vistas vayan a juego. */ --rl-mosaico-precio-color: var(--rm-precio-color, var(--rm-font-secondary, #666)); /* Etiqueta de precio sobre la foto */ --rl-mosaico-precio-fondo: rgba(255, 255, 255, .94); /* Cinta del nombre (pegada a la foto). Usa el par "Color del botón" + "Color del texto del botón" del Personalizador del tema: son dos ajustes pensados para ir juntos, así que el contraste está garantizado (no puede quedar texto ilegible sobre el fondo, que es el riesgo de fijar el texto en blanco). Estas variables las publica el tema y ya NO las pisa nadie: el plugin inyectaba --rm-secondary-color con un `style` inline desde una opción huérfana suya, y eso se ha eliminado. Los colores son cosa del tema. */ --rl-mosaico-cinta-fondo: var(--rm-secondary-color, #1E90FF); --rl-mosaico-cinta-texto: var(--rm-secondary-text-color, #fff); } .rl-mosaico-overlay { /* El overlay se inyecta en , fuera de .restaurant-menu. Antes esto era un problema porque el color de precio salía del color de BOTÓN, que el plugin inyectaba inline en ese contenedor (y que además podía ser claro, dejando el precio blanco sobre el panel blanco). Ahora el tema publica --rm-precio-color en :root, así que el overlay la ve igual que la carta: misma fuente de verdad, sin trucos. */ --rl-mosaico-precio-color: var(--rm-precio-color, var(--rm-font-secondary, #666)); } .restaurant-menu, .rl-mosaico-overlay { /* Separación entre celdas */ --rl-mosaico-gap: 14px; --rl-mosaico-gap-tablet: 18px; --rl-mosaico-gap-desktop: 20px; /* Columnas */ --rl-mosaico-cols-movil: 2; --rl-mosaico-cols-tablet: 3; --rl-mosaico-cols-desktop: 4; /* --------------------------------------------------------------- TAMAÑOS DE TEXTO Los define el TEMA, desde el Personalizador ("Mosaico: tamaños de texto"), y los publica en :root como variables --rl-mosaico-txt-*. Aquí NO se declaran a propósito: si el plugin las declarase en .restaurant-menu (especificidad 0,1,0) ganarían al :root del tema y el Personalizador no tendría ningún efecto. Es el mismo choque que ya ocurrió con el color. Los valores por defecto van como fallback dentro de cada var(), así que el mosaico funciona igual aunque el tema no esté activo. --------------------------------------------------------------- */ /* Cuánto se amplían nombre y precio en el overlay respecto a la celda. 1.4 = 40% más grande. (Un x2 resultaba demasiado grande en pantalla.) Se declara AQUÍ, en el bloque compartido, porque el overlay se inyecta en , fuera de .restaurant-menu, y allí no vería la variable. Ajustable desde el tema: --rl-mosaico-zoom: 1.6; */ --rl-mosaico-zoom: 1.4; /* Radios */ --rl-mosaico-radio: 12px; --rl-mosaico-radio-overlay: 16px; /* Proporción de la figura (1/1 = cuadrado) */ --rl-mosaico-proporcion: 1 / 1; /* Colores (el color de precio se define arriba, por contexto). */ --rl-mosaico-fondo-figura: #f0f0f0; --rl-mosaico-overlay-fondo: rgba(0, 0, 0, .78); --rl-mosaico-overlay-panel: #fff; --rl-mosaico-overlay-texto: #1a1a1a; --rl-mosaico-alergeno-fondo: #f4f4f4; } /* ========================================================= REJILLA ========================================================= */ .rl-mosaico { display: grid; /* 2 columnas en móvil (donde se va a usar el 90% del tiempo). */ grid-template-columns: repeat(var(--rl-mosaico-cols-movil, 2), 1fr); gap: var(--rl-mosaico-gap, 14px); margin: 0 0 28px; padding: 0; } /* Tablet */ @media (min-width: 600px) { .rl-mosaico { grid-template-columns: repeat(var(--rl-mosaico-cols-tablet, 3), 1fr); gap: var(--rl-mosaico-gap-tablet, 18px); } } /* Escritorio */ @media (min-width: 900px) { .rl-mosaico { grid-template-columns: repeat(var(--rl-mosaico-cols-desktop, 4), 1fr); gap: var(--rl-mosaico-gap-desktop, 20px); } } /* ========================================================= CELDA ========================================================= */ .rl-mosaico__item { display: flex; flex-direction: column; /* Los hijos (figura e info) deben ocupar TODO el ancho de la celda. Sin esto, el