Removed default anchor CSS filtering in dark mode

Due to causing content images to be rendered in unexpected ways.

- Also removed CSS filters from other image usage.
- Tweaked header CSS filtering to not be so aggressive.
- Forced WYSIWYG editor to be on its own layer since that would allow
massive larger performance increases in Safari, especially when using
dark mode.

Closes #2045.
Closes #2154.

diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index a76d166e9a81c766d92a2c0681b526cbe1893c38..e01ecebc949c2e7154ae4186d13d3171b67bcd79 100644 (file)
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -95,9 +95,3 @@
 .bg-shelf {
   background-color: var(--color-bookshelf);
 }
-
-.bg-shelf, .bg-book {
-  @include whenDark {
-    filter: brightness(67%) saturate(80%);
-  }
-}

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 4c3f6c619d802db2c6fbe7f6d919a00b1280058b..e19bb4f612f373461545ff97c4b7078bc5fd31ae 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -24,7 +24,7 @@ header {
   padding: $-xxs 0;
   @include lightDark(border-bottom-color, #DDD, #000);
   @include whenDark {
-    filter: saturate(0.6) brightness(0.8);
+    filter: saturate(0.8) brightness(0.8);
   }
   .links {
     display: inline-block;

diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 116504199f10653a93fa941733b45498128eaea7..8bc2155a95ae5fe8285c00a0d2bd48903136f352 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -96,9 +96,6 @@ a {
   text-decoration: none;
   transition: filter ease-in-out 80ms;
   line-height: 1.6;
-  @include whenDark {
-    filter: brightness(1.3) saturate(0.7);
-  }
   &:hover {
     text-decoration: underline;
   }

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index 9dbecda95bf0d5a57fe40c7b2c3cfc25401f62cb..dfaf6683ed5888a236d1db4a42aecd21618d62fa 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -51,6 +51,9 @@
       overflow:auto;
       iframe {
         flex: 1;
+        // Force TinyMCE iframe to render on its own layer
+        // for much greater performance in Safari
+        will-change: transform;
       }
     }
   }