WordPress.org
Get WordPress

Make WordPress Core

Changeset 63306 for trunk


Ignore:
Timestamp:
08/16/2026 04:10:24 PM (3 weeks ago)
Author:
joedolson
Message:

Toolbar: Revert focus and hover style changes.

Reverts the focus and hover style changes in the admin toolbar. Reverts [63190], [63009], and [63188], restoring the appearance in WordPress 7.0.

Props fushar, wildworks, ravichudasama01, afercia, joen, keoshi, cbusquets1989, annezazu.
Fixes #65849. See #65445.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/admin-menu.css

    r63009 r63306  
    801801                padding: 0;
    802802                overflow: hidden;
     803                outline: none;
    803804                text-decoration: none;
     805                border: 1px solid transparent;
    804806                background: none;
    805                 height: 46px;
    806                 box-sizing: border-box;
     807                height: 44px;
     808                margin-left: -1px;
    807809        }
    808810
    … …  
    813815        li#wp-admin-bar-menu-toggle {
    814816                display: block;
     817        }
     818
     819        #wpadminbar #wp-admin-bar-menu-toggle a:hover {
     820                border: 1px solid transparent;
    815821        }
    816822
    … …  
    819825                display: inline-block;
    820826                float: left;
    821                 font: normal 40px/46px dashicons;
     827                font: normal 40px/45px dashicons;
    822828                vertical-align: middle;
     829                outline: none;
    823830                margin: 0;
    824831                -webkit-font-smoothing: antialiased;
    825832                -moz-osx-font-smoothing: grayscale;
    826                 height: 46px;
    827                 width: 52px;
     833                height: 44px;
     834                width: 50px;
    828835                padding: 0;
    829836                border: none;

  • trunk/src/wp-admin/css/colors/_admin.scss

    r63009 r63306  
    417417}
    418418
    419 #wpadminbar > #wp-toolbar li:hover span.ab-label,
    420 #wpadminbar > #wp-toolbar li.hover span.ab-label,
    421 /* The adminbar menu may output either links or focusable div elements. */
    422 /* As such, we target the focus state without specifying the element type. */
    423 #wpadminbar > #wp-toolbar :focus span.ab-label {
     419#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
     420#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
     421#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
    424422        color: variables.$menu-submenu-focus-text;
    425423}
    … …  
    452450
    453451#wpadminbar .quicklinks li .blavatar,
    454 #wpadminbar .menupop .menupop > .ab-item:before,
    455 #wpadminbar.mobile .quicklinks .ab-icon:before,
    456 #wpadminbar.mobile .quicklinks .ab-item:before {
     452#wpadminbar .menupop .menupop > .ab-item:before {
    457453        color: variables.$menu-icon;
    458454}
    … …  
    479475}
    480476
    481 // Note that the icon of the site-name item is not wrapped within a span with class ab-icon like other items.
    482477#wpadminbar .quicklinks li a:hover .blavatar,
    483478#wpadminbar .quicklinks li a:focus .blavatar,
    … …  
    485480#wpadminbar .menupop .menupop > .ab-item:hover:before,
    486481#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
    487 #wpadminbar.mobile .quicklinks .hover .ab-item:before,
    488 #wpadminbar.mobile .quicklinks .ab-item:focus:before {
     482#wpadminbar.mobile .quicklinks .hover .ab-item:before {
    489483        color: variables.$menu-submenu-focus-text;
    490484}
     485
     486#wpadminbar.mobile .quicklinks .ab-icon:before,
     487#wpadminbar.mobile .quicklinks .ab-item:before {
     488        color: variables.$menu-icon;
     489}
     490
    491491
    492492/* Admin Bar: search */
    … …  
    532532}
    533533
     534#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
     535        color: variables.$menu-submenu-focus-text;
     536}
     537
    534538#wpadminbar #wp-admin-bar-user-info .username {
    535539        color: variables.$menu-submenu-text;
    536540}
    537541
    538 #wpadminbar #wp-admin-bar-user-info a:hover .display-name,
    539 #wpadminbar #wp-admin-bar-user-info a:focus .display-name,
    540 #wpadminbar #wp-admin-bar-user-info a:hover .username,
    541 #wpadminbar #wp-admin-bar-user-info a:focus .username {
    542         color: variables.$menu-submenu-focus-text;
    543 }
    544542
    545543/* Pointers */

  • trunk/src/wp-includes/css/admin-bar.css

    r63190 r63306  
    7878}
    7979
    80 #wpadminbar a:focus,
    81 #wpadminbar .ab-item[tabindex="0"]:focus {
    82         outline-offset: -2px;
     80#wpadminbar a:focus {
     81        outline-offset: -1px;
    8382        /* Only visible in Windows High Contrast mode */
    8483        outline: 2px solid transparent;
    85 }
    86 
    87 #wpadminbar a:hover,
    88 #wpadminbar a:focus,
    89 #wpadminbar .ab-item[tabindex="0"]:hover,
    90 #wpadminbar .ab-item[tabindex="0"]:focus {
    91         box-shadow: inset 0 -4px 0 0 currentColor;
    92         transition: box-shadow 0.1s linear;
    93 }
    94 
    95 #wpadminbar .ab-submenu a:hover,
    96 #wpadminbar .ab-submenu a:focus,
    97 #wpadminbar .ab-submenu .ab-item[tabindex="0"]:hover,
    98 #wpadminbar .ab-submenu .ab-item[tabindex="0"]:focus {
    99         box-shadow: inset 4px 0 0 0 currentColor;
    10084}
    10185
    … …  
    240224}
    241225
    242 #wpadminbar > #wp-toolbar li:hover span.ab-label,
     226#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
    243227#wpadminbar > #wp-toolbar li.hover span.ab-label,
    244 /* The adminbar menu may output either links or focusable div elements. */
    245 /* As such, we target the focus state without specifying the element type. */
    246 #wpadminbar > #wp-toolbar :focus span.ab-label {
     228#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
    247229        color: #72aee6;
    248230}
    … …  
    313295#wpadminbar li.hover .ab-item:before,
    314296#wpadminbar li:hover #adminbarsearch:before,
    315 #wpadminbar li #adminbarsearch.adminbar-focused:before,
    316 #wpadminbar.mobile .quicklinks .ab-item:focus:before {
     297#wpadminbar li #adminbarsearch.adminbar-focused:before {
    317298        color: #72aee6;
    318299}
    … …  
    399380}
    400381
     382#wpadminbar ul li:last-child,
     383#wpadminbar ul li:last-child .ab-item {
     384        box-shadow: none;
     385}
     386
    401387/**
    402388 * Recovery Mode
    … …  
    467453        position: absolute;
    468454        left: -72px;
    469         top: 0;
     455        top: 4px;
    470456        width: 64px;
    471457        height: 64px;
    … …  
    481467        background: none;
    482468        padding: 0;
    483         line-height: 1.38461538;
     469        height: 18px;
    484470}
    485471
    … …  
    490476
    491477#wpadminbar #wp-admin-bar-user-info .username {
     478        color: #a7aaad;
    492479        font-size: 11px;
    493480}
    … …  
    925912                width: 52px;
    926913                padding: 0;
     914                color: #a7aaad; /* @todo not needed? this text is hidden */
    927915                position: relative;
    928916        }
    … …  
    10441032                font-size: 16px;
    10451033                line-height: 1.5;
     1034                color: #f0f0f1;
     1035        }
     1036
     1037        #wpadminbar #wp-admin-bar-user-info a {
     1038                padding-top: 4px;
     1039        }
     1040
     1041        #wpadminbar #wp-admin-bar-user-info .username {
     1042                line-height: 0.8 !important;
     1043                margin-bottom: -2px;
    10461044        }
    10471045
Note: See TracChangeset for help on using the changeset viewer.