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 0 0 -8px;
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,
322 .folded #adminmenu .wp-menu-name {
326 .folded #adminmenu .wp-submenu-head {
330 #adminmenu .wp-submenu li {
336 #adminmenu .wp-menu-image img {
339 filter: alpha(opacity=60);
342 #adminmenu div.wp-menu-name {
346 #adminmenu div.wp-menu-image {
354 #adminmenu div.wp-menu-image.svg {
355 background-repeat: no-repeat;
356 background-position: center;
357 -webkit-background-size: 20px auto;
358 background-size: 20px auto;
361 div.wp-menu-image:before {
363 color: rgba(240,245,250,0.6);
365 -webkit-transition: all .1s ease-in-out;
366 transition: all .1s ease-in-out;
369 #adminmenu div.wp-menu-image:before {
371 color: rgba(240,245,250,0.6);
374 #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
375 #adminmenu .wp-has-current-submenu div.wp-menu-image:before,
376 #adminmenu .current div.wp-menu-image:before,
377 #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
378 #adminmenu a.current:hover div.wp-menu-image:before,
379 #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
380 #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
384 #adminmenu li:hover div.wp-menu-image:before,
385 #adminmenu li a:focus div.wp-menu-image:before,
386 #adminmenu li.opensub div.wp-menu-image:before {
390 /* IE8 doesn't redraw the pseudo elements unless you make a change to the content, this restore the initial color after hover */
391 .ie8 #adminmenu li.opensub div.wp-menu-image:before {
395 .folded #adminmenu div.wp-menu-image {
402 .folded #adminmenu a.menu-top {
406 /* No @font-face support */
407 .no-font-face #adminmenu .wp-menu-image {
411 .no-font-face #adminmenu div.wp-menu-name {
415 .no-font-face.auto-fold #adminmenu .wp-menu-name {
418 /* End no @font-face support */
420 /* Sticky admin menu */
421 .sticky-menu #adminmenuwrap {
428 display: none !important;
431 ul#adminmenu a.wp-has-current-submenu {
435 ul#adminmenu a.wp-has-current-submenu:after,
436 ul#adminmenu > li.current > a.current:after {
438 border: solid 8px transparent;
443 pointer-events: none;
444 border-right-color: #f1f1f1;
449 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
453 .folded ul#adminmenu a.wp-has-current-submenu:after,
454 .folded ul#adminmenu > li a.current:after {
459 /* flyout menu arrow */
460 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
462 border: solid transparent;
467 pointer-events: none;
473 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
479 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
480 border-right-color: #32373c;
483 #adminmenu li.menu-top:hover .wp-menu-image img,
484 #adminmenu li.wp-has-current-submenu .wp-menu-image img {
486 filter: alpha(opacity=100);
489 #adminmenu li.wp-menu-separator {
496 /* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
497 #adminmenu div.separator {
502 #adminmenu .wp-submenu .wp-submenu-head {
506 padding: 8px 4px 8px 11px;
507 margin: -7px 0px 4px;
510 #adminmenu li.current,
511 .folded #adminmenu li.wp-menu-open {
515 #adminmenu .awaiting-mod,
516 #adminmenu .update-plugins {
517 display: inline-block;
518 background-color: #d54e21;
525 -webkit-border-radius: 10px;
530 #adminmenu li .awaiting-mod span,
531 #adminmenu li span.update-plugins span {
536 #adminmenu li.current a .awaiting-mod,
537 #adminmenu li a.wp-has-current-submenu .update-plugins {
538 background-color: #00b9eb;
542 #adminmenu li span.count-0 {
551 color: rgba(240,245,250,0.6);
552 -webkit-transition: all .1s ease-in-out;
553 transition: all .1s ease-in-out;
556 #collapse-menu:hover,
557 #collapse-menu:hover #collapse-button div:after {
561 .folded #collapse-menu span {
566 #collapse-button div {
574 margin: 10px 8px 10px 11px;
576 -webkit-border-radius: 10px;
580 #wpwrap #collapse-button div {
584 #collapse-button div:after {
591 color: rgba(240,245,250,0.6);
592 font: normal 20px/1 'dashicons' !important;
595 padding: 0 !important;
599 -webkit-transition: all .1s ease-in-out;
600 transition: all .1s ease-in-out;
601 -webkit-font-smoothing: antialiased;
602 -moz-osx-font-smoothing: grayscale;
606 .folded #collapse-button div:after,
607 .rtl #collapse-button div:after {
608 -webkit-transform: rotate(180deg);
609 -ms-transform: rotate(180deg);
610 transform: rotate(180deg);
613 .rtl.folded #collapse-button div:after {
614 -webkit-transform: none;
620 * Toolbar menu toggle
622 li#wp-admin-bar-menu-toggle {
626 /* Hide-if-customize for items we can't add classes to */
627 .customize-support #menu-appearance a[href="themes.php?page=custom-header"],
628 .customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
632 /* Auto-folding of the admin menu */
633 @media only screen and (max-width: 960px) {
634 .auto-fold #wpcontent,
635 .auto-fold #wpfooter {
639 .auto-fold #adminmenuback,
640 .auto-fold #adminmenuwrap,
641 .auto-fold #adminmenu,
642 .auto-fold #adminmenu li.menu-top {
646 .auto-fold #adminmenu .wp-submenu.sub-open,
647 .auto-fold #adminmenu .opensub .wp-submenu,
648 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
649 .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
650 .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
651 .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
656 .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
657 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
665 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
670 .auto-fold #adminmenu .wp-has-current-submenu li > a {
676 .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
680 .auto-fold #adminmenu .wp-menu-name {
684 .auto-fold #adminmenu .wp-submenu-head {
688 .auto-fold #adminmenu div.wp-menu-image {
695 .auto-fold #adminmenu a.menu-top {
699 .auto-fold #adminmenu li.wp-menu-open {
703 .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
707 .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
711 .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
717 .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
718 .auto-fold ul#adminmenu > li a.current:after {
723 .auto-fold #adminmenu li.menu-top:hover,
724 .auto-fold #adminmenu li.opensub > a.menu-top,
725 .auto-fold #adminmenu li > a.menu-top:focus {
729 .auto-fold #collapse-menu span {
733 .auto-fold #collapse-button div {
738 .auto-fold #collapse-button div:after {
739 -webkit-transform: rotate(180deg);
740 -ms-transform: rotate(180deg);
741 transform: rotate(180deg);
744 .rtl.auto-fold #collapse-button div:after {
745 -webkit-transform: none;
752 @media screen and ( max-width: 782px ) {
753 .auto-fold #wpcontent {
759 .sticky-menu #adminmenuwrap {
765 /* Sidebar Adjustments */
766 .auto-fold #adminmenu,
767 .auto-fold #adminmenuback,
768 .auto-fold #adminmenuwrap {
774 .auto-fold #adminmenuback,
775 .auto-fold #adminmenuwrap {
779 .auto-fold .wp-responsive-open #adminmenuback,
780 .auto-fold .wp-responsive-open #adminmenuwrap {
784 .auto-fold #adminmenu li.menu-top {
788 /* Resize the admin menu items to a comfortable touch size */
789 .auto-fold #adminmenu li a {
794 .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
795 padding: 10px 10px 10px 20px;
798 /* Restore the menu names */
799 .auto-fold #adminmenu .wp-menu-name {
804 /* Switch the arrow side */
805 .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
806 .auto-fold ul#adminmenu > li.current > a.current:after {
811 .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
815 /* Make the submenus appear correctly when tapped. */
816 #adminmenu .wp-submenu {
821 .auto-fold #adminmenu .selected .wp-submenu,
822 .auto-fold #adminmenu .wp-menu-open .wp-submenu {
827 -webkit-box-shadow: none;
831 .auto-fold #adminmenu .selected .wp-submenu:after,
832 .auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
836 .auto-fold #adminmenu .opensub .wp-submenu {
840 .auto-fold #adminmenu .selected .wp-submenu {
844 .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
848 .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
849 .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
856 /* Remove submenu headers and adjust sub meu*/
857 #adminmenu .wp-submenu .wp-submenu-head {
861 /* Toolbar menu toggle */
862 #wp-responsive-toggle {
869 -webkit-box-sizing: border-box;
870 -moz-box-sizing: border-box;
871 box-sizing: border-box;
874 #wpadminbar #wp-admin-bar-menu-toggle a {
879 text-decoration: none;
880 border: 1px solid transparent;
886 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
890 li#wp-admin-bar-menu-toggle {
894 #wpadminbar #wp-admin-bar-menu-toggle a:hover {
895 border: 1px solid transparent;
898 #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
900 display: inline-block;
902 font: normal 40px/45px 'Dashicons';
903 vertical-align: middle;
906 -webkit-font-smoothing: antialiased;
907 -moz-osx-font-smoothing: grayscale;
913 text-decoration: none;
914 -webkit-box-sizing: border-box;
915 -moz-box-sizing: border-box;
916 box-sizing: border-box;
921 @media screen and (max-width: 600px) {
927 .wp-responsive-open #adminmenuwrap,
928 .wp-responsive-open #adminmenuback {
932 .auto-fold #adminmenu {