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) { .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 { .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) { .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; 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; 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) { .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 { .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) { .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; 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; background: none;
} }

View File

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

View File

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

View File

@ -488,9 +488,14 @@ a:hover {
background: rgba(255, 255, 255, 0.9); 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 { .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) { .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; 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; background: none;
} }

View File

@ -25,9 +25,14 @@ a:hover {
background: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .9);
// Change text color when the body background is dark. // Change text color when the body background is dark.
.is-dark-theme &, .is-dark-theme & {
.is-dark-theme & .meta-nav { background: var(--global--color-black);
color: var(--wp--style--color--link, var(--global--color-background)); 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. // Change colors when the body background is white.
@ -53,11 +58,8 @@ a:hover {
} }
&.custom-logo-link { &.custom-logo-link {
&:focus {
background: none; background: none;
} }
}
img { img {
outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));

View File

@ -16,20 +16,6 @@
--table--stripes-border-color: rgba(240, 240, 240, 0.15); --table--stripes-border-color: rgba(240, 240, 240, 0.15);
--table--stripes-background-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 { img {
filter: brightness(.85) contrast(1.1); filter: brightness(.85) contrast(1.1);
} }

View File

@ -1660,9 +1660,14 @@ a:hover {
background: rgba(255, 255, 255, 0.9); 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 { .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) { .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; 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; background: none;
} }

View File

@ -1670,9 +1670,14 @@ a:hover {
background: rgba(255, 255, 255, 0.9); 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 { .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) { .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; 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; background: none;
} }

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.