feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 7 insertions, 4 deletions

diff --git a/src/internal-server/public/css/main.css b/src/internal-server/public/css/main.css
index a1c5653d7..b20b67922 100644
--- a/src/internal-server/public/css/main.css
+++ b/src/internal-server/public/css/main.css
@@ -4,7 +4,8 @@ input {
   padding: 0.5rem;
 }
 
-button, .button {
+button,
+.button {
   display: flex;
   overflow: hidden;
   padding: 12px 12px;
@@ -14,7 +15,9 @@ button, .button {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  transition: all 150ms linear;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: all 150ms linear;
+  }
   text-align: center;
   white-space: nowrap;
   text-decoration: none !important;
@@ -33,7 +36,7 @@ button, .button {
   align-items: center;
   flex: 0 0 160px;
   box-shadow: 2px 5px 10px #e4e4e4;
-  color: #FFFFFF;
+  color: #ffffff;
   background: #161616;
 }
 
@@ -66,4 +69,4 @@ button, .button {
 
 td {
   word-break: break-all;
-}
\ No newline at end of file
+}