Removed default anchor CSS filtering in dark mode

ssddanbrown · ssddanbrown · commit 76fcbd37526a · 2020-07-26T16:36:15.000+01:00
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 BookStackApp#2045. Closes BookStackApp#2154.
diff --git 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
@@ -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
@@ -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
@@ -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;
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ header {`
`24`	`24`	`padding: $-xxs 0;`
`25`	`25`	`@include lightDark(border-bottom-color, #DDD, #000);`
`26`	`26`	`@include whenDark {`
`27`		`- filter: saturate(0.6) brightness(0.8);`
	`27`	`+ filter: saturate(0.8) brightness(0.8);`
`28`	`28`	`}`
`29`	`29`	`.links {`
`30`	`30`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,9 @@`
`51`	`51`	`overflow:auto;`
`52`	`52`	`iframe {`
`53`	`53`	`flex: 1;`
	`54`	`+ // Force TinyMCE iframe to render on its own layer`
	`55`	`+ // for much greater performance in Safari`
	`56`	`+ will-change: transform;`
`54`	`57`	`}`
`55`	`58`	`}`
`56`	`59`	`}`