64 lines
1.7 KiB
CSS
64 lines
1.7 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;
|
|
}
|
|
|
|
#panel-output,
|
|
#panel-output * {
|
|
visibility: visible;
|
|
}
|
|
|
|
#panel-output .no-print {
|
|
display: none;
|
|
}
|
|
|
|
#panel-output {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
}
|