4 #adminmenu .wp-submenu {
6 background-color: #222;
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 {
172 #adminmenu .wp-submenu a:hover,
173 #adminmenu .wp-submenu a:focus {
178 #adminmenu li.menu-top > a:focus,
179 #adminmenu .wp-submenu a:hover,
180 #adminmenu .wp-submenu a:focus {
184 #adminmenu li.menu-top {
190 #adminmenu .wp-submenu {
196 word-wrap: break-word;
199 #adminmenu .wp-submenu,
200 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
201 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
204 background-color: #333;
205 -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
206 box-shadow: 0 3px 5px rgba(0,0,0,0.2);
209 .js #adminmenu .sub-open,
210 .js #adminmenu .opensub .wp-submenu,
211 #adminmenu a.menu-top:focus + .wp-submenu,
212 .no-js li.wp-has-submenu:hover .wp-submenu {
216 #adminmenu .wp-has-current-submenu .wp-submenu,
217 .no-js li.wp-has-current-submenu:hover .wp-submenu,
218 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
219 #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
220 #adminmenu .wp-has-current-submenu.opensub .wp-submenu {
229 -webkit-box-shadow: none;
231 background-color: #333;
234 /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
235 #adminmenu li.menu-top:hover,
236 #adminmenu li.opensub > a.menu-top,
237 #adminmenu li > a.menu-top:focus {
239 background-color: #111;
242 .folded #adminmenu li.menu-top:hover,
243 .folded #adminmenu li.opensub > a.menu-top,
244 .folded #adminmenu li > a.menu-top:focus {
248 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
249 #adminmenu li.current a.menu-top,
250 .folded #adminmenu li.wp-has-current-submenu,
251 .folded #adminmenu li.current.menu-top,
252 #adminmenu .wp-menu-arrow,
253 #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
254 #adminmenu .wp-menu-arrow div {
259 .folded #adminmenu .wp-submenu.sub-open,
260 .folded #adminmenu .opensub .wp-submenu,
261 .folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
262 .folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
263 .folded #adminmenu a.menu-top:focus + .wp-submenu,
264 .folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
265 .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
270 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
271 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
276 #adminmenu .wp-not-current-submenu .wp-submenu,
277 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
282 #adminmenu .wp-submenu a {
289 #adminmenu .wp-submenu li.current,
290 #adminmenu .wp-submenu li.current a,
291 #adminmenu .opensub .wp-submenu li.current a,
292 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
293 #adminmenu .wp-submenu li.current a:hover,
294 #adminmenu .wp-submenu li.current a:focus {
298 #adminmenu .wp-not-current-submenu li > a,
299 .folded #adminmenu .wp-has-current-submenu li > a {
302 -webkit-transition: all .1s ease-in-out;
303 transition: all .1s ease-in-out;
306 #adminmenu .wp-has-current-submenu ul > li > a,
307 .folded #adminmenu li.menu-top .wp-submenu > li > a {
311 #adminmenu a.menu-top,
312 #adminmenu .wp-submenu-head {
319 #adminmenu .wp-submenu-head,
320 .folded #adminmenu .wp-menu-name {
324 .folded #adminmenu .wp-submenu-head {
328 #adminmenu .wp-submenu li {
334 #adminmenu .wp-menu-image img {
337 filter: alpha(opacity=60);
340 #adminmenu div.wp-menu-name {
344 #adminmenu div.wp-menu-image {
352 #adminmenu div.wp-menu-image.svg {
353 background-repeat: no-repeat;
354 background-position: center;
355 -webkit-background-size: 20px auto;
356 background-size: 20px auto;
359 div.wp-menu-image:before {
362 -webkit-transition: all .1s ease-in-out;
363 transition: all .1s ease-in-out;
366 #adminmenu div.wp-menu-image:before {
370 #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
371 #adminmenu .wp-has-current-submenu div.wp-menu-image:before,
372 #adminmenu .current div.wp-menu-image:before,
373 #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
374 #adminmenu a.current:hover div.wp-menu-image:before {
378 #adminmenu li:hover div.wp-menu-image:before {
382 .folded #adminmenu div.wp-menu-image {
389 .folded #adminmenu a.menu-top {
393 /* No @font-face support */
394 .no-font-face #adminmenu .wp-menu-image {
398 .no-font-face #adminmenu div.wp-menu-name {
402 .no-font-face.auto-fold #adminmenu .wp-menu-name {
405 /* End no @font-face support */
407 /* Sticky admin menu */
408 .sticky-menu #adminmenuwrap {
415 display: none !important;
418 ul#adminmenu a.wp-has-current-submenu {
422 ul#adminmenu a.wp-has-current-submenu:after,
423 ul#adminmenu > li.current > a.current:after {
425 border: solid 8px transparent;
430 pointer-events: none;
431 border-right-color: #f1f1f1;
436 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
440 .folded ul#adminmenu a.wp-has-current-submenu:after,
441 .folded ul#adminmenu > li a.current:after {
446 /* flyout menu arrow */
447 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
449 border: solid transparent;
454 pointer-events: none;
460 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
466 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
467 border-right-color: #333;
470 #adminmenu li.menu-top:hover .wp-menu-image img,
471 #adminmenu li.wp-has-current-submenu .wp-menu-image img {
473 filter: alpha(opacity=100);
476 #adminmenu li.wp-menu-separator {
483 /* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
484 #adminmenu div.separator {
489 #adminmenu .wp-submenu .wp-submenu-head {
493 padding: 8px 4px 8px 11px;
494 margin: -7px 0px 4px;
497 #adminmenu li.current,
498 .folded #adminmenu li.wp-menu-open {
502 #adminmenu .awaiting-mod,
503 #adminmenu .update-plugins,
504 #sidemenu li a span.update-plugins {
505 display: inline-block;
506 background-color: #d54e21;
513 -webkit-border-radius: 10px;
518 #adminmenu li .awaiting-mod span,
519 #adminmenu li span.update-plugins span,
520 #sidemenu li a span.update-plugins span {
525 #adminmenu li.current a .awaiting-mod,
526 #adminmenu li a.wp-has-current-submenu .update-plugins {
527 background-color: #45bbe6;
531 #adminmenu li span.count-0,
532 #sidemenu li a .count-0 {
541 -webkit-transition: all .1s ease-in-out;
542 transition: all .1s ease-in-out;
545 #collapse-menu:hover,
546 #collapse-menu:hover #collapse-button div:after {
550 .folded #collapse-menu span {
555 #collapse-button div {
563 margin: 10px 8px 10px 11px;
565 -webkit-border-radius: 10px;
569 #wpwrap #collapse-button div {
573 #collapse-button div:after {
580 font: normal 20px/1 'dashicons' !important;
583 padding: 0 !important;
587 -webkit-transition: all .1s ease-in-out;
588 transition: all .1s ease-in-out;
589 -webkit-font-smoothing: antialiased;
590 -moz-osx-font-smoothing: grayscale;
593 .folded #collapse-button div:after,
594 .rtl #collapse-button div:after {
595 -webkit-transform: rotate(180deg);
596 -ms-transform: rotate(180deg);
597 transform: rotate(180deg);
600 .rtl.folded #collapse-button div:after {
601 -webkit-transform: none;
607 * Toolbar menu toggle
609 li#wp-admin-bar-menu-toggle {
613 /* Hide-if-customize for items we can't add classes to */
614 .customize-support #menu-appearance a[href="themes.php?page=custom-header"],
615 .customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
619 /* Auto-folding of the admin menu */
620 @media only screen and (max-width: 960px) {
621 .auto-fold #wpcontent,
622 .auto-fold #wpfooter {
626 .auto-fold #adminmenuback,
627 .auto-fold #adminmenuwrap,
628 .auto-fold #adminmenu,
629 .auto-fold #adminmenu li.menu-top {
633 .auto-fold #adminmenu .wp-submenu.sub-open,
634 .auto-fold #adminmenu .opensub .wp-submenu,
635 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
636 .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
637 .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
638 .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
643 .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
644 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
652 .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
657 .auto-fold #adminmenu .wp-has-current-submenu li > a {
663 .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
667 .auto-fold #adminmenu .wp-menu-name {
671 .auto-fold #adminmenu .wp-submenu-head {
675 .auto-fold #adminmenu div.wp-menu-image {
682 .auto-fold #adminmenu a.menu-top {
686 .auto-fold #adminmenu li.wp-menu-open {
690 .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
694 .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
698 .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
704 .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
705 .auto-fold ul#adminmenu > li a.current:after {
710 .auto-fold #adminmenu li.menu-top:hover,
711 .auto-fold #adminmenu li.opensub > a.menu-top,
712 .auto-fold #adminmenu li > a.menu-top:focus {
716 .auto-fold #collapse-menu span {
720 .auto-fold #collapse-button div {
724 .auto-fold #collapse-button div:after {
725 -webkit-transform: rotate(180deg);
726 -ms-transform: rotate(180deg);
727 transform: rotate(180deg);
730 .rtl.auto-fold #collapse-button div:after {
731 -webkit-transform: none;
738 @media screen and ( max-width: 782px ) {
739 .auto-fold #wpcontent {
745 .sticky-menu #adminmenuwrap {
751 /* Sidebar Adjustments */
752 .auto-fold #adminmenu,
753 .auto-fold #adminmenuback,
754 .auto-fold #adminmenuwrap {
760 .auto-fold #adminmenuback,
761 .auto-fold #adminmenuwrap {
765 .auto-fold .wp-responsive-open #adminmenuback,
766 .auto-fold .wp-responsive-open #adminmenuwrap {
770 .auto-fold #adminmenu li.menu-top {
774 /* Resize the admin menu items to a comfortable touch size */
775 .auto-fold #adminmenu li a {
780 .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
781 padding: 10px 10px 10px 20px;
784 /* Restore the menu names */
785 .auto-fold #adminmenu .wp-menu-name {
790 /* Switch the arrow side */
791 .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
792 .auto-fold ul#adminmenu > li.current > a.current:after {
797 .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
801 /* Make the submenus appear correctly when tapped. */
802 #adminmenu .wp-submenu {
807 .auto-fold #adminmenu .selected .wp-submenu,
808 .auto-fold #adminmenu .wp-menu-open .wp-submenu {
813 -webkit-box-shadow: none;
817 .auto-fold #adminmenu .selected .wp-submenu:after,
818 .auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
822 .auto-fold #adminmenu .opensub .wp-submenu {
826 .auto-fold #adminmenu .selected .wp-submenu {
830 .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
834 .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
835 .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
842 /* Remove submenu headers and adjust sub meu*/
843 #adminmenu .wp-submenu .wp-submenu-head {
847 /* Toolbar menu toggle */
848 #wp-responsive-toggle {
855 -webkit-box-sizing: border-box;
856 -moz-box-sizing: border-box;
857 box-sizing: border-box;
860 #wpadminbar #wp-admin-bar-menu-toggle a {
865 text-decoration: none;
866 border: 1px solid transparent;
872 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
876 li#wp-admin-bar-menu-toggle {
880 #wpadminbar #wp-admin-bar-menu-toggle a:hover {
881 border: 1px solid transparent;
884 #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
886 display: inline-block;
888 font: normal 40px/45px 'Dashicons';
889 vertical-align: middle;
892 -webkit-font-smoothing: antialiased;
893 -moz-osx-font-smoothing: grayscale;
899 text-decoration: none;
900 -webkit-box-sizing: border-box;
901 -moz-box-sizing: border-box;
902 box-sizing: border-box;
907 @media screen and (max-width: 600px) {
913 .wp-responsive-open #adminmenuwrap,
914 .wp-responsive-open #adminmenuback {
918 .auto-fold #adminmenu {