wp-admin/css/admin-menu.css

   1 #adminmenuback,
   2 #adminmenuwrap,
   3 #adminmenu,
   4 #adminmenu .wp-submenu {
   5         width: 160px;
   6         background-color: #23282d;
   7 }
   8
   9 #adminmenuback {
  10         position: fixed;
  11         top: 0;
  12         bottom: -120px;
  13         z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */
  14 }
  15
  16 #adminmenu {
  17         clear: left;
  18         margin: 12px 0;
  19         padding: 0;
  20         list-style: none;
  21 }
  22
  23 .folded #adminmenuback,
  24 .folded #adminmenuwrap,
  25 .folded #adminmenu,
  26 .folded #adminmenu li.menu-top {
  27         width: 36px;
  28 }
  29
  30 .icon16 {
  31         height: 18px;
  32         width: 18px;
  33         padding: 6px 6px;
  34         margin: -6px 0 0 -8px;
  35         float: left;
  36 }
  37
  38 /* New Menu icons */
  39
  40 .icon16:before {
  41         color: #999;
  42         font: normal 20px/1 'dashicons';
  43         speak: none;
  44         padding: 6px 0;
  45         height: 34px;
  46         width: 20px;
  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;
  52 }
  53
  54 .icon16.icon-dashboard:before {
  55         content: '\f226';
  56 }
  57
  58 .icon16.icon-post:before {
  59         content: '\f109';
  60 }
  61
  62 .icon16.icon-media:before {
  63         content: '\f104';
  64 }
  65
  66 .icon16.icon-links:before {
  67         content: '\f103';
  68 }
  69
  70 .icon16.icon-page:before {
  71         content: '\f105';
  72 }
  73
  74 .icon16.icon-comments:before {
  75         content: '\f101';
  76         margin-top: 1px;
  77 }
  78
  79 .icon16.icon-appearance:before {
  80         content: '\f100';
  81 }
  82
  83 .icon16.icon-plugins:before {
  84         content: '\f106';
  85 }
  86
  87 .icon16.icon-users:before {
  88         content: '\f110';
  89 }
  90
  91 .icon16.icon-tools:before {
  92         content: '\f107';
  93 }
  94
  95 .icon16.icon-settings:before {
  96         content: '\f108';
  97 }
  98
  99 .icon16.icon-site:before {
 100         content: '\f112'
 101 }
 102
 103 .icon16.icon-generic:before {
 104         content: '\f111';
 105 }
 106
 107 /* hide background-image for icons above */
 108 .icon16.icon-dashboard,
 109 .menu-icon-dashboard div.wp-menu-image,
 110 .icon16.icon-post,
 111 .menu-icon-post div.wp-menu-image,
 112 .icon16.icon-media,
 113 .menu-icon-media div.wp-menu-image,
 114 .icon16.icon-links,
 115 .menu-icon-links div.wp-menu-image,
 116 .icon16.icon-page,
 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,
 124 .icon16.icon-users,
 125 .menu-icon-users div.wp-menu-image,
 126 .icon16.icon-tools,
 127 .menu-icon-tools div.wp-menu-image,
 128 .icon16.icon-settings,
 129 .menu-icon-settings div.wp-menu-image,
 130 .icon16.icon-site,
 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;
 135 }
 136
 137 /*------------------------------------------------------------------------------
 138   7.0 - Main Navigation (Left Menu)
 139 ------------------------------------------------------------------------------*/
 140
 141 #adminmenuwrap {
 142         position: relative;
 143         float: left;
 144         z-index: 9990;
 145 }
 146
 147 /* side admin menu */
 148 #adminmenu * {
 149         -webkit-user-select: none;
 150         -moz-user-select: none;
 151         -ms-user-select: none;
 152         user-select: none;
 153 }
 154
 155 #adminmenu li {
 156         margin: 0;
 157         padding: 0;
 158         cursor: pointer;
 159 }
 160
 161 #adminmenu a {
 162         display: block;
 163         line-height: 18px;
 164         padding: 2px 5px;
 165         color: #eee;
 166 }
 167
 168 #adminmenu .wp-submenu a {
 169         color: #b4b9be;
 170         color: rgba(240,245,250,0.7);
 171 }
 172
 173 #adminmenu .wp-submenu a:hover,
 174 #adminmenu .wp-submenu a:focus {
 175         background: none;
 176 }
 177
 178 #adminmenu a:hover,
 179 #adminmenu li.menu-top > a:focus,
 180 #adminmenu .wp-submenu a:hover,
 181 #adminmenu .wp-submenu a:focus {
 182         color: #00b9eb;
 183 }
 184
 185 #adminmenu li.menu-top {
 186         border: none;
 187         min-height: 34px;
 188         position: relative;
 189 }
 190
 191 #adminmenu .wp-submenu {
 192         list-style: none;
 193         position: absolute;
 194         top: -1000em;
 195         left: 160px;
 196         overflow: visible;
 197         word-wrap: break-word;
 198 }
 199
 200 #adminmenu .wp-submenu,
 201 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
 202 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
 203         padding: 7px 0 8px;
 204         z-index: 9999;
 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);
 208 }
 209
 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 {
 214         top: -1px;
 215 }
 216
 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 {
 222         position: relative;
 223         z-index: 3;
 224         top: auto;
 225         left: auto;
 226         right: auto;
 227         bottom: auto;
 228         border: 0 none;
 229         margin-top: 0;
 230         -webkit-box-shadow: none;
 231         box-shadow: none;
 232         background-color: #32373c;
 233 }
 234
 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 {
 239         position: relative;
 240         background-color: #191e23;
 241         color: #00b9eb;
 242 }
 243
 244 .folded #adminmenu li.menu-top:hover,
 245 .folded #adminmenu li.opensub > a.menu-top,
 246 .folded #adminmenu li > a.menu-top:focus {
 247         z-index: 10000;
 248 }
 249
 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 {
 257         background: #0073aa;
 258         color: #fff;
 259 }
 260
 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  {
 268         top: 0;
 269         left: 36px;
 270 }
 271
 272 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
 273 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
 274         position: absolute;
 275         top: -1000em;
 276 }
 277
 278 #adminmenu .wp-not-current-submenu .wp-submenu,
 279 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
 280         min-width: 160px;
 281         width: auto;
 282 }
 283
 284 #adminmenu .wp-submenu a {
 285         font-size: 13px;
 286         line-height: 1.2;
 287         margin: 0;
 288         padding: 6px 0;
 289 }
 290
 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 {
 297         color: #fff;
 298 }
 299
 300 #adminmenu .wp-not-current-submenu li > a,
 301 .folded #adminmenu .wp-has-current-submenu li > a {
 302         padding-right: 16px;
 303         padding-left: 14px;
 304         -webkit-transition: all .1s ease-in-out;
 305         transition: all .1s ease-in-out;
 306 }
 307
 308 #adminmenu .wp-has-current-submenu ul > li > a,
 309 .folded #adminmenu li.menu-top .wp-submenu > li > a {
 310         padding: 6px 12px;
 311 }
 312
 313 #adminmenu a.menu-top,
 314 #adminmenu .wp-submenu-head {
 315         font-size: 14px;
 316         font-weight: 400;
 317         line-height: 18px;
 318         padding: 0;
 319 }
 320
 321 #adminmenu .wp-submenu-head,
 322 .folded #adminmenu .wp-menu-name {
 323         display: none;
 324 }
 325
 326 .folded #adminmenu .wp-submenu-head {
 327         display: block;
 328 }
 329
 330 #adminmenu .wp-submenu li {
 331         padding: 0;
 332         margin: 0;
 333         overflow: hidden;
 334 }
 335
 336 #adminmenu .wp-menu-image img {
 337         padding: 9px 0 0 0;
 338         opacity: 0.6;
 339         filter: alpha(opacity=60);
 340 }
 341
 342 #adminmenu div.wp-menu-name {
 343         padding: 8px 0;
 344 }
 345
 346 #adminmenu div.wp-menu-image {
 347         float: left;
 348         width: 36px;
 349         height: 34px;
 350         margin: 0;
 351         text-align: center;
 352 }
 353
 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;
 359 }
 360
 361 div.wp-menu-image:before {
 362         color: #a0a5aa;
 363         color: rgba(240,245,250,0.6);
 364         padding: 7px 0;
 365         -webkit-transition: all .1s ease-in-out;
 366         transition: all .1s ease-in-out;
 367 }
 368
 369 #adminmenu div.wp-menu-image:before {
 370         color: #a0a5aa;
 371         color: rgba(240,245,250,0.6);
 372 }
 373
 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 {
 381         color: #fff;
 382 }
 383
 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 {
 387         color: #00b9eb;
 388 }
 389
 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 {
 392         color: #a0a5aa;
 393 }
 394
 395 .folded #adminmenu div.wp-menu-image {
 396         width: 35px;
 397         height: 30px;
 398         position: absolute;
 399         z-index: 25;
 400 }
 401
 402 .folded #adminmenu a.menu-top {
 403         height: 34px;
 404 }
 405
 406 /* No @font-face support */
 407 .no-font-face #adminmenu .wp-menu-image {
 408         display: none;
 409 }
 410
 411 .no-font-face #adminmenu div.wp-menu-name {
 412         padding: 8px 12px;
 413 }
 414
 415 .no-font-face.auto-fold #adminmenu .wp-menu-name {
 416         margin-left: 0;
 417 }
 418 /* End no @font-face support */
 419
 420 /* Sticky admin menu */
 421 .sticky-menu #adminmenuwrap {
 422         position: fixed;
 423 }
 424
 425 /* A new arrow */
 426
 427 .wp-menu-arrow {
 428         display: none !important;
 429 }
 430
 431 ul#adminmenu a.wp-has-current-submenu {
 432         position: relative;
 433 }
 434
 435 ul#adminmenu a.wp-has-current-submenu:after,
 436 ul#adminmenu > li.current > a.current:after {
 437         right: 0;
 438         border: solid 8px transparent;
 439         content: " ";
 440         height: 0;
 441         width: 0;
 442         position: absolute;
 443         pointer-events: none;
 444         border-right-color: #f1f1f1;
 445         top: 50%;
 446         margin-top: -8px;
 447 }
 448
 449 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
 450         display: none;
 451 }
 452
 453 .folded ul#adminmenu a.wp-has-current-submenu:after,
 454 .folded ul#adminmenu > li a.current:after {
 455         border-width: 4px;
 456         margin-top: -4px;
 457 }
 458
 459 /* flyout menu arrow */
 460 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 461         right: 0;
 462         border: solid transparent;
 463         content: " ";
 464         height: 0;
 465         width: 0;
 466         position: absolute;
 467         pointer-events: none;
 468         border-width: 8px;
 469         top: 10px;
 470         z-index: 10000;
 471 }
 472
 473 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 474         border-width: 4px;
 475         margin-top: -4px;
 476         top: 18px;
 477 }
 478
 479 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
 480         border-right-color: #32373c;
 481 }
 482
 483 #adminmenu li.menu-top:hover .wp-menu-image img,
 484 #adminmenu li.wp-has-current-submenu .wp-menu-image img {
 485         opacity: 1;
 486         filter: alpha(opacity=100);
 487 }
 488
 489 #adminmenu li.wp-menu-separator {
 490         height: 5px;
 491         padding: 0;
 492         margin: 0 0 6px 0;
 493         cursor: inherit;
 494 }
 495
 496 /* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
 497 #adminmenu div.separator {
 498         height: 2px;
 499         padding: 0;
 500 }
 501
 502 #adminmenu .wp-submenu .wp-submenu-head {
 503         color: #fff;
 504         font-weight: 400;
 505         font-size: 14px;
 506         padding: 8px 4px 8px 11px;
 507         margin: -7px 0px 4px;
 508 }
 509
 510 #adminmenu li.current,
 511 .folded #adminmenu li.wp-menu-open {
 512         border: 0 none;
 513 }
 514
 515 #adminmenu .awaiting-mod,
 516 #adminmenu .update-plugins {
 517         display: inline-block;
 518         background-color: #d54e21;
 519         color: #fff;
 520         font-size: 9px;
 521         line-height: 17px;
 522         font-weight: 600;
 523         margin: 1px 0 0 2px;
 524         vertical-align: top;
 525         -webkit-border-radius: 10px;
 526         border-radius: 10px;
 527         z-index: 26;
 528 }
 529
 530 #adminmenu li .awaiting-mod span,
 531 #adminmenu li span.update-plugins span {
 532         display: block;
 533         padding: 0 6px;
 534 }
 535
 536 #adminmenu li.current a .awaiting-mod,
 537 #adminmenu      li a.wp-has-current-submenu .update-plugins {
 538         background-color: #00b9eb;
 539         color: #fff;
 540 }
 541
 542 #adminmenu li span.count-0 {
 543         display: none;
 544 }
 545
 546 #collapse-menu {
 547         font-size: 13px;
 548         line-height: 34px;
 549         margin-top: 10px;
 550         color: #a0a5aa;
 551         color: rgba(240,245,250,0.6);
 552         -webkit-transition: all .1s ease-in-out;
 553         transition: all .1s ease-in-out;
 554 }
 555
 556 #collapse-menu:hover,
 557 #collapse-menu:hover #collapse-button div:after {
 558         color: #00b9eb;
 559 }
 560
 561 .folded #collapse-menu span {
 562         display: none;
 563 }
 564
 565 #collapse-button,
 566 #collapse-button div {
 567         width: 15px;
 568         height: 15px;
 569 }
 570
 571 #collapse-button {
 572         float: left;
 573         height: 15px;
 574         margin: 10px 8px 10px 11px;
 575         width: 15px;
 576         -webkit-border-radius: 10px;
 577         border-radius: 10px;
 578 }
 579
 580 #wpwrap #collapse-button div {
 581         padding: 0;
 582 }
 583
 584 #collapse-button div:after {
 585         content: '\f148';
 586         display: block;
 587         line-height: 15px;
 588         left: -3px;
 589         top: -3px;
 590         color: #a0a5aa;
 591         color: rgba(240,245,250,0.6);
 592         font: normal 20px/1 'dashicons' !important;
 593         speak: none;
 594         margin: 0 auto;
 595         padding: 0 !important;
 596         position: relative;
 597         text-align: center;
 598         width: 20px;
 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;
 603 }
 604
 605 /* rtl:ignore */
 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);
 611 }
 612
 613 .rtl.folded #collapse-button div:after {
 614         -webkit-transform: none;
 615         -ms-transform: none;
 616         transform: none;
 617 }
 618
 619 /**
 620  * Toolbar menu toggle
 621  */
 622 li#wp-admin-bar-menu-toggle {
 623         display: none;
 624 }
 625
 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"] {
 629         display: none;
 630 }
 631
 632 /* Auto-folding of the admin menu */
 633 @media only screen and (max-width: 960px) {
 634         .auto-fold #wpcontent,
 635         .auto-fold #wpfooter {
 636                 margin-left: 36px;
 637         }
 638
 639         .auto-fold #adminmenuback,
 640         .auto-fold #adminmenuwrap,
 641         .auto-fold #adminmenu,
 642         .auto-fold #adminmenu li.menu-top {
 643                 width: 36px;
 644         }
 645
 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  {
 652                 top: 0px;
 653                 left: 36px;
 654         }
 655
 656         .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
 657         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
 658                 position: absolute;
 659                 top: -1000em;
 660                 margin-right: -1px;
 661                 padding: 7px 0 8px;
 662                 z-index: 9999;
 663         }
 664
 665         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
 666                 min-width: 150px;
 667                 width: auto;
 668         }
 669
 670         .auto-fold #adminmenu .wp-has-current-submenu li > a {
 671                 padding-right: 16px;
 672                 padding-left: 14px;
 673         }
 674
 675
 676         .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
 677                 padding-left: 12px;
 678         }
 679
 680         .auto-fold #adminmenu .wp-menu-name {
 681                 display: none;
 682         }
 683
 684         .auto-fold #adminmenu .wp-submenu-head {
 685                 display: block;
 686         }
 687
 688         .auto-fold #adminmenu div.wp-menu-image {
 689                 height: 30px;
 690                 width: 34px;
 691                 position: absolute;
 692                 z-index: 25;
 693         }
 694
 695         .auto-fold #adminmenu a.menu-top {
 696                 height: 34px;
 697         }
 698
 699         .auto-fold #adminmenu li.wp-menu-open {
 700                 border: 0 none;
 701         }
 702
 703         .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
 704                 margin-bottom: 0;
 705         }
 706
 707         .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
 708                 display: none;
 709         }
 710
 711         .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 712                 border-width: 4px;
 713                 margin-top: -4px;
 714                 top: 16px;
 715         }
 716
 717         .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
 718         .auto-fold ul#adminmenu > li a.current:after {
 719                 border-width: 4px;
 720                 margin-top: -4px;
 721         }
 722
 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 {
 726                 z-index: 10000;
 727         }
 728
 729         .auto-fold #collapse-menu span {
 730                 display: none;
 731         }
 732
 733         .auto-fold #collapse-button div {
 734                 background: none;
 735         }
 736
 737         /* rtl:ignore */
 738         .auto-fold #collapse-button div:after {
 739                 -webkit-transform: rotate(180deg);
 740                 -ms-transform: rotate(180deg);
 741                 transform: rotate(180deg);
 742         }
 743
 744         .rtl.auto-fold #collapse-button div:after {
 745                 -webkit-transform: none;
 746                 -ms-transform: none;
 747                 transform: none;
 748         }
 749
 750 }
 751
 752 @media screen and ( max-width: 782px ) {
 753         .auto-fold #wpcontent {
 754                 position: relative;
 755                 margin-left: 0;
 756                 padding-left: 10px;
 757         }
 758
 759         .sticky-menu #adminmenuwrap {
 760                 position: relative;
 761                 z-index: auto;
 762                 top: 0;
 763         }
 764
 765         /* Sidebar Adjustments */
 766         .auto-fold #adminmenu,
 767         .auto-fold #adminmenuback,
 768         .auto-fold #adminmenuwrap {
 769                 position: absolute;
 770                 width: 190px;
 771                 z-index: 100;
 772         }
 773
 774         .auto-fold #adminmenuback,
 775         .auto-fold #adminmenuwrap {
 776                 display: none;
 777         }
 778
 779         .auto-fold .wp-responsive-open #adminmenuback,
 780         .auto-fold .wp-responsive-open #adminmenuwrap {
 781                 display: block;
 782         }
 783
 784         .auto-fold #adminmenu li.menu-top {
 785                 width: 100%;
 786         }
 787
 788         /* Resize the admin menu items to a comfortable touch size */
 789         .auto-fold #adminmenu li a {
 790                 font-size: 16px;
 791                 padding: 5px;
 792         }
 793
 794         .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
 795                 padding: 10px 10px 10px 20px;
 796         }
 797
 798         /* Restore the menu names */
 799         .auto-fold #adminmenu .wp-menu-name {
 800                 display: block;
 801                 margin-left: 35px;
 802         }
 803
 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 {
 807                 border-width: 8px;
 808                 margin-top: -8px;
 809         }
 810
 811         .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 812                 display: none;
 813         }
 814
 815         /* Make the submenus appear correctly when tapped. */
 816         #adminmenu .wp-submenu {
 817                 position: relative;
 818                 display: none;
 819         }
 820
 821         .auto-fold #adminmenu .selected .wp-submenu,
 822         .auto-fold #adminmenu .wp-menu-open .wp-submenu {
 823                 position: relative;
 824                 display: block;
 825                 top: 0;
 826                 left: -1px;
 827                 -webkit-box-shadow: none;
 828                 box-shadow: none;
 829         }
 830
 831         .auto-fold #adminmenu .selected .wp-submenu:after,
 832         .auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
 833                 display: none;
 834         }
 835
 836         .auto-fold #adminmenu .opensub .wp-submenu {
 837                 display: none;
 838         }
 839
 840         .auto-fold #adminmenu .selected .wp-submenu {
 841                 display: block;
 842         }
 843
 844         .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
 845                 display: block;
 846         }
 847
 848         .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
 849         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
 850                 position: relative;
 851                 left: -1px;
 852                 right: 0;
 853                 top: 0;
 854         }
 855
 856         /* Remove submenu headers and adjust sub meu*/
 857         #adminmenu .wp-submenu .wp-submenu-head {
 858                 display: none;
 859         }
 860
 861         /* Toolbar menu toggle */
 862         #wp-responsive-toggle {
 863                 position: fixed;
 864                 top: 5px;
 865                 left: 4px;
 866                 padding-right: 10px;
 867                 z-index: 99999;
 868                 border: none;
 869                 -webkit-box-sizing: border-box;
 870                 -moz-box-sizing: border-box;
 871                 box-sizing: border-box;
 872         }
 873
 874         #wpadminbar #wp-admin-bar-menu-toggle a {
 875                 display: block;
 876                 padding: 0;
 877                 overflow: hidden;
 878                 outline: none;
 879                 text-decoration: none;
 880                 border: 1px solid transparent;
 881                 background: none;
 882                 height: 44px;
 883                 margin-left: -1px;
 884         }
 885
 886         .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 887                 background: #32373c;
 888         }
 889
 890         li#wp-admin-bar-menu-toggle {
 891                 display: block;
 892         }
 893
 894         #wpadminbar #wp-admin-bar-menu-toggle a:hover {
 895                 border: 1px solid transparent;
 896         }
 897
 898         #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
 899                 content: '\f228';
 900                 display: inline-block;
 901                 float: left;
 902                 font: normal 40px/45px 'Dashicons';
 903                 vertical-align: middle;
 904                 outline: none;
 905                 margin: 0;
 906                 -webkit-font-smoothing: antialiased;
 907                 -moz-osx-font-smoothing: grayscale;
 908                 height: 44px;
 909                 width: 50px;
 910                 padding: 0;
 911                 border: none;
 912                 text-align: center;
 913                 text-decoration: none;
 914                 -webkit-box-sizing: border-box;
 915                 -moz-box-sizing: border-box;
 916                 box-sizing: border-box;
 917         }
 918 }
 919
 920 /* Smartphone */
 921 @media screen and (max-width: 600px) {
 922         #adminmenuwrap,
 923         #adminmenuback {
 924                 display: none;
 925         }
 926
 927         .wp-responsive-open #adminmenuwrap,
 928         .wp-responsive-open #adminmenuback {
 929                 display: block;
 930         }
 931
 932         .auto-fold #adminmenu {
 933                 top: 46px;
 934         }
 935 }