/* Estilos para slides de imagen y sus animaciones. Se suma a styles.css sin modificarlo. La imagen calca el layout del video. */ #img { width: 100%; height: 100%; object-fit: contain; background: #000; display: none; /* el reproductor la muestra cuando corresponde */ } /* Pantalla en vivo (compartir pantalla): cubre TODO, por encima del header */ #live, #hdvideo { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 99999; display: none; } /* Animaciones de entrada / movimiento. IMPORTANTE: NINGUNA anima la opacidad. Si una animación no llegara a correr (pestaña en segundo plano, Android viejo, etc.), la imagen igual queda VISIBLE. Solo se anima transform (escala/desplazamiento), que nunca oculta la imagen. */ .slide-anim-none { } .slide-anim-fade { animation: slideFade 0.7s ease-out both; } @keyframes slideFade { from { transform: scale(1.04); } to { transform: scale(1); } } /* Ken Burns: zoom lento; el reproductor ajusta la duración a la de la imagen */ .slide-anim-kenburns { animation: slideKen 8s ease-in-out both; transform-origin: center center; } @keyframes slideKen { from { transform: scale(1); } to { transform: scale(1.12); } } .slide-anim-slide { animation: slideIn 0.7s ease-out both; } @keyframes slideIn { from { transform: translateX(6%); } to { transform: translateX(0); } } /* ---------- MODO PANTALLA COMPLETA ---------- Se activa desde el panel (config.json -> display.fullscreen = true). app.js agrega la clase .fs-mode al . Oculta la barra superior y el contenido usa toda la altura. Va con !important porque styles.css define .fixed-header con display:flex y .main-body con top:15vh (misma especificidad, gana el ultimo cargado). */ body.fs-mode .fixed-header { display: none !important; } body.fs-mode .main-body { top: 0 !important; }