diff -r 34716fd837a4 -r be944660c56a wp/wp-admin/css/admin-menu.css --- a/wp/wp-admin/css/admin-menu.css Tue Dec 15 15:52:01 2020 +0100 +++ b/wp/wp-admin/css/admin-menu.css Wed Sep 21 18:19:35 2022 +0200 @@ -3,7 +3,7 @@ #adminmenu, #adminmenu .wp-submenu { width: 160px; - background-color: #23282d; + background-color: #1d2327; } #adminmenuback { @@ -47,9 +47,9 @@ /* New Menu icons */ .icon16:before { - color: #82878c; /* same as new icons */ + color: #8c8f94; /* same as new icons */ font: normal 20px/1 dashicons; - speak: none; + speak: never; padding: 6px 0; height: 34px; width: 20px; @@ -155,8 +155,6 @@ /* side admin menu */ #adminmenu * { -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -170,12 +168,12 @@ display: block; line-height: 1.3; padding: 2px 5px; - color: #eee; + color: #f0f0f1; } #adminmenu .wp-submenu a { - color: #b4b9be; - color: rgba(240, 245, 250, 0.7); + color: #c3c4c7; + color: rgba(240, 246, 252, 0.7); font-size: 13px; line-height: 1.4; margin: 0; @@ -191,7 +189,14 @@ #adminmenu li.menu-top > a:focus, #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus { - color: #00b9eb; + color: #72aee6; +} + +#adminmenu a:hover, +#adminmenu a:focus, +.folded #adminmenu .wp-submenu-head:hover { + box-shadow: inset 4px 0 0 0 currentColor; + transition: box-shadow .1s linear; } #adminmenu li.menu-top { @@ -207,14 +212,9 @@ left: 160px; overflow: visible; word-wrap: break-word; -} - -#adminmenu .wp-submenu, -.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { padding: 7px 0 8px; z-index: 9999; - background-color: #32373c; + background-color: #2c3338; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } @@ -225,9 +225,12 @@ top: -1px; } +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + top: 0; +} + #adminmenu .wp-has-current-submenu .wp-submenu, .no-js li.wp-has-current-submenu:hover .wp-submenu, -#adminmenu a.wp-has-current-submenu:focus + .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, #adminmenu .wp-has-current-submenu.opensub .wp-submenu { position: relative; @@ -239,7 +242,10 @@ border: 0 none; margin-top: 0; box-shadow: none; - background-color: #32373c; +} + +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ @@ -247,8 +253,8 @@ #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus { position: relative; - background-color: #191e23; - color: #00b9eb; + background-color: #1d2327; + color: #72aee6; } .folded #adminmenu li.menu-top:hover, @@ -259,12 +265,10 @@ #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, -.folded #adminmenu li.wp-has-current-submenu, -.folded #adminmenu li.current.menu-top, #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow div { - background: #0073aa; + background: #2271b1; color: #fff; } @@ -289,6 +293,7 @@ .folded #adminmenu .wp-has-current-submenu .wp-submenu { min-width: 160px; width: auto; + border-left: 5px solid transparent; } #adminmenu .wp-submenu li.current, @@ -346,7 +351,13 @@ } #adminmenu div.wp-menu-name { - padding: 8px 0; + padding: 8px 8px 8px 36px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; } #adminmenu div.wp-menu-image { @@ -364,15 +375,15 @@ } div.wp-menu-image:before { - color: #a0a5aa; - color: rgba(240, 245, 250, 0.6); + color: #a7aaad; + color: rgba(240, 246, 252, 0.6); padding: 7px 0; transition: all .1s ease-in-out; } #adminmenu div.wp-menu-image:before { - color: #a0a5aa; - color: rgba(240, 245, 250, 0.6); + color: #a7aaad; + color: rgba(240, 246, 252, 0.6); } #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, @@ -388,7 +399,7 @@ #adminmenu li:hover div.wp-menu-image:before, #adminmenu li a:focus div.wp-menu-image:before, #adminmenu li.opensub div.wp-menu-image:before { - color: #00b9eb; + color: #72aee6; } .folded #adminmenu div.wp-menu-image { @@ -426,12 +437,13 @@ width: 0; position: absolute; pointer-events: none; - border-right-color: #f1f1f1; + border-right-color: #f0f0f1; top: 50%; margin-top: -8px; } -.folded ul#adminmenu li:hover a.wp-has-current-submenu:after { +.folded ul#adminmenu li:hover a.wp-has-current-submenu:after, +.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after { display: none; } @@ -442,27 +454,29 @@ } /* flyout menu arrow */ -#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { +#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { right: 0; - border: solid transparent; + border: 8px solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; - border-width: 8px; top: 10px; z-index: 10000; } -.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-width: 4px; margin-top: -4px; top: 18px; } -#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { - border-right-color: #32373c; +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { + border-right-color: #2c3338; } #adminmenu li.menu-top:hover .wp-menu-image img, @@ -488,8 +502,11 @@ color: #fff; font-weight: 400; font-size: 14px; - padding: 8px 4px 8px 11px; - margin: -7px 0px 4px; + padding: 5px 4px 5px 11px; + margin: -7px 0px 4px -5px; + border-width: 3px 0 3px 5px; + border-style: solid; + border-color: transparent; } #adminmenu li.current, @@ -508,7 +525,7 @@ min-width: 18px; height: 18px; border-radius: 9px; - background-color: #ca4a1f; + background-color: #d63638; color: #fff; font-size: 11px; line-height: 1.6; @@ -518,7 +535,7 @@ #adminmenu li.current a .awaiting-mod, #adminmenu li a.wp-has-current-submenu .update-plugins { - background-color: #ca4a1f; + background-color: #d63638; color: #fff; } @@ -536,16 +553,16 @@ position: relative; overflow: visible; background: none; - color: #aaa; + color: #a7aaad; cursor: pointer; } #collapse-button:hover { - color: #00b9eb; + color: #72aee6; } #collapse-button:focus { - color: #00b9eb; + color: #72aee6; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; outline-offset: -1px; @@ -584,7 +601,7 @@ top: 7px; text-align: center; font: normal 20px/1 dashicons !important; - speak: none; + speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -682,7 +699,7 @@ } .auto-fold #adminmenu a.menu-top { - height: 34px; + min-height: 34px; } .auto-fold #adminmenu li.wp-menu-open { @@ -693,11 +710,13 @@ margin-bottom: 0; } - .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { display: none; } - .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-width: 4px; margin-top: -4px; top: 16px; @@ -783,7 +802,6 @@ /* Restore the menu names */ .auto-fold #adminmenu .wp-menu-name { position: static; - margin-left: 35px; } /* Switch the arrow side */ @@ -793,7 +811,8 @@ margin-top: -8px; } - .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { display: none; } @@ -825,7 +844,8 @@ display: block; } - .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { display: block; } @@ -837,6 +857,11 @@ top: 0; } + #adminmenu .wp-not-current-submenu .wp-submenu, + .folded #adminmenu .wp-has-current-submenu .wp-submenu { + border-left: none; + } + /* Remove submenu headers and adjust sub meu*/ #adminmenu .wp-submenu .wp-submenu-head { display: none; @@ -866,7 +891,7 @@ } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { - background: #32373c; + background: #2c3338; } li#wp-admin-bar-menu-toggle { @@ -897,7 +922,7 @@ } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { - color: #00b9eb; + color: #72aee6; } }