From 18ae4e559314288780c91ee838fd1b2f92e662f7 Mon Sep 17 00:00:00 2001 From: Aditya Telange <21258296+adityatelange@users.noreply.github.com> Date: Wed, 13 Jan 2021 23:35:54 +0530 Subject: [PATCH] respect prefers-reduced-motion while animating --- assets/css/post-entry.css | 6 ++++++ assets/css/post-single.css | 6 ++++++ assets/css/profile-mode.css | 6 ++++++ assets/css/search.css | 7 +++++++ assets/css/terms.css | 6 ++++++ 5 files changed, 31 insertions(+) diff --git a/assets/css/post-entry.css b/assets/css/post-entry.css index c06fd4aa..a9d08512 100644 --- a/assets/css/post-entry.css +++ b/assets/css/post-entry.css @@ -53,6 +53,12 @@ transform: scale(.96) } +@media (prefers-reduced-motion) { + .post-entry:active { + transform: none + } +} + .tag-entry .entry-cover { display: none } diff --git a/assets/css/post-single.css b/assets/css/post-single.css index 0dce08ca..5dcb272f 100644 --- a/assets/css/post-single.css +++ b/assets/css/post-single.css @@ -335,6 +335,12 @@ transform: scale(.96) } +@media (prefers-reduced-motion) { + .share-buttons svg:active { + transform: none + } +} + h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, diff --git a/assets/css/profile-mode.css b/assets/css/profile-mode.css index d59f7363..52502373 100644 --- a/assets/css/profile-mode.css +++ b/assets/css/profile-mode.css @@ -55,3 +55,9 @@ .button:active { transform: scale(.96) } + +@media (prefers-reduced-motion) { + .button:active { + transform: none + } +} diff --git a/assets/css/search.css b/assets/css/search.css index 275cbe10..df3275c9 100644 --- a/assets/css/search.css +++ b/assets/css/search.css @@ -41,4 +41,11 @@ #searchResults .active { transform: scale(.98); + border: 2px solid var(--tertiary) +} + +@media (prefers-reduced-motion) { + #searchResults .active { + transform: none + } } diff --git a/assets/css/terms.css b/assets/css/terms.css index 7a68cc3d..c20357fa 100644 --- a/assets/css/terms.css +++ b/assets/css/terms.css @@ -16,3 +16,9 @@ background: var(--tertiary); transform: scale(.96) } + +@media (prefers-reduced-motion) { + .terms-tags a:active { + transform: none + } +}