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.


Built from https://develop.svn.wordpress.org/trunk@50423


git-svn-id: http://core.svn.wordpress.org/trunk@50034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Adam Silverstein 2021-02-23 20:17:04 +00:00
parent 9a4cbd05e8
commit 3e6928a370
10 changed files with 44 additions and 61 deletions

View File

@ -351,11 +351,13 @@ a:hover {
}
.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;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
@ -379,7 +381,7 @@ a:hover {
background-color: #f1f1f1;
}
.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;
}

View File

@ -2192,11 +2192,13 @@ a:hover {
}
.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;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
@ -2220,7 +2222,7 @@ a:hover {
background-color: #f1f1f1;
}
.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;
}

View File

@ -17,18 +17,6 @@
--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;
}
.is-dark-theme.is-dark-theme img {
filter: brightness(0.85) contrast(1.1);
}

View File

@ -17,18 +17,6 @@
--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;
}
.is-dark-theme.is-dark-theme img {
filter: brightness(0.85) contrast(1.1);
}

View File

@ -488,9 +488,14 @@ a:hover {
background: rgba(255, 255, 255, 0.9);
}
.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));
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
@ -514,7 +519,7 @@ a:hover {
background-color: #f1f1f1;
}
.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;
}

View File

@ -25,9 +25,14 @@ a:hover {
background: rgba(255, 255, 255, .9);
// 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));
}
}
// Change colors when the body background is white.
@ -53,10 +58,7 @@ a:hover {
}
&.custom-logo-link {
&:focus {
background: none;
}
background: none;
}
img {

View File

@ -16,20 +16,6 @@
--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 {
filter: brightness(.85) contrast(1.1);
}

View File

@ -1660,9 +1660,14 @@ a:hover {
background: rgba(255, 255, 255, 0.9);
}
.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));
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
@ -1686,7 +1691,7 @@ a:hover {
background-color: #f1f1f1;
}
.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;
}

View File

@ -1670,9 +1670,14 @@ a:hover {
background: rgba(255, 255, 255, 0.9);
}
.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));
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
@ -1696,7 +1701,7 @@ a:hover {
background-color: #f1f1f1;
}
.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;
}

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.7-beta3-50422';
$wp_version = '5.7-beta3-50423';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.