From 0e2749831a01be57754832562b55873b61ea5796 Mon Sep 17 00:00:00 2001
From: axlevxa <67394526+axlevxa@users.noreply.github.com>
Date: Sat, 27 Jun 2020 01:49:37 -0700
Subject: [PATCH] UX: Add prefers-reduced-motion query for Colibris skin #4136
 (#4137)

---
 src/static/skins/colibris/src/components/chat.css   |  9 ++++++++-
 .../skins/colibris/src/components/gritter.css       | 12 ++++++++++++
 src/static/skins/colibris/src/components/popup.css  | 13 +++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
index b9853508b..4e92342cf 100644
--- a/src/static/skins/colibris/src/components/chat.css
+++ b/src/static/skins/colibris/src/components/chat.css
@@ -75,10 +75,17 @@
   background-color: var(--bg-color);
 }
 
+@media (prefers-reduced-motion) {
+  .chat-content {
+    transform: scale(1);
+    transition: none;
+  }
+}
+
 @media (max-width: 800px) {
   #chaticon {
     right: 0;
   }
 
   .stick-to-screen-btn { display: none; }
-}
\ No newline at end of file
+}
diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css
index e612c4d44..f0c8610fd 100644
--- a/src/static/skins/colibris/src/components/gritter.css
+++ b/src/static/skins/colibris/src/components/gritter.css
@@ -63,6 +63,18 @@
   transform: scale(1) translateY(0) !important;
   transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) !important;
 }
+@media (prefers-reduced-motion) {
+  #gritter-container.top .gritter-item.popup > .popup-content {
+    transform: scale(1) translateY(0px) !important;
+  }
+  #gritter-container.bottom .gritter-item.popup > .popup-content {
+    transform: scale(1) translateY(0px) !important;
+  }
+  .gritter-item.popup.popup-show > .popup-content {
+    transform: scale(1) translateY(0px) !important;
+    transition: none;
+  }
+}
 
 /* for ep_deleted_after_delay */
 .gritter-item #close_expiration_notif {
diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css
index b74a25cb8..0fe67e50f 100644
--- a/src/static/skins/colibris/src/components/popup.css
+++ b/src/static/skins/colibris/src/components/popup.css
@@ -41,6 +41,19 @@
   min-width: 180px;
 }
 
+@media (prefers-reduced-motion) {
+  .popup>.popup-content {
+    transform: scale(1);
+    transition: none;
+  }
+  .nice-select .list {
+    transform: scale(1) translateY(0px);
+    -webkit-transform: scale(1) translateY(0px);
+    -ms-transform: scale(1) translateY(0px);
+    transition: none;
+  }
+}
+
 @media (max-width: 800px) {
   .popup-content {
     padding: 1rem;