Only disable specific animations/transitions/shadows

If I've missed any, follow-up PRs would be most appreciated.

Closes #2557

qt/aqt/data/web/css/toolbar.scss

@@ -35,7 +35,10 @@
 .toolbar {
     justify-self: center;
     white-space: nowrap;
-    transition: all var(--transition) ease-in-out;
+
+    .fancy & {
+        transition: all var(--transition) ease-in-out;
+    }
 }
 
 .hitem {
@@ -57,7 +60,6 @@ body {
     &:not(.fancy).hidden {
         opacity: 0;
     }
-    transition: opacity var(--transition) ease-in-out;
 
     &.fancy {
         margin-bottom: 5px;

qt/aqt/data/web/css/webview.scss

@@ -15,26 +15,18 @@
 body {
     color: var(--fg);
     background: var(--canvas);
-    transition: opacity var(--transition-medium) ease-out;
+    &.fancy {
+        transition: opacity var(--transition-medium) ease-out;
+    }
     margin: 2em;
     overscroll-behavior: none;
     &:not(.isMac),
     &:not(.isMac) * {
         @include scrollbar.custom;
     }
-    &.reduce-motion,
-    &.reduce-motion *:not(.no-reduce-motion) {
-        transition: none !important;
-        animation: none !important;
-    }
     &.no-blur * {
         backdrop-filter: none !important;
     }
-    &:not(.fancy),
-    &:not(.fancy) * {
-        box-shadow: none !important;
-        backdrop-filter: none !important;
-    }
 }
 
 a {

qt/aqt/toolbar.py

@@ -388,7 +388,7 @@ class Toolbar:
 
         return f"""
 <a class=hitem tabindex="-1" aria-label="{name}" title="{title}" id="{label}" href=# onclick="return pycmd('{label}')"
->{name}<img id=sync-spinner class="no-reduce-motion" src='/_anki/imgs/refresh.svg'>
+>{name}<img id=sync-spinner src='/_anki/imgs/refresh.svg'>
 </a>"""
 
     def set_sync_active(self, active: bool) -> None:

sass/base.scss

@@ -49,19 +49,9 @@ body {
     &:not(.isMac) * {
         @include scrollbar.custom;
     }
-    &.reduce-motion,
-    &.reduce-motion *:not(.no-reduce-motion) {
-        transition: none !important;
-        animation: none !important;
-    }
     &.no-blur * {
         backdrop-filter: none !important;
     }
-    &:not(.fancy),
-    &:not(.fancy) * {
-        box-shadow: none !important;
-        backdrop-filter: none !important;
-    }
 }
 
 button:not(.btn,.btn-close) {

sass/core.scss

@@ -11,7 +11,9 @@ body {
     color: var(--fg);
     background: var(--canvas);
     margin: 1em;
-    transition: opacity var(--transition-medium) ease-out;
+    &.fancy {
+        transition: opacity var(--transition-medium) ease-out;
+    }
     overscroll-behavior: none;
 }
 

ts/graphs/RangeBox.svelte

@@ -67,7 +67,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div class="range-box">
-    <div class="spin no-reduce-motion" class:loading>◐</div>
+    <div class="spin" class:loading>◐</div>
 
     <InputBox>
         <label>