4 #adminmenu .wp-submenu {
6 background-color: #23282d;
13 z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */
23 .folded #adminmenuback,
24 .folded #adminmenuwrap,
26 .folded #adminmenu li.menu-top {
34 margin: -6px -8px 0 0;
42 font: normal 20px/1 'dashicons';
47 display: inline-block;
48 -webkit-font-smoothing: antialiased;
49 -moz-osx-font-smoothing: grayscale;
50 -webkit-transition: all .1s ease-in-out;
51 transition: all .1s ease-in-out;
54 .icon16.icon-dashboard:before {
58 .icon16.icon-post:before {
62 .icon16.icon-media:before {
66 .icon16.icon-links:before {
70 .icon16.icon-page:before {
74 .icon16.icon-comments:before {
79 .icon16.icon-appearance:before {
83 .icon16.icon-plugins:before {
87 .icon16.icon-users:before {
91 .icon16.icon-tools:before {
95 .icon16.icon-settings:before {
99 .icon16.icon-site:before {
103 .icon16.icon-generic:before {
107 /* hide background-image for icons above */
108 .icon16.icon-dashboard,
109 .menu-icon-dashboard div.wp-menu-image,
111 .menu-icon-post div.wp-menu-image,
113 .menu-icon-media div.wp-menu-image,
115 .menu-icon-links div.wp-menu-image,
117 .menu-icon-page div.wp-menu-image,
118 .icon16.icon-comments,
119 .menu-icon-comments div.wp-menu-image,
120 .icon16.icon-appearance,
121 .menu-icon-appearance div.wp-menu-image,
122 .icon16.icon-plugins,
123 .menu-icon-plugins div.wp-menu-image,
125 .menu-icon-users div.wp-menu-image,
127 .menu-icon-tools div.wp-menu-image,
128 .icon16.icon-settings,
129 .menu-icon-settings div.wp-menu-image,
131 .menu-icon-site div.wp-menu-image,
132 .icon16.icon-generic,
133 .menu-icon-generic div.wp-menu-image {
134 background-image: none !important;
137 /*------------------------------------------------------------------------------
138 7.0 - Main Navigation (Left Menu)
139 ------------------------------------------------------------------------------*/
147 /* side admin menu */
149 -webkit-user-select: none;
150 -moz-user-select: none;
151 -ms-user-select: none;
168 #adminmenu .wp-submenu a {
170 color: rgba(240,245,250,0.7);
173 #adminmenu .wp-submenu a:hover,
174 #adminmenu .wp-submenu a:focus {
179 #adminmenu li.menu-top > a:focus,
180 #adminmenu .wp-submenu a:hover,
181 #adminmenu .wp-submenu a:focus {
185 #adminmenu li.menu-top {
191 #adminmenu .wp-submenu {
197 word-wrap: break-word;
200 #adminmenu .wp-submenu,
201 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
202 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
205 background-color: #32373c;
206 -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
207 box-shadow: 0 3px 5px rgba(0,0,0,0.2);
210 .js #adminmenu .sub-open,
211 .js #adminmenu .opensub .wp-submenu,
212 #adminmenu a.menu-top:focus + .wp-submenu,
213 .no-js li.wp-has-submenu:hover .wp-submenu {
217 #adminmenu .wp-has-current-submenu .wp-submenu,
218 .no-js li.wp-has-current-submenu:hover .wp-submenu,
219 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
220 #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
221 #adminmenu .wp-has-current-submenu.opensub .wp-submenu {
230 -webkit-box-shadow: none;
232 background-color: #32373c;
235 /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
236 #adminmenu li.menu-top:hover,
237 #adminmenu li.opensub > a.menu-top,
238 #adminmenu li > a.menu-top:focus {
240 background-color: #191e23;
244 .folded #adminmenu li.menu-top:hover,
245 .folded #adminmenu li.opensub > a.menu-top,
246 .folded #adminmenu li > a.menu-top:focus {
250 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
251 #adminmenu li.current a.menu-top,
252 .folded #adminmenu li.wp-has-current-submenu,
253 .folded #adminmenu li.current.menu-top,
254 #adminmenu .wp-menu-arrow,
255 #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
256 #adminmenu .wp-menu-arrow div {
261 .folded #adminmenu .wp-submenu.sub-open,
262 .folded #adminmenu .opensub .wp-submenu,
263 .folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
264 .folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
265 .folded #adminmenu a.menu-top:focus + .wp-submenu,
266 .folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
267 .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
272 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
273 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
278 #adminmenu .wp-not-current-submenu .wp-submenu,
279 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
284 #adminmenu .wp-submenu a {
291 #adminmenu .wp-submenu li.current,
292 #adminmenu .wp-submenu li.current a,
293 #adminmenu .opensub .wp-submenu li.current a,
294 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
295 #adminmenu .wp-submenu li.current a:hover,
296 #adminmenu .wp-submenu li.current a:focus {
300 #adminmenu .wp-not-current-submenu li > a,
301 .folded #adminmenu .wp-has-current-submenu li > a {
304 -webkit-transition: all .1s ease-in-out;
305 transition: all .1s ease-in-out;
308 #adminmenu .wp-has-current-submenu ul > li > a,
309 .folded #adminmenu li.menu-top .wp-submenu > li > a {
313 #adminmenu a.menu-top,
314 #adminmenu .wp-submenu-head {
321 #adminmenu .wp-submenu-head {
325 .folded #adminmenu .wp-menu-name {
330 .folded #adminmenu .wp-submenu-head {
334 #adminmenu .wp-submenu li {
340 #adminmenu .wp-menu-image img {
343 filter: alpha(opacity=60);
346 #adminmenu div.wp-menu-name {
350 #adminmenu div.wp-menu-image {
358 #adminmenu div.wp-menu-image.svg {
359 background-repeat: no-repeat;
360 background-position: center;
361 -webkit-background-size: 20px auto;
362 background-size: 20px auto;
365 div.wp-menu-image:before {
367 color: rgba(240,245,250,0.6);
369 -webkit-transition: all .1s ease-in-out;
370 transition: all .1s ease-in-out;
373 #adminmenu div.wp-menu-image:before {
375 color: rgba(240,245,250,0.6);
378 #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
379 #adminmenu .wp-has-current-submenu div.wp-menu-image:before,
380 #adminmenu .current div.wp-menu-image:before,
381 #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
382 #adminmenu a.current:hover div.wp-menu-image:before,
383 #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
384 #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
388 #adminmenu li:hover div.wp-menu-image:before,
389 #adminmenu li a:focus div.wp-menu-image:before,
390 #adminmenu li.opensub div.wp-menu-image:before {
394 /* IE8 doesn't redraw the pseudo elements unless you make a change to the content, this restore the initial color after hover */
395 .ie8 #adminmenu li.opensub div.wp-menu-image:before {
399 .folded #adminmenu div.wp-menu-image {
406 .folded #adminmenu a.menu-top {
410 /* No @font-face support */
411 .no-font-face #adminmenu .wp-menu-image {
415 .no-font-face #adminmenu div.wp-menu-name {
419 .no-font-face.auto-fold #adminmenu .wp-menu-name {
422 /* End no @font-face support */
424 /* Sticky admin menu */
425 .sticky-menu #adminmenuwrap {
432 display: none !important;
435 ul#adminmenu a.wp-has-current-submenu {
439 ul#adminmenu a.wp-has-current-submenu:after,
440 ul#adminmenu > li.current > a.current:after {
442 border: solid 8px transparent;
447 pointer-events: none;
448 border-left-color: #f1f1f1;
453 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
457 .folded ul#adminmenu a.wp-has-current-submenu:after,
458 .folded ul#adminmenu > li a.current:after {
463 /* flyout menu arrow */
464 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
466 border: solid transparent;
471 pointer-events: none;
477 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
483 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
484 border-left-color: #32373c;
487 #adminmenu li.menu-top:hover .wp-menu-image img,
488 #adminmenu li.wp-has-current-submenu .wp-menu-image img {
490 filter: alpha(opacity=100);
493 #adminmenu li.wp-menu-separator {
500 /* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
501 #adminmenu div.separator {
506 #adminmenu .wp-submenu .wp-submenu-head {
510 padding: 8px 11px 8px 4px;
511 margin: -7px 0px 4px;
514 #adminmenu li.current,
515 .folded #adminmenu li.wp-menu-open {
519 #adminmenu .awaiting-mod,
520 #adminmenu .update-plugins {
521 display: inline-block;
522 background-color: #d54e21;
529 -webkit-border-radius: 10px;
534 #adminmenu li .awaiting-mod span,
535 #adminmenu li span.update-plugins span {
540 #adminmenu li.current a .awaiting-mod,
541 #adminmenu li a.wp-has-current-submenu .update-plugins {
542 background-color: #00b9eb;
546 #adminmenu li span.count-0 {
555 color: rgba(240,245,250,0.6);
556 -webkit-transition: all .1s ease-in-out;
557 transition: all .1s ease-in-out;
560 #collapse-menu:hover,
561 #collapse-menu:hover #collapse-button div:after {
565 .folded #collapse-menu span {
570 #collapse-button div {
578 margin: 10px 11px 10px 8px;
580 -webkit-border-radius: 10px;
584 #wpwrap #collapse-button div {
588 #collapse-button div:after {
595 color: rgba(240,245,250,0.6);
596 font: normal 20px/1 'dashicons' !important;
599 padding: 0 !important;
603 -webkit-transition: all .1s ease-in-out;
604 transition: all .1s ease-in-out;
605 -webkit-font-smoothing: antialiased;
606 -moz-osx-font-smoothing: grayscale;
610 .folded #collapse-button div:after,
611 .rtl #collapse-button div:after {
612 -webkit-transform: rotate(180deg);
613 -ms-transform: rotate(180deg);
614 transform: rotate(180deg);
617 .rtl.folded #collapse-button div:after {
618 -webkit-transform: none;
624 * Toolbar menu toggle
626 li#wp-admin-bar-menu-toggle {
630 /* Hide-if-customize for items we can't add classes to */
631 .customize-support #menu-appearance a[href="themes.php?page=custom-header"],
632 .customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
636 /* Auto-folding of the admin menu */
637 @media only screen and (max-width: 960px) {
638 .auto-fold #wpcontent,
639 .auto-fold #wpfooter {
643 .auto-fold #adminmenuback,
644 .auto-fold #adminmenuwrap,
645 .auto-fold #adminmenu,
646 .auto-fold #adminmenu li.menu-top {
650 .auto-fold #adminmenu .wp-submenu.sub-open,
651 .auto-fold #adminmenu .opensub .wp-submenu,
652 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
653 .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
654 .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
655 .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
660 .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
661 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
669 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
674 .auto-fold #adminmenu .wp-has-current-submenu li > a {
680 .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
684 .auto-fold #adminmenu .wp-menu-name {
689 .auto-fold #adminmenu .wp-submenu-head {
693 .auto-fold #adminmenu div.wp-menu-image {
700 .auto-fold #adminmenu a.menu-top {
704 .auto-fold #adminmenu li.wp-menu-open {
708 .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
712 .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
716 .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
722 .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
723 .auto-fold ul#adminmenu > li a.current:after {
728 .auto-fold #adminmenu li.menu-top:hover,
729 .auto-fold #adminmenu li.opensub > a.menu-top,
730 .auto-fold #adminmenu li > a.menu-top:focus {
734 .auto-fold #collapse-menu span {
738 .auto-fold #collapse-button div {
743 .auto-fold #collapse-button div:after {
744 -webkit-transform: rotate(180deg);
745 -ms-transform: rotate(180deg);
746 transform: rotate(180deg);
749 .rtl.auto-fold #collapse-button div:after {
750 -webkit-transform: none;
757 @media screen and ( max-width: 782px ) {
758 .auto-fold #wpcontent {
764 .sticky-menu #adminmenuwrap {
770 /* Sidebar Adjustments */
771 .auto-fold #adminmenu,
772 .auto-fold #adminmenuback,
773 .auto-fold #adminmenuwrap {
779 .auto-fold #adminmenuback,
780 .auto-fold #adminmenuwrap {
784 .auto-fold .wp-responsive-open #adminmenuback,
785 .auto-fold .wp-responsive-open #adminmenuwrap {
789 .auto-fold #adminmenu li.menu-top {
793 /* Resize the admin menu items to a comfortable touch size */
794 .auto-fold #adminmenu li a {
799 .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
800 padding: 10px 20px 10px 10px;
803 /* Restore the menu names */
804 .auto-fold #adminmenu .wp-menu-name {
809 /* Switch the arrow side */
810 .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
811 .auto-fold ul#adminmenu > li.current > a.current:after {
816 .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
820 /* Make the submenus appear correctly when tapped. */
821 #adminmenu .wp-submenu {
826 .auto-fold #adminmenu .selected .wp-submenu,
827 .auto-fold #adminmenu .wp-menu-open .wp-submenu {
832 -webkit-box-shadow: none;
836 .auto-fold #adminmenu .selected .wp-submenu:after,
837 .auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
841 .auto-fold #adminmenu .opensub .wp-submenu {
845 .auto-fold #adminmenu .selected .wp-submenu {
849 .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
853 .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
854 .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
861 /* Remove submenu headers and adjust sub meu*/
862 #adminmenu .wp-submenu .wp-submenu-head {
866 /* Toolbar menu toggle */
867 #wp-responsive-toggle {
874 -webkit-box-sizing: border-box;
875 -moz-box-sizing: border-box;
876 box-sizing: border-box;
879 #wpadminbar #wp-admin-bar-menu-toggle a {
884 text-decoration: none;
885 border: 1px solid transparent;
891 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
895 li#wp-admin-bar-menu-toggle {
899 #wpadminbar #wp-admin-bar-menu-toggle a:hover {
900 border: 1px solid transparent;
903 #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
905 display: inline-block;
907 font: normal 40px/45px 'Dashicons';
908 vertical-align: middle;
911 -webkit-font-smoothing: antialiased;
912 -moz-osx-font-smoothing: grayscale;
918 text-decoration: none;
919 -webkit-box-sizing: border-box;
920 -moz-box-sizing: border-box;
921 box-sizing: border-box;
924 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
930 @media screen and (max-width: 600px) {
936 .wp-responsive-open #adminmenuwrap,
937 .wp-responsive-open #adminmenuback {
941 .auto-fold #adminmenu {