diff --git a/resources/assets/stylesheets/less/header.less b/resources/assets/stylesheets/less/header.less index d200787692b688a71e0ca0c593f3da0164a563e1..94d6b681a52c716b2e5be98f9fcc370b9d622b8e 100644 --- a/resources/assets/stylesheets/less/header.less +++ b/resources/assets/stylesheets/less/header.less @@ -200,7 +200,10 @@ overflow-x: hidden; padding: 0; text-indent: -150px; - transition: all 500ms; + + @media not (prefers-reduced-motion) { + transition: all 500ms; + } } body.fixed { #barBottomLeft { diff --git a/resources/assets/stylesheets/less/links.less b/resources/assets/stylesheets/less/links.less index a6d6158c5a9c9738928829f142f700dd27942618..4f62ec085b33bc8e01ba646fe7dd1119bebf0ecb 100644 --- a/resources/assets/stylesheets/less/links.less +++ b/resources/assets/stylesheets/less/links.less @@ -4,7 +4,7 @@ a, a:link, a:visited { text-decoration: none; &.index { color: #444; } - &.printhead { color: #339; } + &.printhead { color: #339; } &.tree { color: #000; } &.toolbar { color: #91a2b6; @@ -12,7 +12,9 @@ a, a:link, a:visited { } } a[href] { - transition: color 0.3s; + @media not (prefers-reduced-motion) { + transition: color 0.3s; + } } a[disabled] { pointer-events: none; diff --git a/resources/assets/stylesheets/less/navigation-hoverborder.less b/resources/assets/stylesheets/less/navigation-hoverborder.less index 73d3f1f8b5d72c819ac4e00da17a0c53e3b2b34c..bd81f6835cb7f94a1e0455a8d1d37efc0fd7976b 100644 --- a/resources/assets/stylesheets/less/navigation-hoverborder.less +++ b/resources/assets/stylesheets/less/navigation-hoverborder.less @@ -22,9 +22,11 @@ height: @height; margin-top: @margin; - transition: left @transition-duration, - right @transition-duration, - opacity @transition-duration; + @media not (prefers-reduced-motion) { + transition: left @transition-duration, + right @transition-duration, + opacity @transition-duration; + } } } .border-shrink() { diff --git a/resources/assets/stylesheets/less/navigation.less b/resources/assets/stylesheets/less/navigation.less index 1b50c292f44da1726a434b6f0daed13ccea76848..c904d4fad17844a199e82ab595b9a9da7fccf0f1 100644 --- a/resources/assets/stylesheets/less/navigation.less +++ b/resources/assets/stylesheets/less/navigation.less @@ -85,7 +85,9 @@ body:not(.fixed) #barTopMenu { // Hide all navigation item title on hover and display only the currently // hovered one .navtitle { - transition: opacity 300ms; // Smooth change when entering + @media not (prefers-reduced-motion) { + transition: opacity 300ms; // Smooth change when entering + } } &:hover { > li.active .navtitle { @@ -93,7 +95,9 @@ body:not(.fixed) #barTopMenu { } > li:hover .navtitle { opacity: 1; - transition: opacity 0ms; // Quick change when leaving + @media not (prefers-reduced-motion) { + transition: opacity 0ms; // Quick change when leaving + } } } @@ -125,13 +129,17 @@ body:not(.fixed) #barTopMenu { // Rotate icon > label img { - transition: transform 300ms; + @media not (prefers-reduced-motion) { + transition: transform 300ms; + } transform: rotate(90deg); } // Define transition duration for possible badge on overflow > label > a[data-badge]::before { - transition: opacity 300ms; + @media not (prefers-reduced-motion) { + transition: opacity 300ms; + } } // Display menu on activation @@ -225,7 +233,9 @@ label[for="barTopMenu-toggle"] { height: 0; max-height: 0; opacity: 0; - transition: all 300ms; + @media not (prefers-reduced-motion) { + transition: all 300ms; + } // 1/4 of the screen's width, creates a bigger hover area width: 25vw;