UX: Add prefers-reduced-motion query for Colibris skin #4136 (#4137)

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; }
-}
+}

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 {

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;