From ec10ecbebfca232e487046a289a697250b42de42 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Tue, 26 Nov 2013 17:18:00 +0000 Subject: [PATCH] Improvements to hover and focus states on the adminbar: * Add a clear hover state for top-level links in the adminbar. * Add :focus styles to the adminbar for keyboard accessibility. * Ensure that the username link in the profile submenu gets a :hover style. * Add adminbar hover styles to color schemes. * Set -webkit-font-smoothing to subpixel-antialiased on the adminbar so that Safari doesn't switch to standard antialiasing on mouseover. Fixes #26152, props ryelle. git-svn-id: https://develop.svn.wordpress.org/trunk@26407 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/color-schemes/_admin.scss | 35 ++++++++++++++++------ src/wp-includes/css/admin-bar.css | 34 +++++++++++---------- 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/src/wp-admin/css/color-schemes/_admin.scss b/src/wp-admin/css/color-schemes/_admin.scss index 35ab3bface..c5b766e6c1 100644 --- a/src/wp-admin/css/color-schemes/_admin.scss +++ b/src/wp-admin/css/color-schemes/_admin.scss @@ -253,9 +253,8 @@ ul#adminmenu > li.current > a.current:after { #wpadminbar .ab-item, #wpadminbar a.ab-item, -#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label, -#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label, -#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon { +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { color: $menu-text; } @@ -267,16 +266,20 @@ ul#adminmenu > li.current > a.current:after { #wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item, -#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label, -#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item, #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { - color: $menu-highlight-text; + color: $menu-submenu-focus-text; background: $menu-submenu-background; } +#wpadminbar > #wp-toolbar li:hover span.ab-label, +#wpadminbar > #wp-toolbar li.hover span.ab-label, +#wpadminbar > #wp-toolbar a:focus span.ab-label { + color: $menu-submenu-focus-text; +} + #wpadminbar li:hover .ab-icon:before, #wpadminbar li:hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before { @@ -307,10 +310,20 @@ ul#adminmenu > li.current > a.current:after { } #wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, +#wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, #wpadminbar .quicklinks .menupop.hover ul li a:hover, -#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover > a, -#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover > a, -#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover { +#wpadminbar .quicklinks .menupop.hover ul li a:focus, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, +#wpadminbar li:hover .ab-icon:before, +#wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, +#wpadminbar li:hover #adminbarsearch:before { color: $menu-submenu-focus-text; } @@ -348,6 +361,10 @@ ul#adminmenu > li.current > a.current:after { color: $menu-text; } +#wpadminbar #wp-admin-bar-user-info a:hover .display-name { + color: $menu-submenu-focus-text; +} + #wpadminbar #wp-admin-bar-user-info .username { color: $menu-submenu-text; } diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index ab2f6d4a6a..828bf07045 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -7,7 +7,6 @@ text-transform: none; letter-spacing: normal; font: normal 13px/32px "Open Sans", sans-serif; - color: #eee; border-radius: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; @@ -16,12 +15,12 @@ -moz-transition: none; -o-transition: none; transition: none; + -webkit-font-smoothing: subpixel-antialiased; /* Prevent Safari from switching to standard antialiasing on hover */ } #wpadminbar a.ab-item, -#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label, -#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label, -#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon { +#wpadminbar > #wp-toolbar span.ab-label, +#wpadminbar > #wp-toolbar span.noticon { color: #eee; } @@ -196,16 +195,17 @@ right: 100%; } -#wpadminbar .ab-top-menu > li:hover > .ab-item, -#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, -#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus { - color: #fff; +#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, +#wpadminbar .ab-top-menu > li:hover > .ab-item, +#wpadminbar .ab-top-menu > li.hover > .ab-item { + background: #333; + color: #2ea2cc; } -#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, -#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { - background: #333; +#wpadminbar > #wp-toolbar li:hover span.ab-label, +#wpadminbar > #wp-toolbar li.hover span.ab-label, +#wpadminbar > #wp-toolbar a:focus span.ab-label { color: #2ea2cc; } @@ -250,11 +250,19 @@ } #wpadminbar .quicklinks .menupop ul li a:hover, +#wpadminbar .quicklinks .menupop ul li a:focus, #wpadminbar .quicklinks .menupop ul li a:hover strong, +#wpadminbar .quicklinks .menupop ul li a:focus strong, #wpadminbar .quicklinks .menupop.hover ul li a:hover, +#wpadminbar .quicklinks .menupop.hover ul li a:focus, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, +#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, #wpadminbar li:hover .ab-icon:before, #wpadminbar li:hover .ab-item:before, +#wpadminbar li a:focus .ab-icon:before, +#wpadminbar li .ab-item:focus:before, +#wpadminbar li.hover .ab-icon:before, +#wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before { color: #2ea2cc; } @@ -387,10 +395,6 @@ display: block; } -#wpadminbar #wp-admin-bar-user-info .display-name { - color: #fff; -} - #wpadminbar #wp-admin-bar-user-info .username { color: #999; font-size: 11px;