82 lines
2.5 KiB
CSS
82 lines
2.5 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, marcados con .no-print), ocultando el resto de la página. */
|
|
@media print {
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@page { margin: 0; }
|
|
|
|
#panel-output,
|
|
#panel-output * {
|
|
visibility: visible;
|
|
/* 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" aunque esa opción esté desactivada. */
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
#panel-output .no-print {
|
|
display: none;
|
|
}
|
|
|
|
#panel-output {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border: none;
|
|
/* @page tiene margin: 0 (ver más abajo), así que sin esto el contenido
|
|
llegaría hasta el borde físico de la hoja. Se pone aquí (como
|
|
padding del propio contenido) en vez de en @page porque el soporte
|
|
de "margin" en @page es más inconsistente entre navegadores. */
|
|
padding: 2cm;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#preview-title {
|
|
display: none;
|
|
}
|
|
}
|