[Summary view] [Print] [Text view]

   1  #customize-theme-controls #accordion-section-menu_locations {
   2      position: relative;
   3      margin-top: 30px;
   4  }
   5  
   6  #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
   7      border-bottom-color: #dcdcde;
   8      margin-top: 15px;
   9  }
  10  
  11  #customize-theme-controls .customize-section-title-nav_menus-heading,
  12  #customize-theme-controls .customize-section-title-menu_locations-heading,
  13  #customize-theme-controls .customize-section-title-menu_locations-description {
  14      padding: 0 12px;
  15  }
  16  
  17  #customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
  18      /* Override the default italic style for control descriptions */
  19      font-style: normal;
  20  }
  21  
  22  .menu-in-location,
  23  .menu-in-locations {
  24      display: block;
  25      font-weight: 600;
  26      font-size: 10px;
  27  }
  28  
  29  #customize-controls .theme-location-set,
  30  #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
  31  #customize-controls .control-section .accordion-section-title:hover .menu-in-location {
  32      color: #50575e;
  33  }
  34  
  35  /* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
  36  .customize-control-nav_menu_location .edit-menu,
  37  .customize-control-nav_menu_location .create-menu {
  38      margin-left: 6px;
  39      vertical-align: middle;
  40      line-height: 2.2;
  41  }
  42  
  43  #customize-controls .customize-control-nav_menu_name {
  44      margin-bottom: 12px;
  45  }
  46  
  47  .customize-control-nav_menu_name p:last-of-type {
  48      margin-bottom: 0;
  49  }
  50  
  51  #customize-new-menu-submit {
  52      float: right;
  53      min-width: 85px;
  54  }
  55  
  56  .wp-customizer .menu-item-bar .menu-item-handle,
  57  .wp-customizer .menu-item-settings,
  58  .wp-customizer .menu-item-settings .description-thin {
  59      box-sizing: border-box;
  60  }
  61  
  62  .wp-customizer .menu-item-bar {
  63      margin: 0;
  64  }
  65  
  66  .wp-customizer .menu-item-bar .menu-item-handle {
  67      width: 100%;
  68      max-width: 100%;
  69      background: #fff;
  70  }
  71  
  72  .wp-customizer .menu-item-handle .item-title {
  73      margin-right: 0;
  74  }
  75  
  76  .wp-customizer .menu-item-handle .item-type {
  77      padding: 1px 21px 0 5px;
  78      float: right;
  79      text-align: right;
  80  }
  81  
  82  .wp-customizer .menu-item-handle:hover {
  83      z-index: 8;
  84  }
  85  
  86  .customize-control-nav_menu_item.has-notifications .menu-item-handle {
  87      border-left: 4px solid #72aee6;
  88  }
  89  
  90  .wp-customizer .menu-item-settings {
  91      max-width: 100%;
  92      overflow: hidden;
  93      z-index: 8;
  94      padding: 10px;
  95      background: #f0f0f1;
  96      border: 1px solid #8c8f94;
  97      border-top: none;
  98  }
  99  
 100  .wp-customizer .menu-item-settings .description-thin {
 101      width: 100%;
 102      height: auto;
 103      margin: 0 0 8px;
 104  }
 105  
 106  .wp-customizer .menu-item-settings input[type="text"] {
 107      width: 100%;
 108  }
 109  
 110  .wp-customizer .menu-item-settings .submitbox {
 111      margin: 0;
 112      padding: 0;
 113  }
 114  
 115  .wp-customizer .menu-item-settings .link-to-original {
 116      padding: 5px 0;
 117      border: none;
 118      font-style: normal;
 119      margin: 0;
 120      width: 100%;
 121  }
 122  
 123  .wp-customizer .menu-item .submitbox .submitdelete {
 124      float: left;
 125      margin: 6px 0 0;
 126      padding: 0;
 127      cursor: pointer;
 128  }
 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      right: 0;
 141  }
 142  
 143  .menus-move-left:before {
 144      content: "\f341";
 145      content: "\f341" / '';
 146  }
 147  
 148  .menus-move-right:before {
 149      content: "\f345";
 150      content: "\f345" / '';
 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      right: -19px;
 169      top: 2px;
 170      display: block;
 171      width: 30px;
 172      height: 38px;
 173      margin-right: 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      right: 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      left: 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-right: 0;
 311      line-height: 30px;
 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 2px 1px 0;
 331      border-radius: 50%;
 332      color: #787c82;
 333      font: normal 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  { margin-left: 0;     }
 357  .menu-item-depth-1  { margin-left: 20px;  }
 358  .menu-item-depth-2  { margin-left: 40px;  }
 359  .menu-item-depth-3  { margin-left: 60px;  }
 360  .menu-item-depth-4  { margin-left: 80px;  }
 361  .menu-item-depth-5  { margin-left: 100px; }
 362  .menu-item-depth-6  { margin-left: 120px; }
 363  .menu-item-depth-7  { margin-left: 140px; }
 364  .menu-item-depth-8  { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */
 365  .menu-item-depth-9  { margin-left: 180px; }
 366  .menu-item-depth-10 { margin-left: 200px; }
 367  .menu-item-depth-11 { margin-left: 220px; }
 368  
 369  /* @todo handle .menu-item-settings width */
 370  .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
 371  .menu-item-depth-1  > .menu-item-bar { margin-right: 20px;  }
 372  .menu-item-depth-2  > .menu-item-bar { margin-right: 40px;  }
 373  .menu-item-depth-3  > .menu-item-bar { margin-right: 60px;  }
 374  .menu-item-depth-4  > .menu-item-bar { margin-right: 80px;  }
 375  .menu-item-depth-5  > .menu-item-bar { margin-right: 100px; }
 376  .menu-item-depth-6  > .menu-item-bar { margin-right: 120px; }
 377  .menu-item-depth-7  > .menu-item-bar { margin-right: 140px; }
 378  .menu-item-depth-8  > .menu-item-bar { margin-right: 160px; }
 379  .menu-item-depth-9  > .menu-item-bar { margin-right: 180px; }
 380  .menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }
 381  .menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }
 382  
 383  /* Submenu left margin. */
 384  .menu-item-depth-0  .menu-item-transport { margin-left: 0;      }
 385  .menu-item-depth-1  .menu-item-transport { margin-left: -20px;  }
 386  .menu-item-depth-3  .menu-item-transport { margin-left: -60px;  }
 387  .menu-item-depth-4  .menu-item-transport { margin-left: -80px;  }
 388  .menu-item-depth-2  .menu-item-transport { margin-left: -40px;  }
 389  .menu-item-depth-5  .menu-item-transport { margin-left: -100px; }
 390  .menu-item-depth-6  .menu-item-transport { margin-left: -120px; }
 391  .menu-item-depth-7  .menu-item-transport { margin-left: -140px; }
 392  .menu-item-depth-8  .menu-item-transport { margin-left: -160px; }
 393  .menu-item-depth-9  .menu-item-transport { margin-left: -180px; }
 394  .menu-item-depth-10 .menu-item-transport { margin-left: -200px; }
 395  .menu-item-depth-11 .menu-item-transport { margin-left: -220px; }
 396  
 397  /* WARNING: The 20px factor is hard-coded in JS. */
 398  .reordering .menu-item-depth-0  { margin-left: 0;     }
 399  .reordering .menu-item-depth-1  { margin-left: 15px;  }
 400  .reordering .menu-item-depth-2  { margin-left: 30px;  }
 401  .reordering .menu-item-depth-3  { margin-left: 45px;  }
 402  .reordering .menu-item-depth-4  { margin-left: 60px;  }
 403  .reordering .menu-item-depth-5  { margin-left: 75px;  }
 404  .reordering .menu-item-depth-6  { margin-left: 90px;  }
 405  .reordering .menu-item-depth-7  { margin-left: 105px; }
 406  .reordering .menu-item-depth-8  { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */
 407  .reordering .menu-item-depth-9  { margin-left: 135px; }
 408  .reordering .menu-item-depth-10 { margin-left: 150px; }
 409  .reordering .menu-item-depth-11 { margin-left: 165px; }
 410  
 411  .reordering .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
 412  .reordering .menu-item-depth-1  > .menu-item-bar { margin-right: 15px;  }
 413  .reordering .menu-item-depth-2  > .menu-item-bar { margin-right: 30px;  }
 414  .reordering .menu-item-depth-3  > .menu-item-bar { margin-right: 45px;  }
 415  .reordering .menu-item-depth-4  > .menu-item-bar { margin-right: 60px;  }
 416  .reordering .menu-item-depth-5  > .menu-item-bar { margin-right: 75px;  }
 417  .reordering .menu-item-depth-6  > .menu-item-bar { margin-right: 90px;  }
 418  .reordering .menu-item-depth-7  > .menu-item-bar { margin-right: 105px; }
 419  .reordering .menu-item-depth-8  > .menu-item-bar { margin-right: 120px; }
 420  .reordering .menu-item-depth-9  > .menu-item-bar { margin-right: 135px; }
 421  .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
 422  .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
 423  
 424  .control-section-nav_menu.menu .menu-item-edit-active {
 425      margin-left: 0;
 426  }
 427  
 428  .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
 429      margin-right: 0;
 430  }
 431  
 432  .control-section-nav_menu.menu .sortable-placeholder {
 433      margin-top: 0;
 434      margin-bottom: 1px;
 435      max-width: calc(100% - 2px);
 436      float: left;
 437      display: list-item;
 438      border-color: #a7aaad;
 439  }
 440  
 441  .menu-item-transport li.customize-control {
 442      float: none;
 443  }
 444  
 445  .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
 446      margin-top: 0;
 447  }
 448  
 449  /**
 450   * Add-menu-items mode
 451   */
 452  
 453  .adding-menu-items .control-section {
 454      opacity: .4;
 455  }
 456  
 457  .adding-menu-items .control-panel.control-section,
 458  .adding-menu-items .control-section.open {
 459      opacity: 1;
 460  }
 461  
 462  .menu-item-bar .item-delete {
 463      color: #d63638;
 464      position: absolute;
 465      top: 2px;
 466      right: -19px;
 467      width: 30px;
 468      height: 38px;
 469      cursor: pointer;
 470      display: none;
 471  }
 472  
 473  .menu-item-bar .item-delete:before {
 474      content: "\f335";
 475      content: "\f335" / '';
 476      position: absolute;
 477      top: 9px;
 478      left: 5px;
 479      border-radius: 50%;
 480      font: normal 20px/1 dashicons;
 481      -webkit-font-smoothing: antialiased;
 482      -moz-osx-font-smoothing: grayscale;
 483  }
 484  
 485  .menu-item-bar .item-delete:hover,
 486  .menu-item-bar .item-delete:focus {
 487      box-shadow: none;
 488      outline: none;
 489      color: #d63638;
 490  }
 491  
 492  .adding-menu-items .menu-item-bar .item-edit {
 493      display: none;
 494  }
 495  
 496  .adding-menu-items .menu-item-bar .item-delete {
 497      display: block;
 498  }
 499  
 500  /**
 501   * Styles for menu-item addition panel
 502   */
 503  
 504  #available-menu-items.opening {
 505      overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
 506  }
 507  
 508  #available-menu-items #available-menu-items-search.open {
 509      height: 100%;
 510      border-bottom: none;
 511  }
 512  
 513  #available-menu-items .accordion-section-title {
 514      border-left: none;
 515      border-right: none;
 516      background: #fff;
 517      transition: background-color 0.15s;
 518      /* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
 519      -webkit-user-select: auto;
 520      user-select: auto;
 521  }
 522  
 523  #available-menu-items .open .accordion-section-title,
 524  #available-menu-items #available-menu-items-search .accordion-section-title {
 525      background: #f0f0f1;
 526  }
 527  
 528  /* rework the arrow indicator implementation for NVDA bug see #32715 */
 529  #available-menu-items .accordion-section-title:after {
 530      content: none !important;
 531  }
 532  
 533  #available-menu-items .accordion-section-title:hover .toggle-indicator:before,
 534  #available-menu-items .button-link:hover .toggle-indicator:before,
 535  #available-menu-items .button-link:focus .toggle-indicator:before {
 536      color: #1d2327;
 537  }
 538  
 539  #available-menu-items .open .accordion-section-title .toggle-indicator:before {
 540      content: "\f142";
 541      color: #1d2327;
 542  }
 543  
 544  #available-menu-items .available-menu-items-list {
 545      overflow-y: auto;
 546      max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
 547      background: transparent;
 548  }
 549  
 550  #available-menu-items .accordion-section-title button .toggle-indicator {
 551      display: flex;
 552      align-items: center;
 553      width: 28px;
 554      height: 35px;
 555      position: absolute;
 556      top: 5px;
 557      right: 5px;
 558      box-shadow: none;
 559      outline: none;
 560      cursor: pointer;
 561      text-align: center;
 562  }
 563  
 564  #available-menu-items .accordion-section-title .no-items,
 565  #available-menu-items .cannot-expand .accordion-section-title .spinner,
 566  #available-menu-items .cannot-expand .accordion-section-title > button:not(#available-menu-items-search button.is-visible) {
 567      display: none;
 568  }
 569  
 570  #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
 571      display: block;
 572  }
 573  
 574  #available-menu-items .cannot-expand .accordion-section-title .no-items {
 575      float: right;
 576      color: #50575e;
 577      font-weight: 400;
 578      margin-left: 5px;
 579  }
 580  
 581  #available-menu-items .accordion-section-content {
 582      max-height: 290px;
 583      margin: 0;
 584      padding: 0;
 585      position: relative;
 586      background: transparent;
 587  }
 588  
 589  #available-menu-items .accordion-section-content .available-menu-items-list {
 590      margin: 0 0 64px;
 591      padding: 1px 15px 15px;
 592  }
 593  
 594  #available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
 595      margin-bottom: 0;
 596  }
 597  
 598  #new-custom-menu-item .accordion-section-content {
 599      padding: 0 15px 15px;
 600  }
 601  
 602  #available-menu-items .menu-item-tpl {
 603      margin: 0;
 604  }
 605  
 606  #custom-menu-item-name.invalid,
 607  #custom-menu-item-url.invalid,
 608  .edit-menu-item-url.invalid,
 609  .menu-name-field.invalid,
 610  .menu-name-field.invalid:focus,
 611  #available-menu-items .new-content-item .create-item-input.invalid,
 612  #available-menu-items .new-content-item .create-item-input.invalid:focus {
 613      border: 1px solid #d63638;
 614  }
 615  
 616  #available-menu-items .menu-item-handle .item-type {
 617      padding-right: 0;
 618  }
 619  
 620  #available-menu-items .menu-item-handle .item-title {
 621      padding-left: 20px;
 622  }
 623  
 624  #available-menu-items .menu-item-handle {
 625      cursor: pointer;
 626  }
 627  
 628  #available-menu-items .menu-item-handle {
 629      box-shadow: none;
 630      margin-top: -1px;
 631  }
 632  
 633  #available-menu-items .menu-item-handle:hover {
 634      z-index: 1;
 635  }
 636  
 637  #available-menu-items .item-title h4 {
 638      padding: 0 0 5px;
 639      font-size: 14px;
 640  }
 641  
 642  #available-menu-items .item-add {
 643      position: absolute;
 644      top: 1px;
 645      left: 1px;
 646      color: #8c8f94;
 647      width: 30px;
 648      height: 38px;
 649      box-shadow: none;
 650      outline: none;
 651      cursor: pointer;
 652      text-align: center;
 653  }
 654  
 655  #available-menu-items .menu-item-handle .item-add:focus {
 656      color: #1d2327;
 657  }
 658  
 659  #available-menu-items .item-add:before {
 660      content: "\f543";
 661      content: "\f543" / '';
 662      position: relative;
 663      left: 2px;
 664      top: 3px;
 665      display: inline-block;
 666      height: 20px;
 667      border-radius: 50%;
 668      font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
 669  }
 670  
 671  #available-menu-items .menu-item-handle.item-added .item-type,
 672  #available-menu-items .menu-item-handle.item-added .item-title,
 673  #available-menu-items .menu-item-handle.item-added:hover .item-add,
 674  #available-menu-items .menu-item-handle.item-added .item-add:focus {
 675      color: #646970;
 676  }
 677  
 678  #available-menu-items .menu-item-handle.item-added .item-add:before {
 679      content: "\f147";
 680      content: "\f147" / '';
 681  }
 682  
 683  #available-menu-items .accordion-section-title.loading .spinner,
 684  #available-menu-items-search.loading .accordion-section-title .spinner {
 685      visibility: visible;
 686      margin: 0 20px;
 687  }
 688  
 689  #available-menu-items-search .spinner {
 690      position: absolute;
 691      bottom: 24px; /* 13 container padding +1 input margin +10 ( ( 40 input height - 20 spinner height ) / 2 ) */
 692      right: 21px;
 693      margin: 0 !important;
 694  }
 695  
 696  /* search results list */
 697  #available-menu-items #available-menu-items-search .accordion-section-content {
 698      position: absolute;
 699      left: 0;
 700      top: 83px; /* below title div / search input (75 + 8 for 40px input) */
 701      bottom: 0; /* 100% height that still triggers lazy load */
 702      max-height: none;
 703      width: 100%;
 704      padding: 1px 15px 15px;
 705      box-sizing: border-box;
 706  }
 707  
 708  #available-menu-items-search .nothing-found {
 709      /* Compensate the 1px top padding of the container. */
 710      margin-top: -1px;
 711  }
 712  
 713  #available-menu-items-search .accordion-section-title:after {
 714      display: none;
 715  }
 716  
 717  #available-menu-items-search .accordion-section-content:empty {
 718      min-height: 0;
 719      padding: 0;
 720  }
 721  
 722  #available-menu-items-search.loading .accordion-section-content div {
 723      opacity: .5;
 724  }
 725  
 726  #available-menu-items-search.loading.loading-more .accordion-section-content div {
 727      opacity: 1;
 728  }
 729  
 730  @media (prefers-reduced-motion: no-preference) {
 731      #customize-preview {
 732          transition: all 0.2s;
 733      }
 734  }
 735  
 736  body.adding-menu-items #available-menu-items {
 737      left: 0;
 738      visibility: visible;
 739  }
 740  
 741  body.adding-menu-items .wp-full-overlay-main {
 742      left: 300px;
 743  }
 744  
 745  body.adding-menu-items #customize-preview {
 746      opacity: 0.4;
 747  }
 748  
 749  body.adding-menu-items #customize-preview iframe {
 750      pointer-events: none;
 751  }
 752  
 753  .menu-item-handle .spinner {
 754      display: none;
 755      float: left;
 756      margin: 0 8px 0 0;
 757  }
 758  
 759  .nav-menu-inserted-item-loading .spinner {
 760      display: block;
 761  }
 762  
 763  .nav-menu-inserted-item-loading .menu-item-handle .item-type {
 764      padding: 0 0 0 8px;
 765  }
 766  
 767  .nav-menu-inserted-item-loading .menu-item-handle,
 768  .added-menu-item .menu-item-handle.loading {
 769      padding: 10px 15px 10px 8px;
 770      cursor: default;
 771      opacity: .5;
 772      background: #fff;
 773      color: #787c82;
 774  }
 775  
 776  .added-menu-item .menu-item-handle {
 777      transition-property: opacity, background, color;
 778      transition-duration: 1.25s;
 779      transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
 780  }
 781  
 782  /* Add/delete Menus */
 783  
 784  #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
 785      border-bottom-color: #dcdcde;
 786  }
 787  
 788  /* @todo update selector */
 789  #accordion-section-add_menu {
 790      margin: 15px 12px;
 791  }
 792  
 793  #accordion-section-add_menu h3 {
 794      text-align: right;
 795  }
 796  
 797  #accordion-section-add_menu h3,
 798  #accordion-section-add_menu .customize-add-menu-button {
 799      margin: 0;
 800  }
 801  
 802  #accordion-section-add_menu .customize-add-menu-button {
 803      font-weight: 400;
 804  }
 805  
 806  #create-new-menu-submit {
 807      float: right;
 808      margin: 0 0 12px;
 809  }
 810  
 811  .menu-delete-item {
 812      float: left;
 813      padding: 1em 0;
 814      width: 100%;
 815  }
 816  
 817  .assigned-menu-locations-title p {
 818      margin: 0 0 8px;
 819  }
 820  
 821  li.assigned-to-menu-location .menu-delete-item {
 822      display: none;
 823  }
 824  
 825  li.assigned-to-menu-location .add-new-menu-item {
 826      margin-bottom: 1em;
 827  }
 828  
 829  .menu-item-handle {
 830      margin-top: -1px;
 831  }
 832  .ui-sortable-disabled .menu-item-handle {
 833      cursor: default;
 834  }
 835  
 836  .menu-item-handle:hover {
 837      position: relative;
 838      z-index: 10;
 839      color: var(--wp-admin-theme-color);
 840  }
 841  
 842  .menu-item-handle:hover .item-type,
 843  .menu-item-handle:hover .item-edit,
 844  #available-menu-items .menu-item-handle:hover .item-add {
 845      color: var(--wp-admin-theme-color);
 846  }
 847  
 848  .menu-item-edit-active .menu-item-handle {
 849      border-color: #8c8f94;
 850      border-bottom: none;
 851  }
 852  
 853  .customize-control-nav_menu_item {
 854      margin-bottom: 0;
 855  }
 856  
 857  .customize-control-nav_menu .new-menu-item-invitation {
 858      margin-top: 0;
 859      margin-bottom: 0;
 860  }
 861  
 862  .customize-control-nav_menu .customize-control-nav_menu-buttons {
 863      display: flex;
 864      flex-direction: row-reverse;
 865      align-items: center;
 866      gap: 8px;
 867      margin-top: 12px;
 868  }
 869  
 870  /**
 871   * box-shadows
 872   */
 873  
 874  .wp-customizer .menu-item .submitbox .submitdelete:focus,
 875  .customize-screen-options-toggle:focus:before,
 876  #customize-controls .customize-info .customize-help-toggle:focus:before,
 877  .wp-customizer button:focus .toggle-indicator:before,
 878  .menu-delete:focus,
 879  .menu-item-bar .item-delete:focus:before,
 880  #available-menu-items .item-add:focus:before {
 881      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 882      /* Only visible in Windows High Contrast mode */
 883      outline: 2px solid transparent;
 884  }
 885  
 886  
 887  @media screen and (max-width: 782px) {
 888      #available-menu-items #available-menu-items-search .accordion-section-content {
 889          top: 71px; /* 63 + 8 for 40px input */
 890      }
 891  }
 892  
 893  @media screen and (max-width: 640px) {
 894      #available-menu-items #available-menu-items-search .accordion-section-content {
 895          top: 154px; /* 146 + 8 for 40px input */
 896      }
 897  }