disable all animations when prefers-reduced-motion is enabled

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

Author: julien-nc

src/components/AssistantTextProcessingForm.vue

@@ -892,6 +892,11 @@ export default {
 				> label {
 					animation: blink 2s infinite;
 				}
+				@media (prefers-reduced-motion: reduce) {
+					> label {
+						animation: none;
+					}
+				}
 			}
 
 			&__provider {

src/components/ChattyLLM/InputArea.vue

@@ -188,6 +188,11 @@ export default {
 		font-style: italic;
 		animation: breathing 2s linear infinite normal;
 	}
+	@media (prefers-reduced-motion: reduce) {
+		:deep(&__thinking > div) {
+			animation: none;
+		}
+	}
 
 	&__button-box {
 		display: flex;

src/components/fields/AudioRecorderWrapper.vue

@@ -263,15 +263,15 @@ export default {
 			height: 16px;
 			flex: 0 0 16px;
 			border-radius: 8px;
-			background-color: var(--color-error);
+			background-color: var(--color-element-error);
 		}
 
 		@keyframes fadeOutIn {
 			0% {
 				opacity: 1;
 			}
 			50% {
-				opacity: .3;
+				opacity: 0.1;
 			}
 			100% {
 				opacity: 1;
@@ -281,6 +281,11 @@ export default {
 		.fadeOutIn {
 			animation: fadeOutIn 3s infinite;
 		}
+		@media (prefers-reduced-motion: reduce) {
+			.fadeOutIn {
+				animation: none;
+			}
+		}
 	}
 }
 </style>

src/components/fields/TextInput.vue

@@ -242,6 +242,11 @@ body[dir="rtl"] .choose-file-button {
 	.shadowed.streaming .rich-contenteditable__input {
 		animation: pulse 2s infinite;
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.shadowed.streaming .rich-contenteditable__input {
+			animation: none;
+		}
+	}
 }
 
 @keyframes pulse {