Added use of the prefers-contrast media query

Used upon areas we usually fade-out to provide a focused user
experience. If the user desires more contrasted we prevent this
behaviour using the prefers-contrast media query.

Related to #2634

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index ae3e7a441e444556de50b6cb721dcb10f69f902c..b7aea74523ec29e20af1c1ab5fedcf28ab0f7091 100644 (file)
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -229,6 +229,9 @@
   &:hover, &:focus-within {
     opacity: 1;
   }
+  @media (prefers-contrast: more) {
+    opacity: 1;
+  }
 }
 
 /**

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 1a7015078e3891f44fa3511e0b88985073ce7f96..f070f5a187428eedc0a2af37688733efa1af4a28 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -262,6 +262,9 @@ header .search-box {
   &:hover, &:focus-within {
     opacity: 1;
   }
+  @media (prefers-contrast: more) {
+    opacity: 1;
+  }
 }
 
 @include smaller-than($l) {

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 362bab7d39195672c1511bc73832e0e6a4eb1ae0..783ccc8f9476cb455e71c6186c346e2695ba1b9e 100644 (file)
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -369,6 +369,9 @@ body.flexbox {
     &:focus-within {
       opacity: 1;
     }
+    @media (prefers-contrast: more) {
+      opacity: 1;
+    }
   }
 
 }

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index 4f249244b03f88a388c3b6c97855b01d27ac1d0a..14c253679419ba0981ea66fff5be999709360c56 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -412,4 +412,7 @@ body.mce-fullscreen, body.markdown-fullscreen {
     text-decoration: none;
     opacity: 1;
   }
+  @media (prefers-contrast: more) {
+    opacity: 1;
+  }
 }
\ No newline at end of file