/** * @file * Scorrimento delle destinazioni dei bus: pausa (WCAG 2.2.2 "Pausa, stop, nascondi"). * * In pausa (pulsante nell'intestazione, scelta salvata o "riduci movimento" del * sistema) il testo si ferma e va a capo: l'elenco completo delle fermate resta * leggibile. Senza pausa l'aspetto è quello di sempre. */ /* Stato in pausa: classe su , così resta valida anche dopo i refresh AJAX. */ html.tts-bus-scroll-paused .scroll-container-destinations, html.pdo-motion-paused .scroll-container-destinations { height: auto !important; overflow: visible !important; } html.tts-bus-scroll-paused .scroll-text-destinations, html.pdo-motion-paused .scroll-text-destinations { position: static !important; animation: none !important; transform: none !important; white-space: normal !important; height: auto !important; line-height: 1.4 !important; } /* "Riduci movimento" del sistema, anche prima che parta il JavaScript (a meno che l'utente abbia scelto di far riprendere lo scorrimento). */ @media (prefers-reduced-motion: reduce) { html:not(.tts-bus-scroll-running) .scroll-container-destinations { height: auto !important; overflow: visible !important; } html:not(.tts-bus-scroll-running) .scroll-text-destinations { position: static !important; animation: none !important; transform: none !important; white-space: normal !important; height: auto !important; line-height: 1.4 !important; } } /* Col mouse sopra la riga lo scorrimento si ferma, per leggere con calma (non sui totem). Specificità più alta di ".scroll-text-destinations[style*=animation-name]". */ html:not(.tts-bus-kiosk) body .bus-table tbody tr:hover .scroll-text-destinations { animation-play-state: paused !important; } /* Pulsante nell'intestazione "Destinazioni": stesso colore del testo dell'intestazione. */ .tts-bus-scroll-toggle { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; line-height: 1; margin-left: 6px; min-height: 24px; min-width: 24px; padding: 2px 4px; vertical-align: middle; } .tts-bus-scroll-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }