WordPress.org
Get WordPress

Make WordPress Core

Changeset 50423


Ignore:
Timestamp:
02/23/2021 08:15:02 PM (4 years ago)
Author:
adamsilverstein
Message:

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.

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

Legend:

Unmodified
Added
Removed

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

    r50351 r50423  
    352352
    353353.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    354     color: #d1e4dd;
     354    background: #000;
     355    color: #fff;
     356    text-decoration: none;
    355357}
    356358
    357359.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    358     color: #d1e4dd;
     360    color: #fff;
    359361}
    360362
    … …  
    380382}
    381383
    382 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     384.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
    383385    background: none;
    384386}

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

    r50364 r50423  
    21932193
    21942194.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    2195     color: #d1e4dd;
     2195    background: #000;
     2196    color: #fff;
     2197    text-decoration: none;
    21962198}
    21972199
    21982200.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    2199     color: #d1e4dd;
     2201    color: #fff;
    22002202}
    22012203
    … …  
    22212223}
    22222224
    2223 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     2225.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
    22242226    background: none;
    22252227}

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

    r50154 r50423  
    1616        --table--stripes-border-color: rgba(240, 240, 240, 0.15);
    1717        --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    18     }
    19 
    20     .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
    21     .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    22         background: #000;
    23         color: #fff;
    24         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;
    3018    }
    3119

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

    r50154 r50423  
    1616        --table--stripes-border-color: rgba(240, 240, 240, 0.15);
    1717        --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    18     }
    19 
    20     .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
    21     .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    22         background: #000;
    23         color: #fff;
    24         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;
    3018    }
    3119

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

    r50388 r50423  
    489489}
    490490
    491 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     491.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
     492    background: var(--global--color-black);
     493    color: var(--global--color-white);
     494    text-decoration: none;
     495}
     496
    492497.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    493     color: var(--wp--style--color--link, var(--global--color-background));
     498    color: var(--wp--style--color--link, var(--global--color-white));
    494499}
    495500
    … …  
    515520}
    516521
    517 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     522.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
    518523    background: none;
    519524}

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

    r50154 r50423  
    2626
    2727    // Change text color when the body background is dark.
    28     .is-dark-theme &,
    29     .is-dark-theme & .meta-nav {
    30         color: var(--wp--style--color--link, var(--global--color-background));
     28    .is-dark-theme & {
     29        background: var(--global--color-black);
     30        color: var(--global--color-white);
     31        text-decoration: none;
     32
     33        .meta-nav {
     34            color: var(--wp--style--color--link, var(--global--color-white));
     35        }
    3136    }
    3237
    … …  
    5459
    5560    &.custom-logo-link {
    56 
    57         &:focus {
    58             background: none;
    59         }
     61        background: none;
    6062    }
    6163

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

    r50154 r50423  
    1616        --table--stripes-border-color: rgba(240, 240, 240, 0.15);
    1717        --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    18 
    19         .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
    20         .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    21             background: #000;
    22             color: #fff;
    23             text-decoration: none;
    24 
    25             &.custom-logo-link {
    26 
    27                 &:focus {
    28                     background: none;
    29                 }
    30             }
    31         }
    3218
    3319        img {

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

    r50388 r50423  
    16611661}
    16621662
    1663 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     1663.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
     1664    background: var(--global--color-black);
     1665    color: var(--global--color-white);
     1666    text-decoration: none;
     1667}
     1668
    16641669.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    1665     color: var(--wp--style--color--link, var(--global--color-background));
     1670    color: var(--wp--style--color--link, var(--global--color-white));
    16661671}
    16671672
    … …  
    16871692}
    16881693
    1689 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     1694.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
    16901695    background: none;
    16911696}

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

    r50388 r50423  
    16711671}
    16721672
    1673 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     1673.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
     1674    background: var(--global--color-black);
     1675    color: var(--global--color-white);
     1676    text-decoration: none;
     1677}
     1678
    16741679.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    1675     color: var(--wp--style--color--link, var(--global--color-background));
     1680    color: var(--wp--style--color--link, var(--global--color-white));
    16761681}
    16771682
    … …  
    16971702}
    16981703
    1699 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link:focus {
     1704.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link {
    17001705    background: none;
    17011706}
Note: See TracChangeset for help on using the changeset viewer.