WordPress.org
Get WordPress

Make WordPress Core

Changeset 50154


Ignore:
Timestamp:
02/02/2021 06:27:20 PM (5 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.