Opened 4 years ago
Closed 4 years ago
#52257 closed defect (bug) (fixed)
Twenty Twenty-One: Transparent png logo isn’t visible on focus
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 5.7 | Priority: | normal |
Severity: | normal | Version: | 5.6 |
Component: | Bundled Theme | Keywords: | has-patch commit |
Focuses: | css | Cc: |
Attachments (5)
Change History (23)
#2
@
4 years ago
- Focuses css added
- Keywords has-patch needs-testing added
- Milestone changed from Awaiting Review to 5.7
- Version set to 5.6
This patch removes custom-logo-link styles from sass/06-components/header.scss.
(This also makes sense because the logo is available both in the site header and site footer.)
It adds background:none
to the custom-logo-link when it is focused, both in the default color scheme and in dark mode.
I am not happy with the duplication in assets\sass\style-dark-mode.scss
where the focus style is added both to regular links and .meta-nav, this could be improved.
.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; } } }
#3
@
4 years ago
Testing with a local site using Twenty Twenty One.
Made a transparent logo.
Uploaded it to the customizer.
On frontend: went to another page clicked the logo and noticed a white bar similar to what is reported.
Testing patch:
npm run grunt patch:52257
The patch works fine. I see no additional background white color show up.
This ticket was mentioned in Slack in #core by paaljoachim. View the logs.
4 years ago
#5
@
4 years ago
- Keywords commit added; needs-testing removed
In talking with @poena, this patch is ready for commit
for 5.7 Beta 1. The duplication points can be addressed during the beta cycle.
This ticket was mentioned in Slack in #core-themes by hellofromtonya. View the logs.
4 years ago
#7
@
4 years ago
- Owner set to antpb
- Resolution set to fixed
- Status changed from new to closed
In 50154:
#8
@
4 years ago
- Keywords commit removed
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening to address the duplication concern from comment:2.
#9
@
4 years ago
@poena Is this something that you're likely able to address in the next week before RC1 is scheduled for release?
This ticket was mentioned in Slack in #core-css by paaljoachim. View the logs.
4 years ago
@
4 years ago
setting only the text color for .meta-nav
elements within links (plus the .custom-logo-link
change)
#12
@
4 years ago
@poena Is one of these options like how you wanted to simplify the focus styles?
52257.1.diff removes the .meta-nav.custom-logo-link
style and the second :focus
pseudo-class on the logo link.
.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link
52257.2.diff also sets the .meta-nav
text color only, without the background and text-decoration styles given to the link elements. The white color needs to override the post navigation links' color var(--wp--style--color--link, var(--global--color-background))
.
.is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: #fff; }
#14
@
4 years ago
I have another cleanup suggestion — 52257.diff moves the dark mode overrides out of style-dark-mode.scss
and merges them with the dark mode styles in links.scss
.
This removes the dark mode's .custom-logo-link
override, because it's not necessary anymore - the dark mode focus style specificity is lower now, so it's not overriding the default background:none;
.
I also replaced var(--global--color-background)
with var(--global--color-white)
in the dark mode meta-nav link styles, since this was just being overridden with white later.
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
4 years ago
#16
@
4 years ago
- Summary changed from Twenty Twenty-One:Transparent png logo isn’t visible on focus to Twenty Twenty-One: Transparent png logo isn’t visible on focus
Remove background color when the custom logo link is in focus.