fix(a11y): add prefers-reduced-motion support for all animations
Disables animations and reduces transition durations to near-zero when the user has enabled reduced-motion in their OS settings. Also replaces README screenshot placeholder with link to live demo.
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
|
||||
**A sleek, dark-themed webchat UI for [OpenClaw](https://github.com/openclaw/openclaw) — monitor sessions, stream responses, and inspect tool calls in real-time.**
|
||||
|
||||
> 🖼️ *Screenshot coming soon — [contributions welcome](https://github.com/MarlBurroW/pinchchat/issues)!*
|
||||
> 🎬 **[See the live demo →](https://marlburrow.github.io/pinchchat/)** — interactive preview of the UI with tool call visualization, streaming, and more.
|
||||
|
||||
## ✨ Features
|
||||
|
||||
|
||||
@@ -84,3 +84,24 @@ body {
|
||||
.markdown-body th, .markdown-body td { border: 1px solid rgba(255,255,255,0.08); padding: 6px 12px; }
|
||||
.markdown-body th { background: rgba(255,255,255,0.04); }
|
||||
.markdown-body img { max-width: 100%; border-radius: 8px; }
|
||||
|
||||
/* Accessibility: respect reduced-motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-fade-in {
|
||||
animation: none;
|
||||
}
|
||||
.pulse-dot {
|
||||
animation: none;
|
||||
}
|
||||
.bounce-dot {
|
||||
animation: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user