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: #82878c; /* same as new icons */
  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: "\f541";
 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         display: none;
 323 }
 324
 325 .folded #adminmenu .wp-menu-name {
 326         position: absolute;
 327         left: -999px;
 328 }
 329
 330 .folded #adminmenu .wp-submenu-head {
 331         display: block;
 332 }
 333
 334 #adminmenu .wp-submenu li {
 335         padding: 0;
 336         margin: 0;
 337         overflow: hidden;
 338 }
 339
 340 #adminmenu .wp-menu-image img {
 341         padding: 9px 0 0 0;
 342         opacity: 0.6;
 343         filter: alpha(opacity=60);
 344 }
 345
 346 #adminmenu div.wp-menu-name {
 347         padding: 8px 0;
 348 }
 349
 350 #adminmenu div.wp-menu-image {
 351         float: left;
 352         width: 36px;
 353         height: 34px;
 354         margin: 0;
 355         text-align: center;
 356 }
 357
 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;
 363 }
 364
 365 div.wp-menu-image:before {
 366         color: #a0a5aa;
 367         color: rgba(240,245,250,0.6);
 368         padding: 7px 0;
 369         -webkit-transition: all .1s ease-in-out;
 370         transition: all .1s ease-in-out;
 371 }
 372
 373 #adminmenu div.wp-menu-image:before {
 374         color: #a0a5aa;
 375         color: rgba(240,245,250,0.6);
 376 }
 377
 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 {
 385         color: #fff;
 386 }
 387
 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 {
 391         color: #00b9eb;
 392 }
 393
 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 {
 396         color: #a0a5aa;
 397 }
 398
 399 .folded #adminmenu div.wp-menu-image {
 400         width: 35px;
 401         height: 30px;
 402         position: absolute;
 403         z-index: 25;
 404 }
 405
 406 .folded #adminmenu a.menu-top {
 407         height: 34px;
 408 }
 409
 410 /* No @font-face support */
 411 .no-font-face #adminmenu .wp-menu-image {
 412         display: none;
 413 }
 414
 415 .no-font-face #adminmenu div.wp-menu-name {
 416         padding: 8px 12px;
 417 }
 418
 419 .no-font-face.auto-fold #adminmenu .wp-menu-name {
 420         margin-left: 0;
 421 }
 422 /* End no @font-face support */
 423
 424 /* Sticky admin menu */
 425 .sticky-menu #adminmenuwrap {
 426         position: fixed;
 427 }
 428
 429 /* A new arrow */
 430
 431 .wp-menu-arrow {
 432         display: none !important;
 433 }
 434
 435 ul#adminmenu a.wp-has-current-submenu {
 436         position: relative;
 437 }
 438
 439 ul#adminmenu a.wp-has-current-submenu:after,
 440 ul#adminmenu > li.current > a.current:after {
 441         right: 0;
 442         border: solid 8px transparent;
 443         content: " ";
 444         height: 0;
 445         width: 0;
 446         position: absolute;
 447         pointer-events: none;
 448         border-right-color: #f1f1f1;
 449         top: 50%;
 450         margin-top: -8px;
 451 }
 452
 453 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
 454         display: none;
 455 }
 456
 457 .folded ul#adminmenu a.wp-has-current-submenu:after,
 458 .folded ul#adminmenu > li a.current:after {
 459         border-width: 4px;
 460         margin-top: -4px;
 461 }
 462
 463 /* flyout menu arrow */
 464 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 465         right: 0;
 466         border: solid transparent;
 467         content: " ";
 468         height: 0;
 469         width: 0;
 470         position: absolute;
 471         pointer-events: none;
 472         border-width: 8px;
 473         top: 10px;
 474         z-index: 10000;
 475 }
 476
 477 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 478         border-width: 4px;
 479         margin-top: -4px;
 480         top: 18px;
 481 }
 482
 483 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
 484         border-right-color: #32373c;
 485 }
 486
 487 #adminmenu li.menu-top:hover .wp-menu-image img,
 488 #adminmenu li.wp-has-current-submenu .wp-menu-image img {
 489         opacity: 1;
 490         filter: alpha(opacity=100);
 491 }
 492
 493 #adminmenu li.wp-menu-separator {
 494         height: 5px;
 495         padding: 0;
 496         margin: 0 0 6px 0;
 497         cursor: inherit;
 498 }
 499
 500 /* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
 501 #adminmenu div.separator {
 502         height: 2px;
 503         padding: 0;
 504 }
 505
 506 #adminmenu .wp-submenu .wp-submenu-head {
 507         color: #fff;
 508         font-weight: 400;
 509         font-size: 14px;
 510         padding: 8px 4px 8px 11px;
 511         margin: -7px 0px 4px;
 512 }
 513
 514 #adminmenu li.current,
 515 .folded #adminmenu li.wp-menu-open {
 516         border: 0 none;
 517 }
 518
 519 #adminmenu .awaiting-mod,
 520 #adminmenu .update-plugins {
 521         display: inline-block;
 522         background-color: #d54e21;
 523         color: #fff;
 524         font-size: 9px;
 525         line-height: 17px;
 526         font-weight: 600;
 527         margin: 1px 0 0 2px;
 528         vertical-align: top;
 529         -webkit-border-radius: 10px;
 530         border-radius: 10px;
 531         z-index: 26;
 532 }
 533
 534 #adminmenu li .awaiting-mod span,
 535 #adminmenu li span.update-plugins span {
 536         display: block;
 537         padding: 0 6px;
 538 }
 539
 540 #adminmenu li.current a .awaiting-mod,
 541 #adminmenu      li a.wp-has-current-submenu .update-plugins {
 542         background-color: #00b9eb;
 543         color: #fff;
 544 }
 545
 546 #adminmenu li span.count-0 {
 547         display: none;
 548 }
 549
 550 #collapse-button {
 551         display: block;
 552         width: 100%;
 553         height: 34px;
 554         margin: 0;
 555         border: none;
 556         padding: 0;
 557         position: relative;
 558         overflow: visible;
 559         line-height: 34px;
 560         background: none;
 561         color: #aaa;
 562         cursor: pointer;
 563         outline: 0;
 564 }
 565
 566 #collapse-button:hover,
 567 #collapse-button:focus {
 568         color: #00b9eb;
 569 }
 570
 571 #collapse-button .collapse-button-icon,
 572 #collapse-button .collapse-button-label {
 573         /* absolutely positioned to avoid 1px shift in IE when button is pressed */
 574         display: block;
 575         position: absolute;
 576         top: 0;
 577         left: 0;
 578         line-height: 34px;
 579 }
 580
 581 #collapse-button .collapse-button-icon {
 582         width: 36px;
 583         height: 34px;
 584 }
 585
 586 #collapse-button .collapse-button-label {
 587         padding: 0 0 0 36px;
 588 }
 589
 590 .folded #collapse-button .collapse-button-label {
 591         display: none;
 592 }
 593
 594 #collapse-button .collapse-button-icon:after {
 595         content: "\f148";
 596         display: block;
 597         position: relative;
 598         top: 7px;
 599         text-align: center;
 600         font: normal 20px/1 dashicons !important;
 601         speak: none;
 602         -webkit-font-smoothing: antialiased;
 603         -moz-osx-font-smoothing: grayscale;
 604 }
 605
 606 /* rtl:ignore */
 607 .folded #collapse-button .collapse-button-icon:after,
 608 .rtl #collapse-button .collapse-button-icon:after {
 609         -webkit-transform: rotate(180deg);
 610         -ms-transform: rotate(180deg);
 611         transform: rotate(180deg);
 612 }
 613
 614 .rtl.folded #collapse-button .collapse-button-icon:after {
 615         -webkit-transform: none;
 616         -ms-transform: none;
 617         transform: none;
 618 }
 619
 620 #collapse-button .collapse-button-icon:after,
 621 #collapse-button .collapse-button-label {
 622         -webkit-transition: all .1s ease-in-out;
 623         transition: all .1s ease-in-out;
 624 }
 625
 626 /**
 627  * Toolbar menu toggle
 628  */
 629 li#wp-admin-bar-menu-toggle {
 630         display: none;
 631 }
 632
 633 /* Hide-if-customize for items we can't add classes to */
 634 .customize-support #menu-appearance a[href="themes.php?page=custom-header"],
 635 .customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
 636         display: none;
 637 }
 638
 639 /* Auto-folding of the admin menu */
 640 @media only screen and (max-width: 960px) {
 641         .auto-fold #wpcontent,
 642         .auto-fold #wpfooter {
 643                 margin-left: 36px;
 644         }
 645
 646         .auto-fold #adminmenuback,
 647         .auto-fold #adminmenuwrap,
 648         .auto-fold #adminmenu,
 649         .auto-fold #adminmenu li.menu-top {
 650                 width: 36px;
 651         }
 652
 653         .auto-fold #adminmenu .wp-submenu.sub-open,
 654         .auto-fold #adminmenu .opensub .wp-submenu,
 655         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
 656         .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
 657         .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
 658         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
 659                 top: 0px;
 660                 left: 36px;
 661         }
 662
 663         .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
 664         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
 665                 position: absolute;
 666                 top: -1000em;
 667                 margin-right: -1px;
 668                 padding: 7px 0 8px;
 669                 z-index: 9999;
 670         }
 671
 672         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
 673                 min-width: 150px;
 674                 width: auto;
 675         }
 676
 677         .auto-fold #adminmenu .wp-has-current-submenu li > a {
 678                 padding-right: 16px;
 679                 padding-left: 14px;
 680         }
 681
 682
 683         .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
 684                 padding-left: 12px;
 685         }
 686
 687         .auto-fold #adminmenu .wp-menu-name {
 688                 position: absolute;
 689                 left: -999px;
 690         }
 691
 692         .auto-fold #adminmenu .wp-submenu-head {
 693                 display: block;
 694         }
 695
 696         .auto-fold #adminmenu div.wp-menu-image {
 697                 height: 30px;
 698                 width: 34px;
 699                 position: absolute;
 700                 z-index: 25;
 701         }
 702
 703         .auto-fold #adminmenu a.menu-top {
 704                 height: 34px;
 705         }
 706
 707         .auto-fold #adminmenu li.wp-menu-open {
 708                 border: 0 none;
 709         }
 710
 711         .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
 712                 margin-bottom: 0;
 713         }
 714
 715         .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
 716                 display: none;
 717         }
 718
 719         .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 720                 border-width: 4px;
 721                 margin-top: -4px;
 722                 top: 16px;
 723         }
 724
 725         .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
 726         .auto-fold ul#adminmenu > li a.current:after {
 727                 border-width: 4px;
 728                 margin-top: -4px;
 729         }
 730
 731         .auto-fold #adminmenu li.menu-top:hover,
 732         .auto-fold #adminmenu li.opensub > a.menu-top,
 733         .auto-fold #adminmenu li > a.menu-top:focus {
 734                 z-index: 10000;
 735         }
 736
 737         .auto-fold #collapse-menu .collapse-button-label {
 738                 display: none;
 739         }
 740
 741         /* rtl:ignore */
 742         .auto-fold #collapse-button .collapse-button-icon:after {
 743                 -webkit-transform: rotate(180deg);
 744                 -ms-transform: rotate(180deg);
 745                 transform: rotate(180deg);
 746         }
 747
 748         .rtl.auto-fold #collapse-button .collapse-button-icon:after {
 749                 -webkit-transform: none;
 750                 -ms-transform: none;
 751                 transform: none;
 752         }
 753
 754 }
 755
 756 @media screen and ( max-width: 782px ) {
 757         .auto-fold #wpcontent {
 758                 position: relative;
 759                 margin-left: 0;
 760                 padding-left: 10px;
 761         }
 762
 763         .sticky-menu #adminmenuwrap {
 764                 position: relative;
 765                 z-index: auto;
 766                 top: 0;
 767         }
 768
 769         /* Sidebar Adjustments */
 770         .auto-fold #adminmenu,
 771         .auto-fold #adminmenuback,
 772         .auto-fold #adminmenuwrap {
 773                 position: absolute;
 774                 width: 190px;
 775                 z-index: 100;
 776         }
 777
 778         .auto-fold #adminmenuback,
 779         .auto-fold #adminmenuwrap {
 780                 display: none;
 781         }
 782
 783         .auto-fold .wp-responsive-open #adminmenuback,
 784         .auto-fold .wp-responsive-open #adminmenuwrap {
 785                 display: block;
 786         }
 787
 788         .auto-fold #adminmenu li.menu-top {
 789                 width: 100%;
 790         }
 791
 792         /* Resize the admin menu items to a comfortable touch size */
 793         .auto-fold #adminmenu li a {
 794                 font-size: 16px;
 795                 padding: 5px;
 796         }
 797
 798         .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
 799                 padding: 10px 10px 10px 20px;
 800         }
 801
 802         /* Restore the menu names */
 803         .auto-fold #adminmenu .wp-menu-name {
 804                 position: static;
 805                 margin-left: 35px;
 806         }
 807
 808         /* Switch the arrow side */
 809         .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
 810         .auto-fold ul#adminmenu > li.current > a.current:after {
 811                 border-width: 8px;
 812                 margin-top: -8px;
 813         }
 814
 815         .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
 816                 display: none;
 817         }
 818
 819         /* Make the submenus appear correctly when tapped. */
 820         #adminmenu .wp-submenu {
 821                 position: relative;
 822                 display: none;
 823         }
 824
 825         .auto-fold #adminmenu .selected .wp-submenu,
 826         .auto-fold #adminmenu .wp-menu-open .wp-submenu {
 827                 position: relative;
 828                 display: block;
 829                 top: 0;
 830                 left: -1px;
 831                 -webkit-box-shadow: none;
 832                 box-shadow: none;
 833         }
 834
 835         .auto-fold #adminmenu .selected .wp-submenu:after,
 836         .auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
 837                 display: none;
 838         }
 839
 840         .auto-fold #adminmenu .opensub .wp-submenu {
 841                 display: none;
 842         }
 843
 844         .auto-fold #adminmenu .selected .wp-submenu {
 845                 display: block;
 846         }
 847
 848         .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
 849                 display: block;
 850         }
 851
 852         .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
 853         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
 854                 position: relative;
 855                 left: -1px;
 856                 right: 0;
 857                 top: 0;
 858         }
 859
 860         /* Remove submenu headers and adjust sub meu*/
 861         #adminmenu .wp-submenu .wp-submenu-head {
 862                 display: none;
 863         }
 864
 865         /* Toolbar menu toggle */
 866         #wp-responsive-toggle {
 867                 position: fixed;
 868                 top: 5px;
 869                 left: 4px;
 870                 padding-right: 10px;
 871                 z-index: 99999;
 872                 border: none;
 873                 -webkit-box-sizing: border-box;
 874                 -moz-box-sizing: border-box;
 875                 box-sizing: border-box;
 876         }
 877
 878         #wpadminbar #wp-admin-bar-menu-toggle a {
 879                 display: block;
 880                 padding: 0;
 881                 overflow: hidden;
 882                 outline: none;
 883                 text-decoration: none;
 884                 border: 1px solid transparent;
 885                 background: none;
 886                 height: 44px;
 887                 margin-left: -1px;
 888         }
 889
 890         .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 891                 background: #32373c;
 892         }
 893
 894         li#wp-admin-bar-menu-toggle {
 895                 display: block;
 896         }
 897
 898         #wpadminbar #wp-admin-bar-menu-toggle a:hover {
 899                 border: 1px solid transparent;
 900         }
 901
 902         #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
 903                 content: "\f228";
 904                 display: inline-block;
 905                 float: left;
 906                 font: normal 40px/45px dashicons;
 907                 vertical-align: middle;
 908                 outline: none;
 909                 margin: 0;
 910                 -webkit-font-smoothing: antialiased;
 911                 -moz-osx-font-smoothing: grayscale;
 912                 height: 44px;
 913                 width: 50px;
 914                 padding: 0;
 915                 border: none;
 916                 text-align: center;
 917                 text-decoration: none;
 918                 -webkit-box-sizing: border-box;
 919                 -moz-box-sizing: border-box;
 920                 box-sizing: border-box;
 921         }
 922
 923         .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
 924                 color: #00b9eb;
 925         }
 926 }
 927
 928 /* Smartphone */
 929 @media screen and (max-width: 600px) {
 930         #adminmenuwrap,
 931         #adminmenuback {
 932                 display: none;
 933         }
 934
 935         .wp-responsive-open #adminmenuwrap,
 936         .wp-responsive-open #adminmenuback {
 937                 display: block;
 938         }
 939
 940         .auto-fold #adminmenu {
 941                 top: 46px;
 942         }
 943 }