110 lines
4.4 KiB
CSS
110 lines
4.4 KiB
CSS
/* HTML: <div class="breadcrumb"></div> */
|
|
.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 <html>/<body> 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: <html> 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 <body>), 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 <html> como en <body>. */
|
|
background-color: var(--print-page-bg-color, #ffffff) !important;
|
|
}
|
|
|
|
/* Firefox no siempre extiende el fondo de <html>/<body> 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;
|
|
}
|
|
}
|