fix(settings): fix highlight not visible with reduced-motion (@fehmer) (monkeytypegame#6719)

fehmer · web-flow · commit 477dc4867338 · 2025-07-10T13:53:54.000+02:00
Highlight was not visible if the user has prefers-reduced-motion
enabled.
diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
@@ -493,7 +493,8 @@
     &.highlight {
       margin: -1em;
       padding: 1em;
-      animation: flashBorder 4s ease-in;
+      animation: flashBorder 4s ease-in forwards;
+      box-shadow: 0 0 0 0.2em var(--sub-color);
       border-radius: var(--roundness);
     }
 

Original file line number	Diff line number	Diff line change
`@@ -493,7 +493,8 @@`
`493`	`493`	`&.highlight {`
`494`	`494`	`margin: -1em;`
`495`	`495`	`padding: 1em;`
`496`		`- animation: flashBorder 4s ease-in;`
	`496`	`+ animation: flashBorder 4s ease-in forwards;`
	`497`	`+ box-shadow: 0 0 0 0.2em var(--sub-color);`
`497`	`498`	`border-radius: var(--roundness);`
`498`	`499`	`}`
`499`	`500`