[pbList] Lacks content : fallback-img+Chrome 124+(forced-colors:activ…

…e)+(prefers-color-scheme:dark) #35
pb-100 · May 9, 2024 · 8ed9f49 · 8ed9f49
1 parent c68bba2
commit 8ed9f49
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/scss/mixin/mixin-forced-colors.scss b/src/scss/mixin/mixin-forced-colors.scss
@@ -3,6 +3,11 @@
         @if( $target == 'native' ){
             @include media(forced_colors_native) { @content; }
         }
+        @if( $target == 'native_white_on_dark' ){
+            @media only screen and (forced-colors: active) and (prefers-color-scheme:dark){
+                @content;
+            }
+        }
 
         @if( $target == 'ms' ){
             @include media(forced_colors_ms) { @content; }

diff --git a/src/scss/pbList/04_prettify.scss b/src/scss/pbList/04_prettify.scss
@@ -33,10 +33,6 @@
 @if( $OPTION_USE_WEBFONT_FALLBACK ){
     .pbList-fallback-img {
         background-color : #fff;
-
-        font {
-            background-color : black;
-        }
         .pbList-area {
             background-color : deeppink;
         }
@@ -54,7 +50,10 @@
         }
         .pbList-syb {
             background-color : brown;
-        } 
+        }
+        font {
+            background-color : black;
+        }
     }
 }
 
@@ -86,12 +85,6 @@
     @if( $OPTION_USE_WEBFONT_FALLBACK ){
         .pbList-fallback-img {
             background-color : #000;
-            font {
-                background-color : white;
-            }
-            font:after {
-                filter : invert(1); // A
-            }
             .pbList-area {
                 background-color : #C487A0;
             }
@@ -110,18 +103,26 @@
             .pbList-syb {
                 background-color : #d8ae14;
             }
+            font {
+                background-color : white;
+            }
+            font:after {
+                filter : invert(1); // A
+            }
         }
     }
 }
 @if( $UA_Modern ){
-    @include forced-colors(native){
-        .pbList-fallback-img font:after {
-            filter : invert(0); // Overide A
+    @include forced-colors(native_or_fallback){
+        .pbList-fallback-img {
+            font:after {
+                filter : invert(0); // Overide A
+            }
         }
     }
-    @include forced-colors(fallback){
-        .pbList-fallback-img font:after {
-            filter : invert(0); // Overide A
+    @include forced-colors(native_white_on_dark){
+        _:lang(x)::-internal-media-controls-overlay-cast-button, .pbList-fallback-img font:after {
+            filter : invert(1);  // for Chrome 124
         }
     }
 }