WordPress.org
Get WordPress

Make WordPress Core

Changeset 50423


Ignore:
Timestamp:
02/23/2021 08:15:02 PM (6 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.