openvibers/openvibe.tools Commits

Reduced motion: guard animated stylesheets (#174)

OP OpenVibers committed 12 days ago · c0386e1275 · 11 files, +18 −0

Changes

ddiff --git a/apps/audio/public/css/style.css b/apps/audio/public/css/style.css
iindex 0e3df30..4814edd 100644
---- a/apps/audio/public/css/style.css
++++ b/apps/audio/public/css/style.css
@@@ -582,3 +582,5 @@ a:hover { color: var(--accent-hover); }
  .file-details .file-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; }
  .file-details .file-row + .file-row { border-top: 1px solid var(--border); }
  .file-details .btn-sm { padding: 4px 10px; font-size: 12px; margin-top: 4px; }
++
++@media (prefers-reduced-motion: reduce) { .option-group, .result-panel, .toast { animation: none; } .spinner { animation: none; opacity: .7; } }
ddiff --git a/apps/docs/public/css/style.css b/apps/docs/public/css/style.css
iindex 0bd4509..b989530 100644
---- a/apps/docs/public/css/style.css
++++ b/apps/docs/public/css/style.css
@@@ -474,3 +474,5 @@ body {
      line-height: 1.5;
  }
  .check-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
++
++@media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: .7; } }
ddiff --git a/apps/food/public/css/style.css b/apps/food/public/css/style.css
iindex 69f4b5f..bec9ddf 100644
---- a/apps/food/public/css/style.css
++++ b/apps/food/public/css/style.css
@@@ -235,3 +235,5 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
    .food-table { font-size:11px; }
    .food-table th, .food-table td { padding:6px; }
  }
++
++@media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: .7; } }
ddiff --git a/apps/gateway/public/audio.html b/apps/gateway/public/audio.html
iindex cac1d21..57b6349 100644
---- a/apps/gateway/public/audio.html
++++ b/apps/gateway/public/audio.html
@@@ -235,5 +235,6 @@
          });
      </script>
    <script src="https://openvibe.live/live-notify.js" async></script>
++  <style>@media (prefers-reduced-motion: reduce) { .showcase-tool, .example-btn, .stat-card { animation: none; } }</style>
  </body>
  </html>
ddiff --git a/apps/gateway/public/dev.html b/apps/gateway/public/dev.html
iindex dbbbc24..92b37c6 100644
---- a/apps/gateway/public/dev.html
++++ b/apps/gateway/public/dev.html
@@@ -549,5 +549,6 @@ function sample(){const t=T[ACT];if(t?.p){$('in1').value=t.p;if(t.p2&&$('in2'))$
  function toast(msg){const t=$('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2000)}
  </script>
    <script src="https://openvibe.live/live-notify.js" async></script>
++  <style>@media (prefers-reduced-motion: reduce) { .bg-glow::before, .bg-glow::after { animation: none; } }</style>
  </body>
  </html>
ddiff --git a/apps/gateway/public/img.html b/apps/gateway/public/img.html
iindex 5b6743c..736b508 100644
---- a/apps/gateway/public/img.html
++++ b/apps/gateway/public/img.html
@@@ -235,5 +235,6 @@
          });
      </script>
    <script src="https://openvibe.live/live-notify.js" async></script>
++  <style>@media (prefers-reduced-motion: reduce) { .showcase-tool, .example-btn, .stat-card { animation: none; } }</style>
  </body>
  </html>
ddiff --git a/apps/gateway/public/net.html b/apps/gateway/public/net.html
iindex 368c1a2..199f751 100644
---- a/apps/gateway/public/net.html
++++ b/apps/gateway/public/net.html
@@@ -1428,5 +1428,6 @@
      }
      </script>
    <script src="https://openvibe.live/live-notify.js" async></script>
++  <style>@media (prefers-reduced-motion: reduce) { .bg-glow::before, .bg-glow::after, .toast, .showcase-tool, .stat-card { animation: none; } }</style>
  </body>
  </html>
ddiff --git a/apps/img/public/css/style.css b/apps/img/public/css/style.css
iindex e239e43..334e5b7 100644
---- a/apps/img/public/css/style.css
++++ b/apps/img/public/css/style.css
@@@ -477,3 +477,5 @@ body {
      font-size: 14px;
      line-height: 1.5;
  }
++
++@media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: .7; } }
ddiff --git a/apps/maps/public/css/style.css b/apps/maps/public/css/style.css
iindex e837fb9..cd55aa8 100644
---- a/apps/maps/public/css/style.css
++++ b/apps/maps/public/css/style.css
@@@ -544,3 +544,5 @@ body {
    .filter-chips { overflow-x: auto; }
    .header-btn { width: 30px; height: 30px; font-size: 12px; }
  }
++
++@media (prefers-reduced-motion: reduce) { .splash-content, .splash-icon, #splash-screen.fade-out, .welcome-icon, .user-marker, #detail-panel, .modal-content, .sp-item:not(.done):not(.error) { animation: none; } .search-progress .spinner { animation: none; opacity: .7; } }
ddiff --git a/apps/text/public/css/shared.css b/apps/text/public/css/shared.css
iindex f9fa770..d021fdc 100644
---- a/apps/text/public/css/shared.css
++++ b/apps/text/public/css/shared.css
@@@ -895,3 +895,5 @@ textarea.large {
      .interconnect-banner { flex-direction: column; text-align: center; }
      .interconnect-banner .ic-links { margin-left: 0; }
  }
++
++@media (prefers-reduced-motion: reduce) { .live-dot, .output-flash, .toast { animation: none; } }
ddiff --git a/apps/yt/public/css/style.css b/apps/yt/public/css/style.css
iindex 4780d32..97f7533 100644
---- a/apps/yt/public/css/style.css
++++ b/apps/yt/public/css/style.css
@@@ -412,3 +412,5 @@ a:hover { text-decoration: underline; }
      .format-btn { padding: 6px 12px; font-size: 0.8rem; }
      .footer-inner { flex-direction: column; text-align: center; }
  }
++
++@media (prefers-reduced-motion: reduce) { .spinner, .progress-bar.indeterminate { animation: none; opacity: .7; } }