Changeset 51253

Timestamp:

06/28/2021 11:39:33 PM (4 years ago)

Author:

desrosj

Message:

Twenty Twenty-One: Ensure Duotone images are displayed correctly in Dark Mode.

This reduces the specificity of the CSS selector applying a dimming effect to images so that the new Duotone feature is properly applied to images.

Props walbo.
Fixes #53531.

Location:

trunk/src/wp-content/themes/twentytwentyone/assets

Files:

• css/style-dark-mode-rtl.css (modified) (1 diff)
• css/style-dark-mode.css (modified) (1 diff)
• css/style-dark-mode.css.map (modified) (1 diff)
• sass/style-dark-mode.scss (modified) (1 diff)

trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

@@ -18 +18 @@
     }
 
-    .is-dark-theme.is-dark-theme img {
+    .is-dark-theme img {
         filter: brightness(0.85) contrast(1.1);
     }

trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

@@ -18 +18 @@
     }
 
-    .is-dark-theme.is-dark-theme img {
+    .is-dark-theme img {
         filter: brightness(0.85) contrast(1.1);
     }

trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css.map

@@ -1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/style-dark-mode.scss"],"names":[],"mappings":"AAAA;AACA;EAEC;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAEA;IACA;IACA;;EAEA;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAEA;IACC;;EAIF;IACC;IACA;IACA;IACA;;EAEA;IACC;;;AAEA;EAHD;IAIE;;;AAGD;EAPD;IAQE;;;AAOA;EADD;IAEE;;;AA9EN;EAoFE;IACC;;;AArFH;EAwFE;IAEC;IACA;IACA;;;AA5FH;EA+FE;IACC","file":"style-dark-mode.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/style-dark-mode.scss"],"names":[],"mappings":"AAAA;AACA;EAEC;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAEA;IACA;IACA;;;EAGD;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAEA;IACC;;EAIF;IACC;IACA;IACA;IACA;;EAEA;IACC;;;AAEA;EAHD;IAIE;;;AAGD;EAPD;IAQE;;;AAOA;EADD;IAEE;;;AA9EN;EAoFE;IACC;;;AArFH;EAwFE;IAEC;IACA;IACA;;;AA5FH;EA+FE;IACC","file":"style-dark-mode.css"}

trunk/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

@@ -16 +16 @@
         --table--stripes-border-color: rgba(240, 240, 240, 0.15);
         --table--stripes-background-color: rgba(240, 240, 240, 0.15);
+    }
 
-        img {
-            filter: brightness(.85) contrast(1.1);
-        }
+    .is-dark-theme img {
+        filter: brightness(.85) contrast(1.1);
     }