47 lines
1.2 KiB
CSS
47 lines
1.2 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|