WordPress.org
Get WordPress

Make WordPress Core

Changeset 50154


Ignore:
Timestamp:
02/02/2021 06:27:20 PM (4 years ago)
Author:
antpb
Message:

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.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
10 edited

Legend:

Unmodified
Added
Removed

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

    r49987 r50154  
    378378    color: #21759b;
    379379    background-color: #f1f1f1;
     380}
     381
     382.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     383    background: none;
    380384}
    381385

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

    r50026 r50154  
    22192219}
    22202220
     2221.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     2222    background: none;
     2223}
     2224
    22212225.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    22222226    outline: 2px dotted #28303d;
    … …  
    54015405    font-size: 1.125rem;
    54025406    line-height: 1.4;
    5403 }
    5404 
    5405 a.custom-logo-link {
    5406     text-decoration: none;
    5407 }
    5408 
    5409 .has-background-white a.custom-logo-link:focus,
    5410 .is-dark-theme a.custom-logo-link:focus {
    5411     background: none;
    54125407}
    54135408

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

    r49864 r50154  
    2323        color: #fff;
    2424        text-decoration: none;
     25    }
     26
     27    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus,
     28    .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 {
     29        background: none;
    2530    }
    2631

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

    r49864 r50154  
    2323        color: #fff;
    2424        text-decoration: none;
     25    }
     26
     27    .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus,
     28    .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 {
     29        background: none;
    2530    }
    2631

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

    r49987 r50154  
    515515}
    516516
     517.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     518    background: none;
     519}
     520
    517521.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    518522    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));

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

    r49726 r50154  
    5353    }
    5454
     55    &.custom-logo-link {
     56
     57        &:focus {
     58            background: none;
     59        }
     60    }
     61
    5562    img {
    5663        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss

    r49726 r50154  
    7676    font-size: var(--branding--description--font-size);
    7777    line-height: 1.4;
    78 }
    79 
    80 a.custom-logo-link {
    81     text-decoration: none;
    82 
    83     &:focus {
    84         // Change colors when the body background is white.
    85         .has-background-white &,
    86         .is-dark-theme & {
    87             background: none;
    88         }
    89     }
    9078}
    9179

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

    r49864 r50154  
    2222            color: #fff;
    2323            text-decoration: none;
     24
     25            &.custom-logo-link {
     26
     27                &:focus {
     28                    background: none;
     29                }
     30            }
    2431        }
    2532

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

    r50026 r50154  
    16871687}
    16881688
     1689.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     1690    background: none;
     1691}
     1692
    16891693.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    16901694    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
    … …  
    38063810    font-size: var(--branding--description--font-size);
    38073811    line-height: 1.4;
    3808 }
    3809 
    3810 a.custom-logo-link {
    3811     text-decoration: none;
    3812 }
    3813 
    3814 .has-background-white a.custom-logo-link:focus,
    3815 .is-dark-theme a.custom-logo-link:focus {
    3816     background: none;
    38173812}
    38183813

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

    r50026 r50154  
    16971697}
    16981698
     1699.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     1700    background: none;
     1701}
     1702
    16991703.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    17001704    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
    … …  
    38263830    font-size: var(--branding--description--font-size);
    38273831    line-height: 1.4;
    3828 }
    3829 
    3830 a.custom-logo-link {
    3831     text-decoration: none;
    3832 }
    3833 
    3834 .has-background-white a.custom-logo-link:focus,
    3835 .is-dark-theme a.custom-logo-link:focus {
    3836     background: none;
    38373832}
    38383833
Note: See TracChangeset for help on using the changeset viewer.