Changeset 50423

Timestamp:

02/23/2021 08:15:02 PM (5 months ago)

Author:

adamsilverstein

Message:

Twenty Twenty-One: Improve transparent PNG logo visible on focus.

This ensures a transparent logo remains visible while focused. Also cleans up dark mode CSS, consolidating styles and removing overrides that are no longer needed.

Follow up to [50154].

Props poena, sabernhardt, ryelle.
Fixes #52257.

Location:

trunk/src/wp-content/themes/twentytwentyone

Files:

• assets/css/ie-editor.css (modified) (2 diffs)
• assets/css/ie.css (modified) (2 diffs)
• assets/css/style-dark-mode-rtl.css (modified) (1 diff)
• assets/css/style-dark-mode.css (modified) (1 diff)
• assets/css/style-editor.css (modified) (2 diffs)
• assets/sass/04-elements/links.scss (modified) (2 diffs)
• assets/sass/style-dark-mode.scss (modified) (1 diff)
• style-rtl.css (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -352 +352 @@
 
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
-    color: #d1e4dd;
+    background: #000;
+    color: #fff;
+    text-decoration: none;
 }
 
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-    color: #d1e4dd;
+    color: #fff;
 }
 
@@ -380 +382 @@
 }
 
-.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
     background: none;
 }

trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -2193 +2193 @@
 
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
-    color: #d1e4dd;
+    background: #000;
+    color: #fff;
+    text-decoration: none;
 }
 
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-    color: #d1e4dd;
+    color: #fff;
 }
 
@@ -2221 +2223 @@
 }
 
-.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
     background: none;
 }

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

@@ -16 +16 @@
         --table--stripes-border-color: rgba(240, 240, 240, 0.15);
         --table--stripes-background-color: rgba(240, 240, 240, 0.15);
-    }
-
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-        background: #000;
-        color: #fff;
-        text-decoration: none;
-    }
-
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus,
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav.custom-logo-link:focus {
-        background: none;
     }
 

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

@@ -16 +16 @@
         --table--stripes-border-color: rgba(240, 240, 240, 0.15);
         --table--stripes-background-color: rgba(240, 240, 240, 0.15);
-    }
-
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-        background: #000;
-        color: #fff;
-        text-decoration: none;
-    }
-
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus,
-    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav.custom-logo-link:focus {
-        background: none;
     }
 

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

@@ -489 +489 @@
 }
 
-.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
+.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
+    background: var(--global--color-black);
+    color: var(--global--color-white);
+    text-decoration: none;
+}
+
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-    color: var(--wp--style--color--link, var(--global--color-background));
+    color: var(--wp--style--color--link, var(--global--color-white));
 }
 
@@ -515 +520 @@
 }
 
-.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
     background: none;
 }

trunk/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss

@@ -26 +26 @@
 
     // Change text color when the body background is dark.
-    .is-dark-theme &,
-    .is-dark-theme & .meta-nav {
-        color: var(--wp--style--color--link, var(--global--color-background));
+    .is-dark-theme & {
+        background: var(--global--color-black);
+        color: var(--global--color-white);
+        text-decoration: none;
+
+        .meta-nav {
+            color: var(--wp--style--color--link, var(--global--color-white));
+        }
     }
 
@@ -54 +59 @@
 
     &.custom-logo-link {
-
-        &:focus {
-            background: none;
-        }
+        background: none;
     }
 

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);
-
-        .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
-        .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-            background: #000;
-            color: #fff;
-            text-decoration: none;
-
-            &.custom-logo-link {
-
-                &:focus {
-                    background: none;
-                }
-            }
-        }
 
         img {

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

@@ -1661 +1661 @@
 }
 
-.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
+.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
+    background: var(--global--color-black);
+    color: var(--global--color-white);
+    text-decoration: none;
+}
+
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-    color: var(--wp--style--color--link, var(--global--color-background));
+    color: var(--wp--style--color--link, var(--global--color-white));
 }
 
@@ -1687 +1692 @@
 }
 
-.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
     background: none;
 }

trunk/src/wp-content/themes/twentytwentyone/style.css

@@ -1671 +1671 @@
 }
 
-.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
+.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
+    background: var(--global--color-black);
+    color: var(--global--color-white);
+    text-decoration: none;
+}
+
 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
-    color: var(--wp--style--color--link, var(--global--color-background));
+    color: var(--wp--style--color--link, var(--global--color-white));
 }
 
@@ -1697 +1702 @@
 }
 
-.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
+.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
     background: none;
 }