/* * Transiciones de página. La clase .lmg-pt en la pone un script * en el head solo cuando la opción está activa y el usuario no tiene * las animaciones del sistema desactivadas. Sin JS no se oculta nada. * Variables (:root, inyectadas desde PHP con los valores de las opciones): * --lmg-pt-duration, --lmg-pt-ease, --lmg-pt-shift */ html.lmg-pt body { opacity: 0; } html.lmg-pt #brx-content { transform: translateY(var(--lmg-pt-shift, 10px)); } /* Entrada */ html.lmg-pt.lmg-pt-ready body { opacity: 1; transition: opacity var(--lmg-pt-duration, 350ms) var(--lmg-pt-ease, cubic-bezier(0.22, 1, 0.36, 1)); } html.lmg-pt.lmg-pt-ready #brx-content { transform: translateY(0); transition: transform calc(var(--lmg-pt-duration, 350ms) * 1.7) var(--lmg-pt-ease, cubic-bezier(0.22, 1, 0.36, 1)); } /* * Salida: velo blanco fijo que cubre toda la página al hacer clic en un * enlace interno (clase .lmg-pt-leaving, la pone page-transitions.js). * Va por encima del overlay del menú (z-index 2147483000 en menu-overlay.css), * así el fundido se ve igual con el menú abierto o cerrado. */ html.lmg-pt::after { content: ''; position: fixed; inset: 0; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2147483100; transition: opacity var(--lmg-pt-duration, 350ms) var(--lmg-pt-ease, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s var(--lmg-pt-duration, 350ms); } html.lmg-pt.lmg-pt-leaving::after { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--lmg-pt-duration, 350ms) var(--lmg-pt-ease, cubic-bezier(0.22, 1, 0.36, 1)); } /* * Indicador de carga: anillo fino centrado, por encima del velo. * La clase lmg-pt-spin solo se añade si la opción está activa. * Aparece con retardo: si la carga es inmediata no llega a verse. */ html.lmg-pt-spin::before { content: ''; position: fixed; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid rgba(31, 45, 84, 0.15); border-top-color: #1f2d54; border-radius: 50%; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2147483101; } /* Página que se va: aparece cuando el fundido a blanco ya ha terminado. */ html.lmg-pt-spin.lmg-pt-leaving::before, /* Página que llega: aparece si tarda en revelarse; se va con lmg-pt-ready. */ html.lmg-pt-spin:not(.lmg-pt-ready)::before { visibility: visible; animation: lmg-spin-in 0.25s ease-out both, lmg-spin 0.8s linear infinite; } html.lmg-pt-spin.lmg-pt-leaving::before { animation-delay: calc(var(--lmg-pt-duration, 350ms) + 150ms), 0s; } html.lmg-pt-spin:not(.lmg-pt-ready)::before { animation-delay: 400ms, 0s; } @keyframes lmg-spin { to { transform: rotate(360deg); } } @keyframes lmg-spin-in { from { opacity: 0; } to { opacity: 1; } }