From 5dad6812862aee7d2e337d447274792825f4ab2a Mon Sep 17 00:00:00 2001 From: Anthony Burchell Date: Tue, 2 Feb 2021 18:27:20 +0000 Subject: [PATCH] Twenty Twenty-One: Make transparent PNG logo visible on focus. This ensures a transparent logo remains visible while focused. Props bduclos, poena, paaljoachim, hellofromTonya. Fixes #52257. git-svn-id: https://develop.svn.wordpress.org/trunk@50154 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentytwentyone/assets/css/ie-editor.css | 4 ++++ .../themes/twentytwentyone/assets/css/ie.css | 13 ++++--------- .../assets/css/style-dark-mode-rtl.css | 5 +++++ .../twentytwentyone/assets/css/style-dark-mode.css | 5 +++++ .../twentytwentyone/assets/css/style-editor.css | 4 ++++ .../assets/sass/04-elements/links.scss | 7 +++++++ .../assets/sass/06-components/header.scss | 12 ------------ .../assets/sass/style-dark-mode.scss | 7 +++++++ src/wp-content/themes/twentytwentyone/style-rtl.css | 13 ++++--------- src/wp-content/themes/twentytwentyone/style.css | 13 ++++--------- 10 files changed, 44 insertions(+), 39 deletions(-) diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 92a5a2bd01..0ab5246ccc 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -379,6 +379,10 @@ a:hover { background-color: #f1f1f1; } +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus { + background: none; +} + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted #28303d; } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css index 33946c7100..b0dcda8c94 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -2218,6 +2218,10 @@ a:hover { background-color: #f1f1f1; } +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus { + background: none; +} + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted #28303d; } @@ -5402,15 +5406,6 @@ table.wp-calendar-table caption { line-height: 1.4; } -a.custom-logo-link { - text-decoration: none; -} - -.has-background-white a.custom-logo-link:focus, -.is-dark-theme a.custom-logo-link:focus { - background: none; -} - .site-title > a { text-decoration-color: #39414d; } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css index fd9870c1ba..5d90ba1803 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css @@ -24,6 +24,11 @@ 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); } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css index 6ec1fa97e5..25464a0ee8 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css @@ -24,6 +24,11 @@ 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); } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 96082aaf43..892d47ffc6 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -514,6 +514,10 @@ a:hover { background-color: #f1f1f1; } +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus { + background: none; +} + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss index 05b93f9d93..4113e208fc 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss @@ -52,6 +52,13 @@ a:hover { } } + &.custom-logo-link { + + &:focus { + background: none; + } + } + img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss index 58dd2e6cec..557e2f5e52 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss @@ -77,18 +77,6 @@ line-height: 1.4; } -a.custom-logo-link { - text-decoration: none; - - &:focus { - // Change colors when the body background is white. - .has-background-white &, - .is-dark-theme & { - background: none; - } - } -} - .site-title > a { text-decoration-color: var(--global--color-secondary); } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss b/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss index 6cc9227a03..ea93e3efbd 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss @@ -21,6 +21,13 @@ background: #000; color: #fff; text-decoration: none; + + &.custom-logo-link { + + &:focus { + background: none; + } + } } img { diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css index 167391639d..7d34a365c4 100644 --- a/src/wp-content/themes/twentytwentyone/style-rtl.css +++ b/src/wp-content/themes/twentytwentyone/style-rtl.css @@ -1686,6 +1686,10 @@ a:hover { background-color: #f1f1f1; } +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus { + background: none; +} + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } @@ -3807,15 +3811,6 @@ table.wp-calendar-table caption { line-height: 1.4; } -a.custom-logo-link { - text-decoration: none; -} - -.has-background-white a.custom-logo-link:focus, -.is-dark-theme a.custom-logo-link:focus { - background: none; -} - .site-title > a { text-decoration-color: var(--global--color-secondary); } diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css index 815fbf7226..b74633891c 100644 --- a/src/wp-content/themes/twentytwentyone/style.css +++ b/src/wp-content/themes/twentytwentyone/style.css @@ -1696,6 +1696,10 @@ a:hover { background-color: #f1f1f1; } +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus { + background: none; +} + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } @@ -3827,15 +3831,6 @@ table.wp-calendar-table caption { line-height: 1.4; } -a.custom-logo-link { - text-decoration: none; -} - -.has-background-white a.custom-logo-link:focus, -.is-dark-theme a.custom-logo-link:focus { - background: none; -} - .site-title > a { text-decoration-color: var(--global--color-secondary); }