Improved support for reduced motion media

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c45fdb8e.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.bb3983ee.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">

src/assets/stylesheets/main/_resets.scss

@@ -36,6 +36,11 @@ html {
 *::before,
 *::after {
   box-sizing: inherit;
+
+  // [reduced motion]: Disable all transitions
+  @media (prefers-reduced-motion) {
+    transition: none !important; // stylelint-disable-line
+  }
 }
 
 // Remove margin in all browsers

src/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss

@@ -39,8 +39,7 @@
     // Arithmatex content
     > * {
       width: min-content;
-      // stylelint-disable-next-line declaration-no-important
-      margin: 1em auto !important;
+      margin: 1em auto !important; // stylelint-disable-line
       padding: 0 px2rem(16px);
       touch-action: auto;
     }

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -109,11 +109,6 @@
             transform 250ms;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           content: "";
-
-          // [reduced motion]: Disable animation
-          @media (prefers-reduced-motion) {
-            transition: none;
-          }
         }
       }
     }

src/assets/stylesheets/main/layout/_tooltip.scss

@@ -85,11 +85,6 @@
     max-height   0ms 250ms,
     z-index    250ms;
 
-  // [reduced motion]: Disable animation
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-
   // Tooltip on parent focus
   :focus-within > & {
     max-height: 1000%;
@@ -100,11 +95,6 @@
       opacity    250ms,
       max-height 250ms,
       z-index      0ms;
-
-    // [reduced motion]: Disable animation
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
   }
 
   // Show outline for keyboard devices
@@ -196,7 +186,6 @@
 
       // [reduced motion]: Disable animation
       @media (prefers-reduced-motion) {
-        transition: none;
         animation: none;
       }
 
@@ -211,11 +200,6 @@
           color            250ms,
           background-color 250ms;
         animation: none;
-
-        // [reduced motion]: Disable animation
-        @media (prefers-reduced-motion) {
-          transition: none;
-        }
       }
     }
 
@@ -225,11 +209,6 @@
       transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
       content: attr(data-md-annotation-id);
 
-      // [reduced motion]: Disable animation
-      @media (prefers-reduced-motion) {
-        transition: none;
-      }
-
       // [not print]: if we're not in print mode, show a `+` sign instead of
       // the original numbers, as context is already given by the position.
       @media not print {