[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  #customize-theme-controls #accordion-section-menu_locations {
   3      position: relative;
   4      margin-top: 30px;
   5  }
   6  
   7  #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
   8      border-bottom-color: #dcdcde;
   9      margin-top: 15px;
  10  }
  11  
  12  #customize-theme-controls .customize-section-title-nav_menus-heading,
  13  #customize-theme-controls .customize-section-title-menu_locations-heading,
  14  #customize-theme-controls .customize-section-title-menu_locations-description {
  15      padding: 0 12px;
  16  }
  17  
  18  #customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
  19      /* Override the default italic style for control descriptions */
  20      font-style: normal;
  21  }
  22  
  23  .menu-in-location,
  24  .menu-in-locations {
  25      display: block;
  26      font-weight: 600;
  27      font-size: 10px;
  28  }
  29  
  30  #customize-controls .theme-location-set,
  31  #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
  32  #customize-controls .control-section .accordion-section-title:hover .menu-in-location {
  33      color: #50575e;
  34  }
  35  
  36  /* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
  37  .customize-control-nav_menu_location .edit-menu,
  38  .customize-control-nav_menu_location .create-menu {
  39      margin-right: 6px;
  40      vertical-align: middle;
  41      line-height: 2.2;
  42  }
  43  
  44  #customize-controls .customize-control-nav_menu_name {
  45      margin-bottom: 12px;
  46  }
  47  
  48  .customize-control-nav_menu_name p:last-of-type {
  49      margin-bottom: 0;
  50  }
  51  
  52  #customize-new-menu-submit {
  53      float: left;
  54      min-width: 85px;
  55  }
  56  
  57  .wp-customizer .menu-item-bar .menu-item-handle,
  58  .wp-customizer .menu-item-settings,
  59  .wp-customizer .menu-item-settings .description-thin {
  60      box-sizing: border-box;
  61  }
  62  
  63  .wp-customizer .menu-item-bar {
  64      margin: 0;
  65  }
  66  
  67  .wp-customizer .menu-item-bar .menu-item-handle {
  68      width: 100%;
  69      max-width: 100%;
  70      background: #fff;
  71  }
  72  
  73  .wp-customizer .menu-item-handle .item-title {
  74      margin-left: 0;
  75  }
  76  
  77  .wp-customizer .menu-item-handle .item-type {
  78      padding: 1px 5px 0 21px;
  79      float: left;
  80      text-align: left;
  81  }
  82  
  83  .wp-customizer .menu-item-handle:hover {
  84      z-index: 8;
  85  }
  86  
  87  .customize-control-nav_menu_item.has-notifications .menu-item-handle {
  88      border-right: 4px solid #72aee6;
  89  }
  90  
  91  .wp-customizer .menu-item-settings {
  92      max-width: 100%;
  93      overflow: hidden;
  94      z-index: 8;
  95      padding: 10px;
  96      background: #f0f0f1;
  97      border: 1px solid #8c8f94;
  98      border-top: none;
  99  }
 100  
 101  .wp-customizer .menu-item-settings .description-thin {
 102      width: 100%;
 103      height: auto;
 104      margin: 0 0 8px;
 105  }
 106  
 107  .wp-customizer .menu-item-settings input[type="text"] {
 108      width: 100%;
 109  }
 110  
 111  .wp-customizer .menu-item-settings .submitbox {
 112      margin: 0;
 113      padding: 0;
 114  }
 115  
 116  .wp-customizer .menu-item-settings .link-to-original {
 117      padding: 5px 0;
 118      border: none;
 119      font-style: normal;
 120      margin: 0;
 121      width: 100%;
 122  }
 123  
 124  .wp-customizer .menu-item .submitbox .submitdelete {
 125      float: right;
 126      margin: 6px 0 0;
 127      padding: 0;
 128      cursor: pointer;
 129  }
 130  
 131  /**
 132   * Menu items reordering styles
 133   */
 134  
 135  .menu-item-reorder-nav {
 136      display: none;
 137      background-color: #fff;
 138      position: absolute;
 139      top: 0;
 140      left: 0;
 141  }
 142  
 143  .menus-move-left::before {
 144      content: "\f345";
 145      content: "\f345" / "";
 146  }
 147  
 148  .menus-move-right::before {
 149      content: "\f341";
 150      content: "\f341" / "";
 151  }
 152  
 153  .reordering .menu-item .item-controls,
 154  .reordering .menu-item .item-type {
 155      display: none;
 156  }
 157  
 158  .reordering .menu-item-reorder-nav {
 159      display: block;
 160  }
 161  
 162  .customize-control input.menu-name-field {
 163      width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
 164  }
 165  
 166  .wp-customizer .menu-item .item-edit {
 167      position: absolute;
 168      left: -19px;
 169      top: 2px;
 170      display: block;
 171      width: 30px;
 172      height: 38px;
 173      margin-left: 0 !important;
 174      box-shadow: none;
 175      outline: none;
 176      overflow: hidden;
 177      cursor: pointer;
 178      text-align: center;
 179  }
 180  
 181  .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator::before {
 182      content: "\f142";
 183      content: "\f142" / "";
 184  }
 185  
 186  .wp-customizer .menu-item-settings p.description {
 187      font-style: normal;
 188  }
 189  
 190  .wp-customizer .menu-settings dl {
 191      margin: 12px 0 0;
 192      padding: 0;
 193  }
 194  
 195  .wp-customizer .menu-settings .checkbox-input {
 196      margin-top: 8px;
 197  }
 198  
 199  .wp-customizer .menu-settings .menu-theme-locations {
 200      border-top: 1px solid #c3c4c7;
 201  }
 202  
 203  .wp-customizer .menu-settings {
 204      margin-top: 36px;
 205      border-top: none;
 206  }
 207  
 208  .wp-customizer .menu-location-settings {
 209      margin-top: 12px;
 210      border-top: none;
 211  }
 212  
 213  .wp-customizer .control-section-nav_menu .menu-location-settings {
 214      margin-top: 24px;
 215      border-top: 1px solid #dcdcde;
 216  }
 217  
 218  .wp-customizer .control-section-nav_menu .menu-location-settings,
 219  .customize-control-nav_menu_auto_add {
 220      padding-top: 12px;
 221  }
 222  
 223  .menu-location-settings .customize-control-checkbox .theme-location-set {
 224      line-height: 1;
 225  }
 226  
 227  .customize-control-nav_menu_auto_add label {
 228      vertical-align: top;
 229  }
 230  
 231  .menu-location-settings .new-menu-locations-widget-note {
 232      display: block;
 233  }
 234  
 235  .customize-control-menu {
 236      margin-top: 4px;
 237  }
 238  
 239  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
 240      color: #50575e;
 241  }
 242  
 243  /* Screen Options */
 244  .customize-screen-options-toggle {
 245      background: none;
 246      border: none;
 247      color: #50575e;
 248      cursor: pointer;
 249      margin: 0;
 250      padding: 20px;
 251      position: absolute;
 252      left: 0;
 253      top: 30px;
 254  }
 255  
 256  #customize-controls .customize-info .customize-help-toggle {
 257      padding: 20px;
 258  }
 259  
 260  #customize-controls .customize-info .customize-help-toggle::before {
 261      padding: 4px;
 262  }
 263  
 264  .customize-screen-options-toggle:hover,
 265  .customize-screen-options-toggle:active,
 266  .customize-screen-options-toggle:focus,
 267  .active-menu-screen-options .customize-screen-options-toggle,
 268  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
 269  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
 270  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
 271      color: var(--wp-admin-theme-color);
 272  }
 273  
 274  .customize-screen-options-toggle:focus,
 275  #customize-controls .customize-info .customize-help-toggle:focus {
 276      /* Only visible in Windows High Contrast mode */
 277      outline: 2px solid transparent;
 278  }
 279  
 280  .customize-screen-options-toggle::before {
 281      -moz-osx-font-smoothing: grayscale;
 282      border: none;
 283      content: "\f111";
 284      content: "\f111" / "";
 285      display: block;
 286      font: 18px/1 dashicons;
 287      padding: 5px;
 288      text-align: center;
 289      text-decoration: none !important;
 290      text-indent: 0;
 291      right: 6px;
 292      position: absolute;
 293      top: 6px;
 294  }
 295  
 296  .customize-screen-options-toggle:focus::before,
 297  #customize-controls .customize-info .customize-help-toggle:focus::before {
 298      border-radius: 100%;
 299  }
 300  
 301  .wp-customizer #screen-options-wrap {
 302      display: none;
 303      background: #fff;
 304      border-top: 1px solid #dcdcde;
 305      padding: 4px 15px 15px;
 306  }
 307  
 308  .wp-customizer .metabox-prefs label {
 309      display: block;
 310      padding-left: 0;
 311      line-height: 2.3076;
 312  }
 313  
 314  /* rework the arrow indicator implementation for NVDA bug same as #32715 */
 315  .wp-customizer .toggle-indicator {
 316      display: inline-block;
 317      font-size: 20px;
 318      line-height: 1;
 319  }
 320  
 321  .rtl .wp-customizer .toggle-indicator {
 322      text-indent: 1px; /* account for the dashicon alignment */
 323  }
 324  
 325  .wp-customizer .menu-item .item-edit .toggle-indicator::before,
 326  #available-menu-items .accordion-section-title .toggle-indicator::before {
 327      content: "\f140";
 328      content: "\f140" / "";
 329      display: block;
 330      padding: 1px 0 1px 2px;
 331      border-radius: 50%;
 332      color: #50575e;
 333      font: 400 20px/1 dashicons;
 334      -webkit-font-smoothing: antialiased;
 335      -moz-osx-font-smoothing: grayscale;
 336      text-decoration: none !important;
 337  }
 338  
 339  .control-section-nav_menu .field-link-target,
 340  .control-section-nav_menu .field-title-attribute,
 341  .control-section-nav_menu .field-css-classes,
 342  .control-section-nav_menu .field-xfn,
 343  .control-section-nav_menu .field-description {
 344      display: none;
 345  }
 346  
 347  .control-section-nav_menu.field-link-target-active .field-link-target,
 348  .control-section-nav_menu.field-title-attribute-active .field-title-attribute,
 349  .control-section-nav_menu.field-css-classes-active .field-css-classes,
 350  .control-section-nav_menu.field-xfn-active .field-xfn,
 351  .control-section-nav_menu.field-description-active .field-description {
 352      display: block;
 353  }
 354  
 355  /* WARNING: The 20px factor is hard-coded in JS. */
 356  .menu-item-depth-0 {
 357      margin-right: 0;
 358  }
 359  
 360  .menu-item-depth-1 {
 361      margin-right: 20px;
 362  }
 363  
 364  .menu-item-depth-2 {
 365      margin-right: 40px;
 366  }
 367  
 368  .menu-item-depth-3 {
 369      margin-right: 60px;
 370  }
 371  
 372  .menu-item-depth-4 {
 373      margin-right: 80px;
 374  }
 375  
 376  .menu-item-depth-5 {
 377      margin-right: 100px;
 378  }
 379  
 380  .menu-item-depth-6 {
 381      margin-right: 120px;
 382  }
 383  
 384  .menu-item-depth-7 {
 385      margin-right: 140px;
 386  }
 387  
 388  .menu-item-depth-8 {
 389      margin-right: 160px;
 390  } /* Not likely to be used or useful beyond this depth */
 391  .menu-item-depth-9 {
 392      margin-right: 180px;
 393  }
 394  
 395  .menu-item-depth-10 {
 396      margin-right: 200px;
 397  }
 398  
 399  .menu-item-depth-11 {
 400      margin-right: 220px;
 401  }
 402  
 403  /* @todo handle .menu-item-settings width */
 404  .menu-item-depth-0 > .menu-item-bar {
 405      margin-left: 0;
 406  }
 407  
 408  .menu-item-depth-1 > .menu-item-bar {
 409      margin-left: 20px;
 410  }
 411  
 412  .menu-item-depth-2 > .menu-item-bar {
 413      margin-left: 40px;
 414  }
 415  
 416  .menu-item-depth-3 > .menu-item-bar {
 417      margin-left: 60px;
 418  }
 419  
 420  .menu-item-depth-4 > .menu-item-bar {
 421      margin-left: 80px;
 422  }
 423  
 424  .menu-item-depth-5 > .menu-item-bar {
 425      margin-left: 100px;
 426  }
 427  
 428  .menu-item-depth-6 > .menu-item-bar {
 429      margin-left: 120px;
 430  }
 431  
 432  .menu-item-depth-7 > .menu-item-bar {
 433      margin-left: 140px;
 434  }
 435  
 436  .menu-item-depth-8 > .menu-item-bar {
 437      margin-left: 160px;
 438  }
 439  
 440  .menu-item-depth-9 > .menu-item-bar {
 441      margin-left: 180px;
 442  }
 443  
 444  .menu-item-depth-10 > .menu-item-bar {
 445      margin-left: 200px;
 446  }
 447  
 448  .menu-item-depth-11 > .menu-item-bar {
 449      margin-left: 220px;
 450  }
 451  
 452  /* Submenu left margin. */
 453  .menu-item-depth-0 .menu-item-transport {
 454      margin-right: 0;
 455  }
 456  
 457  .menu-item-depth-1 .menu-item-transport {
 458      margin-right: -20px;
 459  }
 460  
 461  .menu-item-depth-3 .menu-item-transport {
 462      margin-right: -60px;
 463  }
 464  
 465  .menu-item-depth-4 .menu-item-transport {
 466      margin-right: -80px;
 467  }
 468  
 469  .menu-item-depth-2 .menu-item-transport {
 470      margin-right: -40px;
 471  }
 472  
 473  .menu-item-depth-5 .menu-item-transport {
 474      margin-right: -100px;
 475  }
 476  
 477  .menu-item-depth-6 .menu-item-transport {
 478      margin-right: -120px;
 479  }
 480  
 481  .menu-item-depth-7 .menu-item-transport {
 482      margin-right: -140px;
 483  }
 484  
 485  .menu-item-depth-8 .menu-item-transport {
 486      margin-right: -160px;
 487  }
 488  
 489  .menu-item-depth-9 .menu-item-transport {
 490      margin-right: -180px;
 491  }
 492  
 493  .menu-item-depth-10 .menu-item-transport {
 494      margin-right: -200px;
 495  }
 496  
 497  .menu-item-depth-11 .menu-item-transport {
 498      margin-right: -220px;
 499  }
 500  
 501  /* WARNING: The 20px factor is hard-coded in JS. */
 502  .reordering .menu-item-depth-0 {
 503      margin-right: 0;
 504  }
 505  
 506  .reordering .menu-item-depth-1 {
 507      margin-right: 15px;
 508  }
 509  
 510  .reordering .menu-item-depth-2 {
 511      margin-right: 30px;
 512  }
 513  
 514  .reordering .menu-item-depth-3 {
 515      margin-right: 45px;
 516  }
 517  
 518  .reordering .menu-item-depth-4 {
 519      margin-right: 60px;
 520  }
 521  
 522  .reordering .menu-item-depth-5 {
 523      margin-right: 75px;
 524  }
 525  
 526  .reordering .menu-item-depth-6 {
 527      margin-right: 90px;
 528  }
 529  
 530  .reordering .menu-item-depth-7 {
 531      margin-right: 105px;
 532  }
 533  
 534  .reordering .menu-item-depth-8 {
 535      margin-right: 120px;
 536  } /* Not likely to be used or useful beyond this depth */
 537  .reordering .menu-item-depth-9 {
 538      margin-right: 135px;
 539  }
 540  
 541  .reordering .menu-item-depth-10 {
 542      margin-right: 150px;
 543  }
 544  
 545  .reordering .menu-item-depth-11 {
 546      margin-right: 165px;
 547  }
 548  
 549  .reordering .menu-item-depth-0 > .menu-item-bar {
 550      margin-left: 0;
 551  }
 552  
 553  .reordering .menu-item-depth-1 > .menu-item-bar {
 554      margin-left: 15px;
 555  }
 556  
 557  .reordering .menu-item-depth-2 > .menu-item-bar {
 558      margin-left: 30px;
 559  }
 560  
 561  .reordering .menu-item-depth-3 > .menu-item-bar {
 562      margin-left: 45px;
 563  }
 564  
 565  .reordering .menu-item-depth-4 > .menu-item-bar {
 566      margin-left: 60px;
 567  }
 568  
 569  .reordering .menu-item-depth-5 > .menu-item-bar {
 570      margin-left: 75px;
 571  }
 572  
 573  .reordering .menu-item-depth-6 > .menu-item-bar {
 574      margin-left: 90px;
 575  }
 576  
 577  .reordering .menu-item-depth-7 > .menu-item-bar {
 578      margin-left: 105px;
 579  }
 580  
 581  .reordering .menu-item-depth-8 > .menu-item-bar {
 582      margin-left: 120px;
 583  }
 584  
 585  .reordering .menu-item-depth-9 > .menu-item-bar {
 586      margin-left: 135px;
 587  }
 588  
 589  .reordering .menu-item-depth-10 > .menu-item-bar {
 590      margin-left: 150px;
 591  }
 592  
 593  .reordering .menu-item-depth-11 > .menu-item-bar {
 594      margin-left: 165px;
 595  }
 596  
 597  .control-section-nav_menu.menu .menu-item-edit-active {
 598      margin-right: 0;
 599  }
 600  
 601  .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
 602      margin-left: 0;
 603  }
 604  
 605  .control-section-nav_menu.menu .sortable-placeholder {
 606      margin-top: 0;
 607      margin-bottom: 1px;
 608      max-width: calc(100% - 2px);
 609      float: right;
 610      display: list-item;
 611      border-color: #a7aaad;
 612  }
 613  
 614  .menu-item-transport li.customize-control {
 615      float: none;
 616  }
 617  
 618  .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
 619      margin-top: 0;
 620  }
 621  
 622  /**
 623   * Add-menu-items mode
 624   */
 625  
 626  .adding-menu-items .control-section {
 627      opacity: 0.4;
 628  }
 629  
 630  .adding-menu-items .control-panel.control-section,
 631  .adding-menu-items .control-section.open {
 632      opacity: 1;
 633  }
 634  
 635  .menu-item-bar .item-delete {
 636      color: #d63638;
 637      position: absolute;
 638      top: 2px;
 639      left: -19px;
 640      width: 30px;
 641      height: 38px;
 642      cursor: pointer;
 643      display: none;
 644  }
 645  
 646  .menu-item-bar .item-delete::before {
 647      content: "\f335";
 648      content: "\f335" / "";
 649      position: absolute;
 650      top: 9px;
 651      right: 5px;
 652      border-radius: 50%;
 653      font: 400 20px/1 dashicons;
 654      -webkit-font-smoothing: antialiased;
 655      -moz-osx-font-smoothing: grayscale;
 656  }
 657  
 658  .menu-item-bar .item-delete:hover,
 659  .menu-item-bar .item-delete:focus {
 660      box-shadow: none;
 661      outline: none;
 662      color: #d63638;
 663  }
 664  
 665  .adding-menu-items .menu-item-bar .item-edit {
 666      display: none;
 667  }
 668  
 669  .adding-menu-items .menu-item-bar .item-delete {
 670      display: block;
 671  }
 672  
 673  /**
 674   * Styles for menu-item addition panel
 675   */
 676  
 677  #available-menu-items.opening {
 678      overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
 679  }
 680  
 681  #available-menu-items #available-menu-items-search.open {
 682      height: 100%;
 683      border-bottom: none;
 684  }
 685  
 686  #available-menu-items .accordion-section-title {
 687      border-right: none;
 688      border-left: none;
 689      background: #fff;
 690      transition: background-color 0.15s;
 691      /* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
 692      -webkit-user-select: auto;
 693      user-select: auto;
 694  }
 695  
 696  #available-menu-items .open .accordion-section-title,
 697  #available-menu-items #available-menu-items-search .accordion-section-title {
 698      background: #f0f0f1;
 699  }
 700  
 701  /* rework the arrow indicator implementation for NVDA bug see #32715 */
 702  #available-menu-items .accordion-section-title::after {
 703      content: none !important;
 704  }
 705  
 706  #available-menu-items .accordion-section-title:hover .toggle-indicator::before,
 707  #available-menu-items .button-link:hover .toggle-indicator::before,
 708  #available-menu-items .button-link:focus .toggle-indicator::before {
 709      color: #1d2327;
 710  }
 711  
 712  #available-menu-items .open .accordion-section-title .toggle-indicator::before {
 713      content: "\f142";
 714      color: #1d2327;
 715  }
 716  
 717  #available-menu-items .available-menu-items-list {
 718      overflow-y: auto;
 719      max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
 720      background: transparent;
 721  }
 722  
 723  #available-menu-items .accordion-section-title button .toggle-indicator {
 724      display: flex;
 725      align-items: center;
 726      width: 28px;
 727      height: 35px;
 728      position: absolute;
 729      top: 5px;
 730      left: 5px;
 731      box-shadow: none;
 732      outline: none;
 733      cursor: pointer;
 734      text-align: center;
 735  }
 736  
 737  #available-menu-items .accordion-section-title .no-items,
 738  #available-menu-items .cannot-expand .accordion-section-title .spinner,
 739  #available-menu-items .cannot-expand .accordion-section-title > button:not(#available-menu-items-search button.is-visible) {
 740      display: none;
 741  }
 742  
 743  #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
 744      display: block;
 745  }
 746  
 747  #available-menu-items .cannot-expand .accordion-section-title .no-items {
 748      float: left;
 749      color: #50575e;
 750      font-weight: 400;
 751      margin-right: 5px;
 752  }
 753  
 754  #available-menu-items .accordion-section-content {
 755      max-height: 290px;
 756      margin: 0;
 757      padding: 0;
 758      position: relative;
 759      background: transparent;
 760  }
 761  
 762  #available-menu-items .accordion-section-content .available-menu-items-list {
 763      margin: 0 0 64px;
 764      padding: 1px 15px 15px;
 765  }
 766  
 767  #available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
 768      margin-bottom: 0;
 769  }
 770  
 771  #new-custom-menu-item .accordion-section-content {
 772      padding: 0 15px 15px;
 773  }
 774  
 775  #available-menu-items .menu-item-tpl {
 776      margin: 0;
 777  }
 778  
 779  #custom-menu-item-name.invalid,
 780  #custom-menu-item-url.invalid,
 781  .edit-menu-item-url.invalid,
 782  .menu-name-field.invalid,
 783  .menu-name-field.invalid:focus,
 784  #available-menu-items .new-content-item .create-item-input.invalid,
 785  #available-menu-items .new-content-item .create-item-input.invalid:focus {
 786      border: 1px solid #d63638;
 787  }
 788  
 789  #available-menu-items .menu-item-handle .item-type {
 790      padding-left: 0;
 791  }
 792  
 793  #available-menu-items .menu-item-handle .item-title {
 794      padding-right: 20px;
 795  }
 796  
 797  #available-menu-items .menu-item-handle {
 798      cursor: pointer;
 799      box-shadow: none;
 800      margin-top: -1px;
 801  }
 802  
 803  #available-menu-items .menu-item-handle:hover {
 804      z-index: 1;
 805  }
 806  
 807  #available-menu-items .item-title h4 {
 808      padding: 0 0 5px;
 809      font-size: 14px;
 810  }
 811  
 812  #available-menu-items .item-add {
 813      position: absolute;
 814      top: 1px;
 815      right: 1px;
 816      color: #8c8f94;
 817      width: 30px;
 818      height: 38px;
 819      box-shadow: none;
 820      outline: none;
 821      cursor: pointer;
 822      text-align: center;
 823  }
 824  
 825  #available-menu-items .menu-item-handle .item-add:focus {
 826      color: #1d2327;
 827  }
 828  
 829  #available-menu-items .item-add::before {
 830      content: "\f543";
 831      content: "\f543" / "";
 832      position: relative;
 833      right: 2px;
 834      top: 3px;
 835      display: inline-block;
 836      height: 20px;
 837      border-radius: 50%;
 838      font: 400 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
 839  }
 840  
 841  #available-menu-items .menu-item-handle.item-added .item-type,
 842  #available-menu-items .menu-item-handle.item-added .item-title,
 843  #available-menu-items .menu-item-handle.item-added:hover .item-add,
 844  #available-menu-items .menu-item-handle.item-added .item-add:focus {
 845      color: #646970;
 846  }
 847  
 848  #available-menu-items .menu-item-handle.item-added .item-add::before {
 849      content: "\f147";
 850      content: "\f147" / "";
 851  }
 852  
 853  #available-menu-items .accordion-section-title.loading .spinner,
 854  #available-menu-items-search.loading .accordion-section-title .spinner {
 855      visibility: visible;
 856      margin: 0 20px;
 857  }
 858  
 859  #available-menu-items-search .spinner {
 860      position: absolute;
 861      bottom: 24px; /* 13 container padding +1 input margin +10 ( ( 40 input height - 20 spinner height ) / 2 ) */
 862      left: 21px;
 863      margin: 0 !important;
 864  }
 865  
 866  /* search results list */
 867  #available-menu-items #available-menu-items-search .accordion-section-content {
 868      position: absolute;
 869      right: 0;
 870      top: 83px; /* below title div / search input (75 + 8 for 40px input) */
 871      bottom: 0; /* 100% height that still triggers lazy load */
 872      max-height: none;
 873      width: 100%;
 874      padding: 1px 15px 15px;
 875      box-sizing: border-box;
 876  }
 877  
 878  #available-menu-items-search .nothing-found {
 879      /* Compensate the 1px top padding of the container. */
 880      margin-top: -1px;
 881  }
 882  
 883  #available-menu-items-search .accordion-section-title::after {
 884      display: none;
 885  }
 886  
 887  #available-menu-items-search .accordion-section-content:empty {
 888      min-height: 0;
 889      padding: 0;
 890  }
 891  
 892  #available-menu-items-search.loading .accordion-section-content div {
 893      opacity: 0.5;
 894  }
 895  
 896  #available-menu-items-search.loading.loading-more .accordion-section-content div {
 897      opacity: 1;
 898  }
 899  
 900  @media (prefers-reduced-motion: no-preference) {
 901      #customize-preview {
 902          transition: all 0.2s;
 903      }
 904  }
 905  
 906  body.adding-menu-items #available-menu-items {
 907      right: 0;
 908      visibility: visible;
 909  }
 910  
 911  body.adding-menu-items .wp-full-overlay-main {
 912      right: 300px;
 913  }
 914  
 915  body.adding-menu-items #customize-preview {
 916      opacity: 0.4;
 917  }
 918  
 919  body.adding-menu-items #customize-preview iframe {
 920      pointer-events: none;
 921  }
 922  
 923  .menu-item-handle .spinner {
 924      display: none;
 925      float: right;
 926      margin: 0 0 0 8px;
 927  }
 928  
 929  .nav-menu-inserted-item-loading .spinner {
 930      display: block;
 931  }
 932  
 933  .nav-menu-inserted-item-loading .menu-item-handle .item-type {
 934      padding: 0 8px 0 0;
 935  }
 936  
 937  .nav-menu-inserted-item-loading .menu-item-handle,
 938  .added-menu-item .menu-item-handle.loading {
 939      padding: 10px 8px 10px 15px;
 940      cursor: default;
 941      opacity: 0.5;
 942      background: #fff;
 943      color: #50575e;
 944  }
 945  
 946  .added-menu-item .menu-item-handle {
 947      transition-property: opacity, background, color;
 948      transition-duration: 1.25s;
 949      transition-timing-function: cubic-bezier(0.25, -2.5, 0.75, 8); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
 950  }
 951  
 952  /* Add/delete Menus */
 953  
 954  #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
 955      border-bottom-color: #dcdcde;
 956  }
 957  
 958  /* @todo update selector */
 959  #accordion-section-add_menu {
 960      margin: 15px 12px;
 961  }
 962  
 963  #accordion-section-add_menu h3 {
 964      text-align: left;
 965  }
 966  
 967  #accordion-section-add_menu h3,
 968  #accordion-section-add_menu .customize-add-menu-button {
 969      margin: 0;
 970  }
 971  
 972  #accordion-section-add_menu .customize-add-menu-button {
 973      font-weight: 400;
 974  }
 975  
 976  #create-new-menu-submit {
 977      float: left;
 978      margin: 0 0 12px;
 979  }
 980  
 981  .menu-delete-item {
 982      float: right;
 983      padding: 1em 0;
 984      width: 100%;
 985  }
 986  
 987  .assigned-menu-locations-title p {
 988      margin: 0 0 8px;
 989  }
 990  
 991  li.assigned-to-menu-location .menu-delete-item {
 992      display: none;
 993  }
 994  
 995  li.assigned-to-menu-location .add-new-menu-item {
 996      margin-bottom: 1em;
 997  }
 998  
 999  .menu-item-handle {
1000      margin-top: -1px;
1001  }
1002  
1003  .ui-sortable-disabled .menu-item-handle {
1004      cursor: default;
1005  }
1006  
1007  .menu-item-handle:hover {
1008      position: relative;
1009      z-index: 10;
1010      color: var(--wp-admin-theme-color);
1011  }
1012  
1013  .menu-item-handle:hover .item-type,
1014  .menu-item-handle:hover .item-edit,
1015  #available-menu-items .menu-item-handle:hover .item-add {
1016      color: var(--wp-admin-theme-color);
1017  }
1018  
1019  .menu-item-edit-active .menu-item-handle {
1020      border-color: #8c8f94;
1021      border-bottom: none;
1022  }
1023  
1024  .customize-control-nav_menu_item {
1025      margin-bottom: 0;
1026  }
1027  
1028  .customize-control-nav_menu .new-menu-item-invitation {
1029      margin-top: 0;
1030      margin-bottom: 0;
1031  }
1032  
1033  .customize-control-nav_menu .customize-control-nav_menu-buttons {
1034      margin-top: 12px;
1035  }
1036  
1037  /**
1038   * box-shadows
1039   */
1040  
1041  .wp-customizer .menu-item .submitbox .submitdelete:focus,
1042  .customize-screen-options-toggle:focus::before,
1043  #customize-controls .customize-info .customize-help-toggle:focus::before,
1044  .wp-customizer button:focus .toggle-indicator::before,
1045  .menu-delete:focus,
1046  .menu-item-bar .item-delete:focus::before,
1047  #available-menu-items .item-add:focus::before {
1048      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
1049      /* Only visible in Windows High Contrast mode */
1050      outline: 2px solid transparent;
1051  }
1052  
1053  @media screen and (max-width: 782px) {
1054      #available-menu-items #available-menu-items-search .accordion-section-content {
1055          top: 71px; /* 63 + 8 for 40px input */
1056      }
1057  }
1058  
1059  @media screen and (max-width: 640px) {
1060      #available-menu-items #available-menu-items-search .accordion-section-content {
1061          top: 154px; /* 146 + 8 for 40px input */
1062      }
1063  }