/* HTML: */ .breadcrumb { --s: 20px; /* control the shape */ line-height: 1.8; /* control the height */ padding-inline: calc(var(--s) + .3em); clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%); background: #EAEAEA; width: fit-content; } /* Feedback visual al reordenar (secciones y elementos de una sección de "Patrón"), aplicado dinámicamente desde js/dnd.js. */ .dragging { opacity: 0.6; box-shadow: 0 10px 20px rgb(0 0 0 / 0.3); transform: scale(1.03) rotate(-1deg); cursor: grabbing; } /* Contenedor donde se está reordenando algo: lo marca como zona activa mientras dura el arrastre. */ .drop-target-active { outline: 2px dashed #64908A; outline-offset: 4px; background-color: rgb(100 144 138 / 0.08); } /* En pantallas pequeñas, "Secciones" y "Vista previa" se comportan como pestañas: solo se muestra una a la vez (ver .tabs en index.html). A partir del breakpoint md ambos paneles se muestran siempre, lado a lado. Se restringe a "screen" para que nunca afecte a la exportación a PDF (@media print más abajo), sea cual sea el ancho de pantalla del usuario. */ @media screen and (max-width: 767px) { .panel-hidden-mobile { display: none; } } /* Al exportar/imprimir, solo se muestra #panel-output (y no sus propios controles, ni el resto de la página), todo ello marcado con .no-print (#panel-top, la cabecera, las pestañas, "Personalización de página", el título "Vista previa"...). Se usa display:none (no visibility:hidden) para ocultarlo: un elemento en visibility:hidden sigue ocupando su espacio en el documento, así que con eso todo el contenido oculto (secciones, botones...) seguía contando para la altura total y generaba varias páginas en blanco de más al imprimir. */ @media print { .no-print { display: none; } @page { margin: 0; } /* Pinta toda la hoja (no solo la caja de #panel-output, que puede quedarse más corta que la página) con el color de fondo elegido en "Personalización de página". La variable la actualiza page-settings.js; aquí no se toca nada más de / para no afectar a la pantalla de edición, solo a la impresión. */ html, body, #panel-output, #panel-output * { /* Los navegadores no imprimen colores de fondo por defecto (dependen de la opción "Gráficos de fondo" del diálogo de impresión, que el usuario puede tener desmarcada); esto fuerza a respetar los colores elegidos en una sección de "Nota" (y el fondo de página) aunque esa opción esté desactivada. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } html, body { /* Si no queda un poco de espacio en blanco al final del documento cuando el contenido no llena una página entera: es el elemento "raíz" y su fondo (si lo tiene) es el que se usa para rellenar toda la hoja (por delante del de ), así que Tailwind o daisyUI podían estar aplicándole ya un color propio con más peso que esta regla; !important fuerza a que gane siempre el elegido aquí, tanto en como en . */ background-color: var(--print-page-bg-color, #ffffff) !important; } /* Firefox no siempre extiende el fondo de / más allá de su contenido cuando este no llena una página entera (a diferencia de Chrome, que sí lo hace); para no depender de eso, se fuerza a que la propia caja de #panel-output mida al menos una página de alto, así su propio fondo (el mismo color, ya aplicado en JS) cubre ese hueco también en Firefox. */ #panel-output { min-height: 100vh; width: 100%; border: none; /* Por defecto el padding de una caja que ocupa varias páginas solo se aplica una vez, al principio y al final de toda la caja (no en cada página); box-decoration-break: clone hace que cada fragmento (cada página) se trate como una caja independiente con su propia copia del padding, así el hueco queda igual en todas las páginas. Se hace así (en vez de con @page margin) porque @page margin puede quedar invalidado por el propio ajuste de "Márgenes" del diálogo de impresión del navegador si el usuario no lo deja en "Predeterminado".*/ padding: 2cm; box-sizing: border-box; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }