[Summary view] [Print] [Text view]

   1  body {
   2      overflow: hidden;
   3      -webkit-text-size-adjust: 100%;
   4  }
   5  
   6  .customize-controls-close,
   7  .widget-control-actions a {
   8      text-decoration: none;
   9  }
  10  
  11  #customize-controls h3 {
  12      font-size: 14px;
  13  }
  14  
  15  #customize-controls img {
  16      max-width: 100%;
  17  }
  18  
  19  #customize-controls .submit {
  20      text-align: center;
  21  }
  22  
  23  #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
  24      background-color: rgba(0, 0, 0, 0.7);
  25      padding: 25px;
  26  }
  27  
  28  #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
  29      margin-left: auto;
  30      margin-right: auto;
  31      max-width: 366px;
  32      min-height: 64px;
  33      width: auto;
  34      padding: 25px;
  35      position: relative;
  36      background: #fff;
  37      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  38      line-height: 1.5;
  39      overflow-y: auto;
  40      text-align: left;
  41      top: calc( 50% - 100px );
  42  }
  43  
  44  #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message.has-avatar {
  45      padding-left: 109px;
  46  }
  47  
  48  #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing {
  49      margin-top: 0;
  50  }
  51  #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
  52      margin-bottom: 0;
  53  }
  54  
  55  .customize-changeset-locked-avatar {
  56      width: 64px;
  57      position: absolute;
  58      left: 25px;
  59      top: 25px;
  60  }
  61  
  62  .wp-core-ui.wp-customizer .customize-changeset-locked-message a.button {
  63      margin-right: 10px;
  64      margin-top: 0;
  65  }
  66  
  67  #customize-controls .description {
  68      color: #50575e;
  69  }
  70  
  71  #customize-save-button-wrapper {
  72      float: right;
  73      margin-top: 9px;
  74  }
  75  
  76  body:not(.ready) #customize-save-button-wrapper .save {
  77      visibility: hidden;
  78  }
  79  #customize-save-button-wrapper .save {
  80      float: left;
  81      border-radius: 3px;
  82      box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
  83      margin-top: 0;
  84  }
  85  
  86  #customize-save-button-wrapper .save:focus, #publish-settings:focus {
  87      box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */
  88  }
  89  
  90  #customize-save-button-wrapper .save.has-next-sibling {
  91      border-radius: 3px 0 0 3px;
  92  }
  93  
  94  #customize-sidebar-outer-content {
  95      position: absolute;
  96      top: 0;
  97      bottom: 0;
  98      left: 0;
  99      visibility: hidden;
 100      overflow-x: hidden;
 101      overflow-y: auto;
 102      width: 100%;
 103      margin: 0;
 104      z-index: -1;
 105      background: #f0f0f1;
 106      transition: left .18s;
 107      border-right: 1px solid #dcdcde;
 108      border-left: 1px solid #dcdcde;
 109      height: 100%;
 110  }
 111  
 112  @media (prefers-reduced-motion: reduce) {
 113      #customize-sidebar-outer-content {
 114          transition: none;
 115      }
 116  }
 117  
 118  #customize-theme-controls .control-section-outer {
 119      display: none !important;
 120  }
 121  
 122  #customize-outer-theme-controls .accordion-section-content {
 123      padding: 12px;
 124  }
 125  
 126  #customize-outer-theme-controls .accordion-section-content.open {
 127      display: block;
 128  }
 129  
 130  .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
 131      visibility: visible;
 132      left: 100%;
 133      transition: left .18s;
 134  }
 135  
 136  @media (prefers-reduced-motion: reduce) {
 137      .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
 138          transition: none;
 139      }
 140  }
 141  
 142  .customize-outer-pane-parent {
 143      margin: 0;
 144  }
 145  
 146  .outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
 147      left: 300px;
 148      opacity: 0.4;
 149  }
 150  
 151  .outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
 152  .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
 153  .adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
 154  .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
 155  .adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
 156  .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
 157      left: 64%;
 158  }
 159  
 160  #customize-outer-theme-controls li.notice {
 161      padding-top: 8px;
 162      padding-bottom: 8px;
 163      margin-left: 0;
 164      margin-bottom: 10px;
 165  }
 166  
 167  #publish-settings {
 168      text-indent: 0;
 169      border-radius: 0 3px 3px 0;
 170      padding-left: 0;
 171      padding-right: 0;
 172      box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
 173      font-size: 14px;
 174      width: 30px;
 175      float: left;
 176      transform: none;
 177      margin-top: 0;
 178      line-height: 2;
 179  }
 180  
 181  body:not(.ready) #publish-settings,
 182  body.trashing #customize-save-button-wrapper .save,
 183  body.trashing #publish-settings {
 184      display: none;
 185  }
 186  
 187  #customize-header-actions .spinner {
 188      margin-top: 13px;
 189      margin-right: 4px;
 190  }
 191  
 192  .saving #customize-header-actions .spinner,
 193  .trashing #customize-header-actions .spinner {
 194      visibility: visible;
 195  }
 196  
 197  #customize-header-actions {
 198      border-bottom: 1px solid #dcdcde;
 199  }
 200  
 201  #customize-controls .wp-full-overlay-sidebar-content {
 202      overflow-y: auto;
 203      overflow-x: hidden;
 204  }
 205  
 206  .outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
 207      background: #f0f0f1;
 208  }
 209  
 210  #customize-controls .customize-info {
 211      border: none;
 212      border-bottom: 1px solid #dcdcde;
 213      margin-bottom: 15px;
 214  }
 215  
 216  #customize-control-changeset_status .customize-inside-control-row,
 217  #customize-control-changeset_preview_link input {
 218      background-color: #fff;
 219      border-bottom: 1px solid #dcdcde;
 220      box-sizing: content-box;
 221      width: 100%;
 222      margin-left: -12px;
 223      padding-left: 12px;
 224      padding-right: 12px;
 225  }
 226  
 227  #customize-control-trash_changeset {
 228      margin-top: 20px;
 229  }
 230  #customize-control-trash_changeset .button-link {
 231      position: relative;
 232      padding-left: 24px;
 233      display: inline-block;
 234  }
 235  #customize-control-trash_changeset .button-link:before {
 236      content: "\f182";
 237      font: normal 22px dashicons;
 238      text-decoration: none;
 239      position: absolute;
 240      left: 0;
 241      top: -2px;
 242  }
 243  
 244  #customize-controls .date-input:invalid {
 245      border-color: #d63638;
 246  }
 247  
 248  #customize-control-changeset_status .customize-inside-control-row {
 249      padding-top: 10px;
 250      padding-bottom: 10px;
 251      font-weight: 500;
 252  }
 253  
 254  #customize-control-changeset_status .customize-inside-control-row:first-of-type {
 255      border-top: 1px solid #dcdcde;
 256  }
 257  
 258  #customize-control-changeset_status .customize-control-title {
 259      margin-bottom: 6px;
 260  }
 261  
 262  #customize-control-changeset_status input {
 263      margin-left: 0;
 264  }
 265  
 266  #customize-control-changeset_preview_link {
 267      position: relative;
 268      display: block;
 269  }
 270  
 271  .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
 272      margin: 0;
 273      position: absolute;
 274      bottom: 9px;
 275      right: 0;
 276  }
 277  
 278  .preview-link-wrapper {
 279      position: relative;
 280  }
 281  
 282  .customize-copy-preview-link:before,
 283  .customize-copy-preview-link:after {
 284      content: "";
 285      height: 28px;
 286      position: absolute;
 287      background: #fff;
 288      top: -1px;
 289  }
 290  
 291  .customize-copy-preview-link:before {
 292      left: -10px;
 293      width: 9px;
 294      opacity: 0.75;
 295  }
 296  
 297  .customize-copy-preview-link:after {
 298      left: -5px;
 299      width: 4px;
 300      opacity: 0.8;
 301  }
 302  
 303  #customize-control-changeset_preview_link input {
 304      line-height: 2.85714286; /* 40px */
 305      border-top: 1px solid #dcdcde;
 306      border-left: none;
 307      border-right: none;
 308      text-indent: -999px;
 309      color: #fff;
 310      /* Only necessary for IE11 */
 311      min-height: 40px;
 312  }
 313  
 314  #customize-control-changeset_preview_link label {
 315      position: relative;
 316      display: block;
 317  }
 318  
 319  #customize-control-changeset_preview_link a {
 320      display: inline-block;
 321      position: absolute;
 322      white-space: nowrap;
 323      overflow: hidden;
 324      width: 90%;
 325      bottom: 14px;
 326      font-size: 14px;
 327      text-decoration: none;
 328  }
 329  
 330  #customize-control-changeset_preview_link a.disabled,
 331  #customize-control-changeset_preview_link a.disabled:active,
 332  #customize-control-changeset_preview_link a.disabled:focus,
 333  #customize-control-changeset_preview_link a.disabled:visited {
 334      color: #000;
 335      opacity: 0.4;
 336      cursor: default;
 337      outline: none;
 338      box-shadow: none;
 339  }
 340  
 341  #sub-accordion-section-publish_settings .customize-section-description-container {
 342      display: none;
 343  }
 344  
 345  #customize-controls .customize-info.section-meta {
 346      margin-bottom: 15px;
 347  }
 348  
 349  .customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
 350      margin-top: 10px;
 351  }
 352  
 353  .customize-control.customize-control-date_time .date-time-fields .date-input.day {
 354      margin-right: 0;
 355  }
 356  
 357  .date-time-fields .date-input.month {
 358      width: auto;
 359      margin: 0;
 360  }
 361  
 362  .date-time-fields .date-input.day,
 363  .date-time-fields .date-input.hour,
 364  .date-time-fields .date-input.minute {
 365      width: 46px;
 366  }
 367  
 368  .date-time-fields .date-input.year {
 369      width: 65px;
 370  }
 371  
 372  .date-time-fields .date-input.meridian {
 373      width: auto;
 374      margin: 0;
 375  }
 376  
 377  .date-time-fields .time-row {
 378      margin-top: 12px;
 379  }
 380  
 381  #customize-control-changeset_preview_link {
 382      margin-top: 6px;
 383  }
 384  
 385  #customize-control-changeset_status {
 386      margin-bottom: 0;
 387      padding-bottom: 0;
 388  }
 389  
 390  #customize-control-changeset_scheduled_date {
 391      box-sizing: content-box;
 392      width: 100%;
 393      margin-left: -12px;
 394      padding: 12px;
 395      background: #fff;
 396      border-bottom: 1px solid #dcdcde;
 397      margin-bottom: 0;
 398  }
 399  
 400  #customize-control-site_icon .customize-control-description,
 401  #customize-control-changeset_scheduled_date .customize-control-description {
 402      font-style: normal;
 403  }
 404  
 405  #customize-controls .customize-info.is-in-view,
 406  #customize-controls .customize-section-title.is-in-view {
 407      position: absolute;
 408      z-index: 9;
 409      width: 100%;
 410      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 411  }
 412  
 413  #customize-controls .customize-section-title.is-in-view {
 414      margin-top: 0;
 415  }
 416  
 417  #customize-controls .customize-info.is-in-view + .accordion-section {
 418      margin-top: 15px;
 419  }
 420  
 421  #customize-controls .customize-info.is-sticky,
 422  #customize-controls .customize-section-title.is-sticky {
 423      position: fixed;
 424      top: 46px;
 425  }
 426  
 427  #customize-controls .customize-info .accordion-section-title {
 428      background: #fff;
 429      color: #50575e;
 430      border-left: none;
 431      border-right: none;
 432      border-bottom: none;
 433      cursor: default;
 434      padding: 10px 10px 11px 14px;
 435  }
 436  
 437  #customize-controls .customize-info.open .accordion-section-title:after,
 438  #customize-controls .customize-info .accordion-section-title:hover:after,
 439  #customize-controls .customize-info .accordion-section-title:focus:after {
 440      color: #2c3338;
 441  }
 442  
 443  #customize-controls .customize-info .accordion-section-title:after {
 444      display: none;
 445  }
 446  
 447  #customize-controls .customize-info .preview-notice {
 448      font-size: 13px;
 449      line-height: 1.9;
 450      margin: 0;
 451      font-weight: 400;
 452      color: #50575e;
 453  }
 454  
 455  #customize-controls .customize-pane-child .customize-section-title h3,
 456  #customize-controls .customize-pane-child h3.customize-section-title,
 457  #customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
 458  #customize-outer-theme-controls .customize-pane-child h3.customize-section-title,
 459  #customize-controls .customize-info .panel-title {
 460      font-size: 20px;
 461      font-weight: 200;
 462      line-height: 26px;
 463      display: block;
 464      overflow: hidden;
 465      white-space: nowrap;
 466      text-overflow: ellipsis;
 467  }
 468  
 469  #customize-controls .customize-section-title span.customize-action {
 470      overflow: hidden;
 471      white-space: nowrap;
 472      text-overflow: ellipsis;
 473  }
 474  
 475  #customize-controls .customize-info .customize-help-toggle {
 476      position: absolute;
 477      top: 4px;
 478      right: 1px;
 479      padding: 20px 20px 10px 10px;
 480      width: 20px;
 481      height: 20px;
 482      cursor: pointer;
 483      box-shadow: none;
 484      background: transparent;
 485      color: #50575e;
 486      border: none;
 487  }
 488  
 489  #customize-controls .customize-info .customize-help-toggle:before {
 490      position: absolute;
 491      top: 5px;
 492      left: 6px;
 493  }
 494  
 495  #customize-controls .customize-info.open .customize-help-toggle,
 496  #customize-controls .customize-info .customize-help-toggle:focus,
 497  #customize-controls .customize-info .customize-help-toggle:hover {
 498      color: #2271b1;
 499  }
 500  
 501  #customize-controls .customize-info .customize-panel-description,
 502  #customize-controls .customize-info .customize-section-description,
 503  #customize-outer-theme-controls .customize-info .customize-section-description,
 504  #customize-controls .no-widget-areas-rendered-notice {
 505      color: #50575e;
 506      display: none;
 507      background: #fff;
 508      padding: 12px 15px;
 509      border-top: 1px solid #dcdcde;
 510  }
 511  
 512  #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 513      border-top: none;
 514  }
 515  .no-widget-areas-rendered-notice {
 516      font-style: italic;
 517  }
 518  .no-widget-areas-rendered-notice p:first-child {
 519      margin-top: 0;
 520  }
 521  .no-widget-areas-rendered-notice p:last-child {
 522      margin-bottom: 0;
 523  }
 524  
 525  #customize-controls .customize-info .customize-section-description {
 526      margin-bottom: 15px;
 527  }
 528  
 529  #customize-controls .customize-info .customize-panel-description p:first-child,
 530  #customize-controls .customize-info .customize-section-description p:first-child {
 531      margin-top: 0;
 532  }
 533  
 534  #customize-controls .customize-info .customize-panel-description p:last-child,
 535  #customize-controls .customize-info .customize-section-description p:last-child {
 536      margin-bottom: 0;
 537  }
 538  
 539  #customize-controls .current-panel .control-section > h3.accordion-section-title {
 540      padding-right: 30px;
 541  }
 542  
 543  #customize-theme-controls .control-section,
 544  #customize-outer-theme-controls .control-section {
 545      border: none;
 546  }
 547  
 548  #customize-theme-controls .accordion-section-title,
 549  #customize-outer-theme-controls .accordion-section-title {
 550      color: #50575e;
 551      background-color: #fff;
 552      border-bottom: 1px solid #dcdcde;
 553      border-left: 4px solid #fff;
 554      transition:
 555          .15s color ease-in-out,
 556          .15s background-color ease-in-out,
 557          .15s border-color ease-in-out;
 558  }
 559  
 560  .accordion-section-title:has(button.accordion-trigger),
 561  #customize-controls .current-panel .control-section > h3.accordion-section-title:has(button.accordion-trigger) {
 562      padding: 0;
 563  }
 564  
 565  .accordion-section-title button.accordion-trigger {
 566      all: unset;
 567      width: 100%;
 568      padding: 10px 30px 11px 14px;
 569      display: flex;
 570      align-items: center;
 571      box-sizing: border-box;
 572  }
 573  
 574  .accordion-section-title button.accordion-trigger:has(.menu-in-location) {
 575      display: block;
 576  }
 577  
 578  @media (prefers-reduced-motion: reduce) {
 579      #customize-theme-controls .accordion-section-title,
 580      #customize-outer-theme-controls .accordion-section-title {
 581          transition: none;
 582      }
 583  }
 584  
 585  #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
 586      color: #50575e;
 587      background-color: #fff;
 588      border-left: 4px solid #fff;
 589  }
 590  
 591  #customize-theme-controls .accordion-section-title:after,
 592  #customize-outer-theme-controls .accordion-section-title:after {
 593      content: "\f345";
 594      color: #a7aaad;
 595      pointer-events: none;
 596  }
 597  
 598  #customize-theme-controls .accordion-section-content,
 599  #customize-outer-theme-controls .accordion-section-content {
 600      color: #50575e;
 601      background: transparent;
 602  }
 603  
 604  #customize-controls .control-section:hover > .accordion-section-title,
 605  #customize-controls .control-section .accordion-section-title button:hover,
 606  #customize-controls .control-section.open .accordion-section-title,
 607  #customize-controls .control-section .accordion-section-title button:focus {
 608      color: #2271b1;
 609      background: #f6f7f7;
 610      border-left-color: #2271b1;
 611  }
 612  
 613  #accordion-section-themes + .control-section {
 614      border-top: 1px solid #dcdcde;
 615  }
 616  
 617  .js .control-section:hover .accordion-section-title,
 618  .js .control-section .accordion-section-title:hover,
 619  .js .control-section.open .accordion-section-title,
 620  .js .control-section .accordion-section-title:focus {
 621      background: #f6f7f7;
 622  }
 623  
 624  #customize-theme-controls .control-section:hover > .accordion-section-title:after,
 625  #customize-theme-controls .control-section .accordion-section-title:hover:after,
 626  #customize-theme-controls .control-section.open .accordion-section-title:after,
 627  #customize-theme-controls .control-section .accordion-section-title:focus:after,
 628  #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
 629  #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
 630  #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
 631  #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
 632      color: #2271b1;
 633  }
 634  
 635  #customize-theme-controls .control-section.open {
 636      border-bottom: 1px solid #f0f0f1;
 637  }
 638  
 639  #customize-theme-controls .control-section.open .accordion-section-title,
 640  #customize-outer-theme-controls .control-section.open .accordion-section-title {
 641      border-bottom-color: #f0f0f1 !important;
 642  }
 643  
 644  #customize-theme-controls .control-section:last-of-type.open,
 645  #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 646      border-bottom-color: #dcdcde;
 647  }
 648  
 649  #customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
 650  #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
 651  #customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
 652      border-top: 1px solid #dcdcde;
 653  }
 654  
 655  #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
 656      border-top: none;
 657  }
 658  
 659  #customize-theme-controls > ul {
 660      margin: 0;
 661  }
 662  
 663  #customize-theme-controls .accordion-section-content {
 664      position: absolute;
 665      top: 0;
 666      left: 100%;
 667      width: 100%;
 668      margin: 0;
 669      padding: 12px;
 670      box-sizing: border-box;
 671  }
 672  
 673  #customize-info,
 674  #customize-theme-controls .customize-pane-parent,
 675  #customize-theme-controls .customize-pane-child {
 676      overflow: visible;
 677      width: 100%;
 678      margin: 0;
 679      padding: 0;
 680      box-sizing: border-box;
 681      transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
 682  }
 683  
 684  @media (prefers-reduced-motion: reduce) {
 685      #customize-info,
 686      #customize-theme-controls .customize-pane-parent,
 687      #customize-theme-controls .customize-pane-child {
 688          transition: none;
 689      }
 690  }
 691  
 692  #customize-theme-controls .customize-pane-child.skip-transition {
 693      transition: none;
 694  }
 695  
 696  #customize-info,
 697  #customize-theme-controls .customize-pane-parent {
 698      position: relative;
 699      visibility: visible;
 700      height: auto;
 701      max-height: none;
 702      overflow: auto;
 703      transform: none;
 704  }
 705  
 706  #customize-theme-controls .customize-pane-child {
 707      position: absolute;
 708      top: 0;
 709      left: 0;
 710      visibility: hidden;
 711      height: 0;
 712      max-height: none;
 713      overflow: hidden;
 714      transform: translateX(100%);
 715  }
 716  
 717  #customize-theme-controls .customize-pane-child.open,
 718  #customize-theme-controls .customize-pane-child.current-panel {
 719      transform: none;
 720  }
 721  
 722  .section-open #customize-theme-controls .customize-pane-parent,
 723  .in-sub-panel #customize-theme-controls .customize-pane-parent,
 724  .section-open #customize-info,
 725  .in-sub-panel #customize-info,
 726  .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
 727      visibility: hidden;
 728      height: 0;
 729      overflow: hidden;
 730      transform: translateX(-100%);
 731  }
 732  
 733  .section-open #customize-theme-controls .customize-pane-parent.busy,
 734  .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
 735  .section-open #customize-info.busy,
 736  .in-sub-panel #customize-info.busy,
 737  .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
 738  #customize-theme-controls .customize-pane-child.open,
 739  #customize-theme-controls .customize-pane-child.current-panel,
 740  #customize-theme-controls .customize-pane-child.busy {
 741      visibility: visible;
 742      height: auto;
 743      overflow: auto;
 744  }
 745  
 746  #customize-theme-controls .customize-pane-child.accordion-section-content,
 747  #customize-theme-controls .customize-pane-child.accordion-sub-container {
 748      display: block;
 749      overflow-x: hidden;
 750  }
 751  
 752  #customize-theme-controls .customize-pane-child.accordion-section-content {
 753      padding: 12px;
 754  }
 755  
 756  #customize-theme-controls .customize-pane-child.menu li {
 757      position: static;
 758  }
 759  
 760  .customize-section-description-container,
 761  .control-section-nav_menu .customize-section-description-container,
 762  .control-section-new_menu .customize-section-description-container {
 763      margin-bottom: 15px;
 764  }
 765  
 766  .control-section-nav_menu .customize-control,
 767  .control-section-new_menu .customize-control {
 768      /* Override default `margin-bottom` for `.customize-control` */
 769      margin-bottom: 0;
 770  }
 771  
 772  .customize-section-title {
 773      margin: -12px -12px 0;
 774      border-bottom: 1px solid #dcdcde;
 775      background: #fff;
 776  }
 777  
 778  div.customize-section-description {
 779      margin-top: 22px;
 780  }
 781  
 782  .customize-info div.customize-section-description {
 783      margin-top: 0;
 784  }
 785  
 786  div.customize-section-description p:first-child {
 787      margin-top: 0;
 788  }
 789  
 790  div.customize-section-description p:last-child {
 791      margin-bottom: 0;
 792  }
 793  
 794  #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 795      border-bottom: 1px solid #dcdcde;
 796      padding: 12px;
 797  }
 798  
 799  .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 800      padding: 12px 12px 13px;
 801  }
 802  
 803  .customize-section-title h3,
 804  h3.customize-section-title {
 805      padding: 10px 10px 12px 14px;
 806      margin: 0;
 807      line-height: 21px;
 808      color: #50575e;
 809  }
 810  
 811  .accordion-sub-container.control-panel-content {
 812      display: none;
 813      position: absolute;
 814      top: 0;
 815      width: 100%;
 816  }
 817  
 818  .accordion-sub-container.control-panel-content.busy {
 819      display: block;
 820  }
 821  
 822  .current-panel .accordion-sub-container.control-panel-content {
 823      width: 100%;
 824  }
 825  
 826  .customize-controls-close {
 827      display: block;
 828      position: absolute;
 829      top: 0;
 830      left: 0;
 831      width: 45px;
 832      height: 41px;
 833      padding: 0 2px 0 0;
 834      background: #f0f0f1;
 835      border: none;
 836      border-top: 4px solid #f0f0f1;
 837      border-right: 1px solid #dcdcde;
 838      color: #3c434a;
 839      text-align: left;
 840      cursor: pointer;
 841      transition:
 842          color .15s ease-in-out,
 843          border-color .15s ease-in-out,
 844          background .15s ease-in-out;
 845      box-sizing: content-box;
 846  }
 847  
 848  .customize-panel-back,
 849  .customize-section-back {
 850      display: block;
 851      float: left;
 852      width: 48px;
 853      height: 71px;
 854      padding: 0 24px 0 0;
 855      margin: 0;
 856      background: #fff;
 857      border: none;
 858      border-right: 1px solid #dcdcde;
 859      border-left: 4px solid #fff;
 860      box-shadow: none;
 861      cursor: pointer;
 862      transition:
 863          color .15s ease-in-out,
 864          border-color .15s ease-in-out,
 865          background .15s ease-in-out;
 866  }
 867  
 868  .customize-section-back {
 869      height: 74px;
 870  }
 871  
 872  .ios .customize-panel-back {
 873      display: none;
 874  }
 875  
 876  .ios .expanded.in-sub-panel .customize-panel-back {
 877      display: block;
 878  }
 879  
 880  #customize-controls .panel-meta.customize-info .accordion-section-title {
 881      margin-left: 48px;
 882      border-left: none;
 883  }
 884  
 885  #customize-controls .panel-meta.customize-info .accordion-section-title:hover,
 886  #customize-controls .cannot-expand:hover .accordion-section-title {
 887      background: #fff;
 888      color: #50575e;
 889      border-left-color: #fff;
 890  }
 891  
 892  .customize-controls-close:focus,
 893  .customize-controls-close:hover,
 894  .customize-controls-preview-toggle:focus,
 895  .customize-controls-preview-toggle:hover {
 896      background: #fff;
 897      color: #2271b1;
 898      border-top-color: #2271b1;
 899      box-shadow: none;
 900      /* Only visible in Windows High Contrast mode */
 901      outline: 1px solid transparent;
 902  }
 903  
 904  #customize-theme-controls .accordion-section-title:focus .customize-action {
 905      /* Only visible in Windows High Contrast mode */
 906      outline: 1px solid transparent;
 907      outline-offset: 1px;
 908  }
 909  
 910  .customize-panel-back:hover,
 911  .customize-panel-back:focus,
 912  .customize-section-back:hover,
 913  .customize-section-back:focus {
 914      color: #2271b1;
 915      background: #f6f7f7;
 916      border-left-color: #2271b1;
 917      box-shadow: none;
 918      /* Only visible in Windows High Contrast mode */
 919      outline: 2px solid transparent;
 920      outline-offset: -2px;
 921  }
 922  
 923  .customize-controls-close:before {
 924      font: normal 22px/45px dashicons;
 925      content: "\f335";
 926      position: relative;
 927      top: -3px;
 928      left: 13px;
 929  }
 930  
 931  .customize-panel-back:before,
 932  .customize-section-back:before {
 933      font: normal 20px/72px dashicons;
 934      content: "\f341";
 935      position: relative;
 936      left: 9px;
 937  }
 938  
 939  .wp-full-overlay-sidebar .wp-full-overlay-header {
 940      background-color: #f0f0f1;
 941      transition: padding ease-in-out .18s;
 942  }
 943  
 944  .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 945      padding-left: 62px;
 946  }
 947  
 948  p.customize-section-description {
 949      font-style: normal;
 950      margin-top: 22px;
 951      margin-bottom: 0;
 952  }
 953  
 954  .customize-section-description ul {
 955      margin-left: 1em;
 956  }
 957  
 958  .customize-section-description ul > li {
 959      list-style: disc;
 960  }
 961  
 962  .section-description-buttons {
 963      text-align: right;
 964  }
 965  
 966  .customize-control {
 967      width: 100%;
 968      float: left;
 969      clear: both;
 970      margin-bottom: 12px;
 971  }
 972  
 973  .customize-control input[type="text"],
 974  .customize-control input[type="password"],
 975  .customize-control input[type="email"],
 976  .customize-control input[type="number"],
 977  .customize-control input[type="search"],
 978  .customize-control input[type="tel"],
 979  .customize-control input[type="url"],
 980  .customize-control input[type="range"] {
 981      width: 100%;
 982      margin: 0;
 983  }
 984  
 985  .customize-control-hidden {
 986      margin: 0;
 987  }
 988  
 989  .customize-control-textarea textarea {
 990      width: 100%;
 991      resize: vertical;
 992  }
 993  
 994  .customize-control select {
 995      width: 100%;
 996  }
 997  
 998  .customize-control select[multiple] {
 999      height: auto;
1000  }
1001  
1002  .customize-control-title {
1003      display: block;
1004      font-size: 14px;
1005      line-height: 1.75;
1006      font-weight: 600;
1007      margin-bottom: 4px;
1008  }
1009  
1010  .customize-control-description {
1011      display: block;
1012      font-style: italic;
1013      line-height: 1.4;
1014      margin-top: 0;
1015      margin-bottom: 5px;
1016  }
1017  
1018  .customize-section-description a.external-link:after {
1019      font: 16px/11px dashicons;
1020      content: "\f504";
1021      top: 3px;
1022      position: relative;
1023      padding-left: 3px;
1024      display: inline-block;
1025      text-decoration: none;
1026  }
1027  
1028  .customize-control-color .color-picker,
1029  .customize-control-upload div {
1030      line-height: 28px;
1031  }
1032  
1033  .customize-control .customize-inside-control-row {
1034      line-height: 1.6;
1035      display: block;
1036      margin-left: 24px;
1037      padding-top: 6px;
1038      padding-bottom: 6px;
1039  }
1040  
1041  .customize-control-radio input,
1042  .customize-control-checkbox input,
1043  .customize-control-nav_menu_auto_add input {
1044      margin-right: 4px;
1045      margin-left: -24px;
1046  }
1047  
1048  .customize-control-radio {
1049      padding: 5px 0 10px;
1050  }
1051  
1052  .customize-control-radio .customize-control-title {
1053      margin-bottom: 0;
1054      line-height: 1.6;
1055  }
1056  
1057  .customize-control-radio .customize-control-title + .customize-control-description {
1058      margin-top: 7px;
1059  }
1060  
1061  .customize-control-radio label,
1062  .customize-control-checkbox label {
1063      vertical-align: top;
1064  }
1065  
1066  .customize-control .attachment-thumb.type-icon {
1067      float: left;
1068      margin: 10px;
1069      width: auto;
1070  }
1071  
1072  .customize-control .attachment-title {
1073      font-weight: 600;
1074      margin: 0;
1075      padding: 5px 10px;
1076  }
1077  
1078  .customize-control .attachment-meta {
1079      white-space: nowrap;
1080      overflow: hidden;
1081      text-overflow: ellipsis;
1082      margin: 0;
1083      padding: 0 10px;
1084  }
1085  
1086  .customize-control .attachment-meta-title {
1087      padding-top: 7px;
1088  }
1089  
1090  /* Remove descender space. */
1091  .customize-control .thumbnail-image,
1092  .customize-control-header .current,
1093  .customize-control .wp-media-wrapper.wp-video {
1094      line-height: 0;
1095  }
1096  
1097  
1098  .customize-control .thumbnail-image img {
1099      cursor: pointer;
1100  }
1101  
1102  #customize-controls .thumbnail-audio .thumbnail {
1103      max-width: 64px;
1104      max-height: 64px;
1105      margin: 10px;
1106      float: left;
1107  }
1108  
1109  #available-menu-items .accordion-section-content .new-content-item-wrapper,
1110  .customize-control-dropdown-pages .new-content-item-wrapper {
1111      width: calc(100% - 30px);
1112      padding: 8px 15px;
1113      position: absolute;
1114      bottom: 0;
1115      z-index: 10;
1116      background: #f0f0f1;
1117  }
1118  
1119  .customize-control-dropdown-pages .new-content-item-wrapper {
1120      width: 100%;
1121      padding: 0;
1122      position: static;
1123  }
1124  
1125  #available-menu-items .accordion-section-content .new-content-item,
1126  .customize-control-dropdown-pages .new-content-item {
1127      display: flex;
1128  }
1129  
1130  .customize-control-dropdown-pages .new-content-item {
1131      width: 100%;
1132      padding: 5px 0 5px 1px;
1133      position: relative;
1134  }
1135  
1136  .customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
1137      padding: 0;
1138  }
1139  
1140  .customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
1141      line-height: 1.6;
1142  }
1143  
1144  #available-menu-items .new-content-item .create-item-input,
1145  .customize-control-dropdown-pages .new-content-item .create-item-input {
1146      flex-grow: 10;
1147  }
1148  
1149  #available-menu-items .new-content-item .add-content,
1150  .customize-control-dropdown-pages .new-content-item .add-content {
1151      margin: 2px 0 2px 6px;
1152      flex-grow: 1;
1153  }
1154  
1155  .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
1156      border: 1px solid #d63638;
1157  }
1158  
1159  .customize-control-dropdown-pages .add-new-toggle {
1160      margin-left: 1px;
1161      font-weight: 600;
1162      line-height: 2.2;
1163  }
1164  
1165  #customize-preview iframe {
1166      width: 100%;
1167      height: 100%;
1168      position: absolute;
1169  }
1170  #customize-preview iframe + iframe {
1171      visibility: hidden;
1172  }
1173  
1174  .wp-full-overlay-sidebar {
1175      background: #f0f0f1;
1176      border-right: 1px solid #dcdcde;
1177  }
1178  
1179  
1180  /**
1181   * Notifications
1182   */
1183  
1184  #customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
1185      margin: 4px 0 8px;
1186      padding: 0;
1187      cursor: default;
1188  }
1189  
1190  #customize-controls .customize-control-widget_form.has-error .widget .widget-top,
1191  .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
1192      box-shadow: inset 0 0 0 2px #d63638;
1193      transition: .15s box-shadow linear;
1194  }
1195  
1196  #customize-controls .customize-control-notifications-container li.notice {
1197      list-style: none;
1198      margin: 0 0 6px;
1199      padding: 9px 14px;
1200      overflow: hidden;
1201  }
1202  #customize-controls .customize-control-notifications-container .notice.is-dismissible {
1203      padding-right: 38px;
1204  }
1205  
1206  .customize-control-notifications-container li.notice:last-child {
1207      margin-bottom: 0;
1208  }
1209  
1210  #customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
1211      margin-top: 0;
1212  }
1213  
1214  #customize-controls .customize-control-widget_form .customize-control-notifications-container {
1215      margin-top: 8px;
1216  }
1217  
1218  .customize-control-text.has-error input {
1219      outline: 2px solid #d63638;
1220  }
1221  
1222  #customize-controls #customize-notifications-area {
1223      position: absolute;
1224      top: 46px;
1225      width: 100%;
1226      border-bottom: 1px solid #dcdcde;
1227      display: block;
1228      padding: 0;
1229      margin: 0;
1230  }
1231  
1232  .wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
1233      display: none !important;
1234  }
1235  
1236  #customize-controls #customize-notifications-area:not(.has-overlay-notifications),
1237  #customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications),
1238  #customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) {
1239      max-height: 210px;
1240      overflow-x: hidden;
1241      overflow-y: auto;
1242  }
1243  
1244  #customize-controls #customize-notifications-area > ul,
1245  #customize-controls #customize-notifications-area .notice,
1246  #customize-controls .panel-meta > .customize-control-notifications-container,
1247  #customize-controls .panel-meta > .customize-control-notifications-container .notice,
1248  #customize-controls .customize-section-title > .customize-control-notifications-container,
1249  #customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1250      margin: 0;
1251  }
1252  #customize-controls .panel-meta > .customize-control-notifications-container,
1253  #customize-controls .customize-section-title > .customize-control-notifications-container {
1254      border-top: 1px solid #dcdcde;
1255  }
1256  #customize-controls #customize-notifications-area .notice,
1257  #customize-controls .panel-meta > .customize-control-notifications-container .notice,
1258  #customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1259      padding: 9px 14px;
1260  }
1261  #customize-controls #customize-notifications-area .notice.is-dismissible,
1262  #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
1263  #customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible {
1264      padding-right: 38px;
1265  }
1266  #customize-controls #customize-notifications-area .notice + .notice,
1267  #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
1268  #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
1269      margin-top: 1px;
1270  }
1271  
1272  @keyframes customize-fade-in {
1273      0%   { opacity: 0; }
1274      100% { opacity: 1; }
1275  }
1276  
1277  #customize-controls .notice.notification-overlay,
1278  #customize-controls #customize-notifications-area .notice.notification-overlay {
1279      margin: 0;
1280      border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
1281  }
1282  
1283  #customize-controls .customize-control-notifications-container.has-overlay-notifications {
1284      animation: customize-fade-in 0.5s;
1285      z-index: 30;
1286  }
1287  
1288  /* Note: Styles for this are also defined in themes.css */
1289  #customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
1290      clear: both;
1291      color: #1d2327;
1292      font-size: 18px;
1293      font-style: normal;
1294      margin: 0;
1295      padding: 2em 0;
1296      text-align: center;
1297      width: 100%;
1298      display: block;
1299      top: 50%;
1300      position: relative;
1301  }
1302  
1303  /* Style for custom settings */
1304  
1305  /**
1306   * Static front page
1307   */
1308  
1309  #customize-control-show_on_front.has-error {
1310      margin-bottom: 0;
1311  }
1312  #customize-control-show_on_front.has-error .customize-control-notifications-container {
1313      margin-top: 12px;
1314  }
1315  
1316  /**
1317   * Dropdowns
1318   */
1319  
1320  .accordion-section .dropdown {
1321      float: left;
1322      display: block;
1323      position: relative;
1324      cursor: pointer;
1325  }
1326  
1327  .accordion-section .dropdown-content {
1328      overflow: hidden;
1329      float: left;
1330      min-width: 30px;
1331      height: 16px;
1332      line-height: 16px;
1333      margin-right: 16px;
1334      padding: 4px 5px;
1335      border: 2px solid #f0f0f1;
1336      -webkit-user-select: none;
1337      user-select: none;
1338  }
1339  
1340  /* @todo maybe no more used? */
1341  .customize-control .dropdown-arrow {
1342      position: absolute;
1343      top: 0;
1344      bottom: 0;
1345      right: 0;
1346      width: 20px;
1347      background: #f0f0f1;
1348  }
1349  
1350  .customize-control .dropdown-arrow:after {
1351      content: "\f140";
1352      font: normal 20px/1 dashicons;
1353      speak: never;
1354      display: block;
1355      padding: 0;
1356      text-indent: 0;
1357      text-align: center;
1358      position: relative;
1359      -webkit-font-smoothing: antialiased;
1360      -moz-osx-font-smoothing: grayscale;
1361      text-decoration: none !important;
1362      color: #2c3338;
1363  }
1364  
1365  .customize-control .dropdown-status {
1366      color: #2c3338;
1367      background: #f0f0f1;
1368      display: none;
1369      max-width: 112px;
1370  }
1371  
1372  .customize-control-color .dropdown {
1373      margin-right: 5px;
1374      margin-bottom: 5px;
1375  }
1376  
1377  .customize-control-color .dropdown .dropdown-content {
1378      background-color: #50575e;
1379      border: 1px solid rgba(0, 0, 0, 0.15);
1380  }
1381  
1382  .customize-control-color .dropdown:hover .dropdown-content {
1383      border-color: rgba(0, 0, 0, 0.25);
1384  }
1385  
1386  /**
1387   * iOS can't scroll iframes,
1388   * instead it expands the iframe size to match the size of the content
1389   */
1390  
1391  .ios .wp-full-overlay {
1392      position: relative;
1393  }
1394  
1395  .ios #customize-controls .wp-full-overlay-sidebar-content {
1396      -webkit-overflow-scrolling: touch;
1397  }
1398  
1399  /* Media controls */
1400  
1401  .customize-control .actions .button {
1402      margin-top: 12px;
1403  }
1404  
1405  .customize-control-header .actions,
1406  .customize-control-header .uploaded {
1407      margin-bottom: 18px;
1408  }
1409  
1410  .customize-control-header .uploaded button:not(.random),
1411  .customize-control-header .default button:not(.random) {
1412      width: 100%;
1413      padding: 0;
1414      margin: 0;
1415      background: none;
1416      border: none;
1417      color: inherit;
1418      cursor: pointer;
1419  }
1420  
1421  .customize-control-header button img {
1422      display: block;
1423  }
1424  
1425  .customize-control .attachment-media-view .remove-button,
1426  .customize-control .attachment-media-view .default-button,
1427  .customize-control .attachment-media-view .upload-button,
1428  .customize-control-header button.new,
1429  .customize-control-header button.remove {
1430      width: auto;
1431      height: auto;
1432      white-space: normal;
1433  }
1434  
1435  .customize-control .attachment-media-view .thumbnail,
1436  .customize-control-header .current .container {
1437      overflow: hidden;
1438  }
1439  
1440  .customize-control .attachment-media-view .placeholder,
1441  .customize-control .attachment-media-view .button-add-media,
1442  .customize-control-header .placeholder {
1443      width: 100%;
1444      position: relative;
1445      text-align: center;
1446      cursor: default;
1447      border: 1px dashed #c3c4c7;
1448      box-sizing: border-box;
1449      padding: 9px 0;
1450      line-height: 1.6;
1451  }
1452  
1453  .customize-control .attachment-media-view .button-add-media {
1454      cursor: pointer;
1455      background-color: #f0f0f1;
1456      color: #2c3338;
1457  }
1458  
1459  .customize-control .attachment-media-view .button-add-media:hover {
1460      background-color: #fff;
1461  }
1462  
1463  .customize-control .attachment-media-view .button-add-media:focus {
1464      background-color: #fff;
1465      border-color: #3582c4;
1466      border-style: solid;
1467      box-shadow: 0 0 0 1px #3582c4;
1468      /* Only visible in Windows High Contrast mode */
1469      outline: 2px solid transparent;
1470  }
1471  
1472  .customize-control-header .inner {
1473      display: none;
1474      position: absolute;
1475      width: 100%;
1476      color: #50575e;
1477      white-space: nowrap;
1478      text-overflow: ellipsis;
1479      overflow: hidden;
1480  }
1481  
1482  .customize-control-header .inner,
1483  .customize-control-header .inner .dashicons {
1484      line-height: 20px;
1485      top: 8px;
1486  }
1487  
1488  .customize-control-header .list .inner,
1489  .customize-control-header .list .inner .dashicons {
1490      top: 9px;
1491  }
1492  
1493  .customize-control-header .header-view {
1494      position: relative;
1495      width: 100%;
1496      margin-bottom: 12px;
1497  }
1498  
1499  .customize-control-header .header-view:last-child {
1500      margin-bottom: 0;
1501  }
1502  
1503  /* Convoluted, but 'outline' support isn't good enough yet */
1504  .customize-control-header .header-view:after {
1505      border: 0;
1506  }
1507  
1508  .customize-control-header .header-view.selected .choice:focus {
1509      outline: none;
1510  }
1511  
1512  .customize-control-header .header-view.selected:after {
1513      content: "";
1514      position: absolute;
1515      height: auto;
1516      top: 0;
1517      left: 0;
1518      bottom: 0;
1519      right: 0;
1520      border: 4px solid #72aee6;
1521      border-radius: 2px;
1522  }
1523  
1524  .customize-control-header .header-view.button.selected {
1525      border: 0;
1526  }
1527  
1528  /* Header control: overlay "close" button */
1529  
1530  .customize-control-header .uploaded .header-view .close {
1531      font-size: 20px;
1532      color: #fff;
1533      background: #50575e;
1534      background: rgba(0, 0, 0, 0.5);
1535      position: absolute;
1536      top: 10px;
1537      left: -999px;
1538      z-index: 1;
1539      width: 26px;
1540      height: 26px;
1541      cursor: pointer;
1542  }
1543  
1544  .customize-control-header .header-view:hover .close,
1545  .customize-control-header .header-view .close:focus {
1546      left: auto;
1547      right: 10px;
1548  }
1549  
1550  .customize-control-header .header-view .close:focus {
1551      outline: 1px solid #4f94d4;
1552  }
1553  
1554  /* Header control: randomiz(s)er */
1555  
1556  .customize-control-header .random.placeholder {
1557      cursor: pointer;
1558      border-radius: 2px;
1559      height: 40px;
1560  }
1561  
1562  .customize-control-header button.random {
1563      width: 100%;
1564      height: auto;
1565      min-height: 40px;
1566      white-space: normal;
1567  }
1568  
1569  .customize-control-header button.random .dice {
1570      margin-top: 4px;
1571  }
1572  
1573  .customize-control-header .placeholder:hover .dice,
1574  .customize-control-header .header-view:hover > button.random .dice {
1575      animation: dice-color-change 3s infinite;
1576  }
1577  
1578  .button-see-me {
1579      animation: bounce .7s 1;
1580      transform-origin: center bottom;
1581  }
1582  
1583  @keyframes bounce {
1584      from, 20%, 53%, 80%, to {
1585          animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1586          transform: translate3d(0,0,0);
1587      }
1588  
1589      40%, 43% {
1590          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1591          transform: translate3d(0, -12px, 0);
1592      }
1593  
1594      70% {
1595          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1596          transform: translate3d(0, -6px, 0);
1597      }
1598  
1599      90% {
1600          transform: translate3d(0,-1px,0);
1601      }
1602  }
1603  
1604  .customize-control-header .choice {
1605      position: relative;
1606      display: block;
1607      margin-bottom: 9px;
1608  }
1609  
1610  .customize-control-header .choice:focus {
1611      box-shadow: 0 0 0 2px #2271b1;
1612      /* Only visible in Windows High Contrast mode */
1613      outline: 2px solid transparent;
1614  }
1615  
1616  .customize-control-header .uploaded div:last-child > .choice {
1617      margin-bottom: 0;
1618  }
1619  
1620  .customize-control .attachment-media-view .thumbnail-image img,
1621  .customize-control-header img {
1622      max-width: 100%;
1623  }
1624  
1625  .customize-control .attachment-media-view .remove-button,
1626  .customize-control .attachment-media-view .default-button,
1627  .customize-control-header .remove {
1628      margin-right: 8px;
1629  }
1630  
1631  /* Background position control */
1632  .customize-control-background_position .background-position-control .button-group {
1633      display: block;
1634  }
1635  
1636  /**
1637   * Code Editor Control and Custom CSS Section
1638   *
1639   * Modifications to the Section Container to make the textarea full-width and
1640   * full-height, if the control is the only control in the section.
1641   */
1642  
1643  .customize-control-code_editor textarea {
1644      width: 100%;
1645      font-family: Consolas, Monaco, monospace;
1646      font-size: 12px;
1647      padding: 6px 8px;
1648      tab-size: 2;
1649  }
1650  .customize-control-code_editor textarea,
1651  .customize-control-code_editor .CodeMirror {
1652      height: 14em;
1653  }
1654  
1655  #customize-controls .customize-section-description-container.section-meta.customize-info {
1656      border-bottom: none;
1657  }
1658  
1659  #sub-accordion-section-custom_css .customize-control-notifications-container {
1660      margin-bottom: 15px;
1661  }
1662  
1663  #customize-control-custom_css textarea {
1664      display: block;
1665      height: 500px;
1666  }
1667  
1668  .customize-section-description-container + #customize-control-custom_css .customize-control-title {
1669      margin-left: 12px;
1670  }
1671  
1672  .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1673      border-right: 0;
1674      border-left: 0;
1675      height: calc( 100vh - 185px );
1676      resize: none;
1677  }
1678  
1679  .customize-section-description-container + #customize-control-custom_css:last-child {
1680      margin-left: -12px;
1681      width: 299px;
1682      width: calc( 100% + 24px );
1683      margin-bottom: -12px;
1684  }
1685  
1686  .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1687      height: calc( 100vh - 185px );
1688  }
1689  
1690  .CodeMirror-lint-tooltip,
1691  .CodeMirror-hints {
1692      z-index: 500000 !important;
1693  }
1694  
1695  .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1696      margin-left: 12px;
1697      margin-right: 12px;
1698  }
1699  
1700  .theme-browser .theme.active .theme-actions,
1701  .wp-customizer .theme-browser .theme .theme-actions {
1702      padding: 9px 15px;
1703      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1704  }
1705  
1706  @media screen and (max-width: 640px) {
1707      .customize-section-description-container + #customize-control-custom_css:last-child {
1708          margin-right: 0;
1709      }
1710  
1711      .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1712          height: calc( 100vh - 140px );
1713      }
1714  }
1715  
1716  /**
1717   * Themes
1718   */
1719  
1720  #customize-theme-controls .control-panel-themes {
1721      border-bottom: none;
1722  }
1723  
1724  #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1725  #customize-theme-controls .control-panel-themes > .accordion-section-title {
1726      cursor: default;
1727      background: #fff;
1728      color: #50575e;
1729      border-top: 1px solid #dcdcde;
1730      border-bottom: 1px solid #dcdcde;
1731      border-left: none;
1732      border-right: none;
1733      margin: 0 0 15px;
1734      padding: 12px 100px 15px 15px; /* Space for the button */
1735  }
1736  
1737  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1738  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1739      border-top: 0;
1740  }
1741  
1742  #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1743  #customize-theme-controls .control-section-themes > .accordion-section-title {
1744      margin: 0 0 15px;
1745  }
1746  
1747  #customize-controls .customize-themes-panel .accordion-section-title:hover,
1748  #customize-controls .customize-themes-panel .accordion-section-title {
1749      margin: 15px -8px;
1750  }
1751  
1752  #customize-controls .control-section-themes .accordion-section-title,
1753  #customize-controls .customize-themes-panel .accordion-section-title {
1754      padding-right: 100px; /* Space for the button */
1755  }
1756  
1757  .control-panel-themes .accordion-section-title span.customize-action,
1758  #customize-controls .customize-section-title span.customize-action,
1759  #customize-controls .control-section-themes .accordion-section-title span.customize-action,
1760  #customize-controls .customize-section-title span.customize-action {
1761      font-size: 13px;
1762      display: block;
1763      font-weight: 400;
1764  }
1765  
1766  #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1767      position: absolute;
1768      right: 10px;
1769      top: 50%;
1770      margin-top: -14px;
1771      font-weight: 400;
1772  }
1773  
1774  #customize-notifications-area .notification-message button.switch-to-editor {
1775      display: block;
1776      margin-top: 6px;
1777      font-weight: 400;
1778  }
1779  
1780  #customize-theme-controls .control-panel-themes > .accordion-section-title:after {
1781      display: none;
1782  }
1783  
1784  .control-panel-themes .customize-themes-full-container {
1785      position: fixed;
1786      top: 0;
1787      left: 0;
1788      transition: .18s left ease-in-out;
1789      margin: 0 0 0 300px;
1790      padding: 71px 0 25px;
1791      overflow-y: scroll;
1792      width: calc(100% - 300px);
1793      height: calc(100% - 96px);
1794      background: #f0f0f1;
1795      z-index: 20;
1796  }
1797  
1798  @media (prefers-reduced-motion: reduce) {
1799      .control-panel-themes .customize-themes-full-container {
1800          transition: none;
1801      }
1802  }
1803  
1804  @media screen and (min-width: 1670px) {
1805      .control-panel-themes .customize-themes-full-container {
1806          width: 82%;
1807          right: 0;
1808          left: initial;
1809      }
1810  }
1811  
1812  .modal-open .control-panel-themes .customize-themes-full-container {
1813      overflow-y: visible;
1814  }
1815  
1816  /* Animations for opening the themes panel */
1817  #customize-save-button-wrapper,
1818  #customize-header-actions .spinner,
1819  #customize-header-actions .customize-controls-preview-toggle {
1820      transition: .18s margin ease-in-out;
1821  }
1822  
1823  #customize-footer-actions,
1824  #customize-footer-actions .collapse-sidebar {
1825      bottom: 0;
1826      transition: .18s bottom ease-in-out;
1827  }
1828  
1829  .in-themes-panel:not(.animating) #customize-header-actions .spinner,
1830  .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1831  .in-themes-panel:not(.animating) #customize-preview,
1832  .in-themes-panel:not(.animating) #customize-footer-actions {
1833      visibility: hidden;
1834  }
1835  
1836  .wp-full-overlay.in-themes-panel {
1837      background: #f0f0f1; /* Prevents a black flash when fading in the panel */
1838  }
1839  
1840  .in-themes-panel #customize-save-button-wrapper,
1841  .in-themes-panel #customize-header-actions .spinner,
1842  .in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1843      margin-top: -46px; /* Height of header actions bar */
1844  }
1845  
1846  .in-themes-panel #customize-footer-actions,
1847  .in-themes-panel #customize-footer-actions .collapse-sidebar {
1848      bottom: -45px;
1849  }
1850  
1851  /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1852  .in-themes-panel.animating .control-panel-themes .filter-themes-count {
1853      display: none;
1854  }
1855  
1856  .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1857      bottom: 0;
1858  }
1859  
1860  .themes-filter-bar .feature-filter-toggle:before {
1861      content: "\f111";
1862      margin: 0 5px 0 0;
1863      font: normal 16px/1 dashicons;
1864      vertical-align: text-bottom;
1865      -webkit-font-smoothing: antialiased;
1866      -moz-osx-font-smoothing: grayscale;
1867  }
1868  
1869  .themes-filter-bar .feature-filter-toggle.open {
1870      background: #f0f0f1;
1871      border-color: #8c8f94;
1872      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1873  }
1874  
1875  .themes-filter-bar .feature-filter-toggle .filter-count-filters {
1876      display: none;
1877  }
1878  
1879  .filter-drawer {
1880      box-sizing: border-box;
1881      width: 100%;
1882      position: absolute;
1883      top: 46px;
1884      left: 0;
1885      padding: 25px 0 25px 25px;
1886      border-top: 0;
1887      margin: 0;
1888      background: #f0f0f1;
1889      border-bottom: 1px solid #dcdcde;
1890  }
1891  
1892  .filter-drawer .filter-group {
1893      margin: 0 25px 0 0;
1894      width: calc( (100% - 75px) / 3);
1895      min-width: 200px;
1896      max-width: 320px;
1897  }
1898  
1899  /* Adds a delay before fading in to avoid it "jumping" */
1900  @keyframes themes-fade-in {
1901      0% {
1902          opacity: 0;
1903      }
1904      50% {
1905          opacity: 0;
1906      }
1907      100% {
1908          opacity: 1;
1909      }
1910  }
1911  
1912  .control-panel-themes .customize-themes-full-container.animate {
1913      animation: .6s themes-fade-in 1;
1914  }
1915  
1916  .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1917      animation: .6s themes-fade-in 1;
1918  }
1919  
1920  .control-panel-themes .filter-themes-count .themes-displayed {
1921      font-weight: 600;
1922      color: #50575e;
1923  }
1924  
1925  .customize-themes-notifications {
1926      margin: 0;
1927  }
1928  
1929  .control-panel-themes .customize-themes-notifications .notice {
1930      margin: 0 0 25px;
1931  }
1932  
1933  .customize-themes-full-container .customize-themes-section {
1934      display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1935      overflow: hidden;
1936  }
1937  
1938  .customize-themes-full-container .customize-themes-section.current-section {
1939      display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1940  }
1941  
1942  .control-section .customize-section-text-before {
1943      padding: 0 0 8px 15px;
1944      margin: 15px 0 0;
1945      line-height: 16px;
1946      border-bottom: 1px solid #dcdcde;
1947      color: #50575e;
1948  }
1949  
1950  .control-panel-themes .customize-themes-section-title {
1951      width: 100%;
1952      background: #fff;
1953      box-shadow: none;
1954      outline: none;
1955      border-top: none;
1956      border-bottom: 1px solid #dcdcde;
1957      border-left: 4px solid #fff;
1958      border-right: none;
1959      cursor: pointer;
1960      padding: 10px 15px;
1961      position: relative;
1962      text-align: left;
1963      font-size: 14px;
1964      font-weight: 600;
1965      color: #50575e;
1966      text-shadow: none;
1967  }
1968  
1969  .control-panel-themes #accordion-section-installed_themes {
1970      border-top: 1px solid #dcdcde;
1971  }
1972  
1973  .control-panel-themes .theme-section {
1974      margin: 0;
1975      position: relative;
1976  }
1977  
1978  .control-panel-themes .customize-themes-section-title:focus,
1979  .control-panel-themes .customize-themes-section-title:hover {
1980      border-left-color: #2271b1;
1981      color: #2271b1;
1982      background: #f6f7f7;
1983  }
1984  
1985  .customize-themes-section-title:not(.selected):after {
1986      content: "";
1987      display: block;
1988      position: absolute;
1989      top: 9px;
1990      right: 15px;
1991      width: 18px;
1992      height: 18px;
1993      border-radius: 100%;
1994      border: 1px solid #c3c4c7;
1995      background: #fff;
1996  }
1997  
1998  .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
1999      content: "\f147";
2000      font: 16px/1 dashicons;
2001      box-sizing: border-box;
2002      width: 20px;
2003      height: 20px;
2004      padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
2005      border-radius: 100%;
2006      position: absolute;
2007      top: 9px;
2008      right: 15px;
2009      background: #2271b1;
2010      color: #fff;
2011  }
2012  
2013  .control-panel-themes .customize-themes-section-title.selected {
2014      color: #2271b1;
2015  }
2016  
2017  #customize-theme-controls .themes.accordion-section-content {
2018      position: relative;
2019      left: 0;
2020      padding: 0;
2021      width: 100%;
2022  }
2023  
2024  .loading .customize-themes-section .spinner {
2025      display: block;
2026      visibility: visible;
2027      position: relative;
2028      clear: both;
2029      width: 20px;
2030      height: 20px;
2031      left: calc(50% - 10px);
2032      float: none;
2033      margin-top: 50px;
2034  }
2035  
2036  .customize-themes-section .no-themes,
2037  .customize-themes-section .no-themes-local {
2038      display: none;
2039  }
2040  
2041  .themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2042      display: none; /* Hide "installed" notice on installed themes tab. */
2043  }
2044  
2045  .customize-control-theme .theme {
2046      width: 100%;
2047      margin: 0;
2048      border: 1px solid #dcdcde;
2049      background: #fff;
2050  }
2051  
2052  .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
2053      background: #fff;
2054      border: none;
2055  }
2056  
2057  .customize-control.customize-control-theme { /* override most properties on .customize-control */
2058      box-sizing: border-box;
2059      width: 25%;
2060      max-width: 600px; /* Max. screenshot size / 2 */
2061      margin: 0 25px 25px 0;
2062      padding: 0;
2063      clear: none;
2064  }
2065  
2066  /* 5 columns above 2100px */
2067  @media screen and (min-width: 2101px) {
2068      .customize-control.customize-control-theme {
2069          width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
2070      }
2071  }
2072  
2073  /* 4 columns up to 2100px */
2074  @media screen and (min-width: 1601px) and (max-width: 2100px) {
2075      .customize-control.customize-control-theme {
2076          width: calc( ( 100% - 100px ) / 4 - 1px );
2077      }
2078  }
2079  
2080  /* 3 columns up to 1600px */
2081  @media screen and (min-width: 1201px) and (max-width: 1600px) {
2082      .customize-control.customize-control-theme {
2083          width: calc( ( 100% - 75px ) / 3 - 1px );
2084      }
2085  }
2086  
2087  /* 2 columns up to 1200px */
2088  @media screen and (min-width: 851px) and (max-width: 1200px) {
2089      .customize-control.customize-control-theme {
2090          width: calc( ( 100% - 50px ) / 2 - 1px );
2091  
2092      }
2093  }
2094  
2095  /* 1 column up to 850 px */
2096  @media screen and (max-width: 850px) {
2097      .customize-control.customize-control-theme {
2098          width: 100%;
2099      }
2100  }
2101  
2102  .wp-customizer .theme-browser .themes {
2103      padding: 0 0 25px 25px;
2104      transition: .18s margin-top linear;
2105  }
2106  
2107  .wp-customizer .theme-browser .theme .theme-actions {
2108      opacity: 1;
2109  }
2110  
2111  #customize-controls h3.theme-name {
2112      font-size: 15px;
2113  }
2114  
2115  #customize-controls .theme-overlay .theme-name {
2116      font-size: 32px;
2117  }
2118  
2119  .customize-preview-header.themes-filter-bar {
2120      position: fixed;
2121      top: 0;
2122      left: 300px;
2123      width: calc(100% - 300px);
2124      height: 46px;
2125      background: #f0f0f1;
2126      z-index: 10;
2127      padding: 6px 25px;
2128      box-sizing: border-box;
2129      border-bottom: 1px solid #dcdcde;
2130  }
2131  .customize-preview-header.themes-filter-bar,
2132  .customize-preview-header.themes-filter-bar .search-form {
2133      display: flex;
2134      align-items: center;
2135      gap: 10px;
2136      flex-wrap: wrap;
2137  }
2138  
2139  .customize-preview-header.themes-filter-bar .search-form-input {
2140      position: relative;
2141  }
2142  
2143  .customize-preview-header .filter-themes-wrapper {
2144      display: grid;
2145      align-items: center;
2146      gap: 10px;
2147      grid-template-columns: auto 1fr;
2148  }
2149  
2150  .customize-preview-header .filter-themes-wrapper .filter-themes-count {
2151      justify-self: end;
2152  }
2153  
2154  @media screen and (min-width: 1670px) {
2155      .customize-preview-header.themes-filter-bar {
2156          width: 82%;
2157          right: 0;
2158          left: initial;
2159      }
2160  }
2161  
2162  .themes-filter-bar .themes-filter-container {
2163      margin: 0;
2164      padding: 0;
2165      display: flex;
2166      align-items: center;
2167      gap: 10px;
2168  }
2169  
2170  .themes-filter-bar .wp-filter-search {
2171      line-height: 1.8;
2172      padding: 6px 10px 6px 30px;
2173      max-width: 100%;
2174      width: 40%;
2175      min-width: 300px;
2176      height: 32px;
2177      margin: 1px 0;
2178      top: 0;
2179      left: 0;
2180  }
2181  
2182  /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
2183     current length of .org feature filters assuming translations do not wrap lines. */
2184  @media screen and (max-height: 540px), screen and (max-width: 1018px) {
2185      .customize-preview-header.themes-filter-bar {
2186          position: relative;
2187          left: 0;
2188          width: 100%;
2189          margin: 0 0 25px;
2190      }
2191      .filter-drawer {
2192          top: 46px;
2193      }
2194      .wp-customizer .theme-browser .themes {
2195          padding: 0 0 25px 25px;
2196          overflow: hidden;
2197      }
2198  
2199      .control-panel-themes .customize-themes-full-container {
2200          margin-top: 0;
2201          padding: 0;
2202          height: 100%;
2203          width: calc(100% - 300px);
2204      }
2205  }
2206  
2207  @media screen and (max-width: 1018px) {
2208      .filter-drawer .filter-group {
2209          width: calc( (100% - 50px) / 2);
2210      }
2211  }
2212  
2213  @media screen and (max-width: 960px) {
2214      .customize-preview-header.themes-filter-bar {
2215          height: 96px;
2216      }
2217  }
2218  
2219  @media screen and (max-width: 900px) {
2220      .themes-filter-bar .wp-filter-search {
2221          width: 100%;
2222          margin: 0;
2223          min-width: 200px;
2224      }
2225  
2226      .customize-preview-header.themes-filter-bar,
2227      .customize-preview-header.themes-filter-bar .search-form
2228      .themes-filter-bar .themes-filter-container {
2229          display: grid;
2230          gap: 4px;
2231      }
2232  
2233      .customize-preview-header.themes-filter-bar .search-form-input {
2234          display: flex;
2235          flex-grow: 1;
2236      }
2237  
2238      .filter-drawer {
2239          top: 86px;
2240      }
2241  
2242      .control-panel-themes .filter-themes-count {
2243          float: left;
2244      }
2245  }
2246  
2247  @media screen and (max-width: 792px) {
2248      .filter-drawer .filter-group {
2249          width: calc( 100% - 25px);
2250      }
2251  }
2252  
2253  .control-panel-themes .customize-themes-mobile-back {
2254      display: none;
2255  }
2256  
2257  /* Mobile - toggle between themes and filters */
2258  @media screen and (max-width: 600px) {
2259  
2260      .filter-drawer {
2261          top: 132px;
2262      }
2263  
2264      .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
2265          display: block;
2266          float: right;
2267      }
2268  
2269      .control-panel-themes .customize-themes-full-container {
2270          width: 100%;
2271          margin: 0;
2272          padding-top: 46px;
2273          height: calc(100% - 46px);
2274          z-index: 1;
2275          display: none;
2276      }
2277  
2278      .showing-themes .control-panel-themes .customize-themes-full-container {
2279          display: block;
2280      }
2281  
2282      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
2283          display: block;
2284          position: fixed;
2285          top: 0;
2286          left: 0;
2287          background: #f0f0f1;
2288          color: #3c434a;
2289          border-radius: 0;
2290          box-shadow: none;
2291          border: none;
2292          height: 46px;
2293          width: 100%;
2294          z-index: 10;
2295          text-align: left;
2296          text-shadow: none;
2297          border-bottom: 1px solid #dcdcde;
2298          border-left: 4px solid transparent;
2299          margin: 0;
2300          padding: 0;
2301          font-size: 0;
2302          overflow: hidden;
2303      }
2304  
2305      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
2306          left: 0;
2307          top: 0;
2308          height: 46px;
2309          width: 26px;
2310          display: block;
2311          line-height: 2.3;
2312          padding: 0 8px;
2313          border-right: 1px solid #dcdcde;
2314      }
2315  
2316      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
2317      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
2318          color: #2271b1;
2319          background: #f6f7f7;
2320          border-left-color: #2271b1;
2321          box-shadow: none;
2322          /* Only visible in Windows High Contrast mode */
2323          outline: 2px solid transparent;
2324          outline-offset: -2px;
2325      }
2326  
2327      .showing-themes #customize-header-actions {
2328          display: none;
2329      }
2330  
2331      #customize-controls {
2332          width: 100%;
2333      }
2334  }
2335  
2336  /* Details View */
2337  .wp-customizer .theme-overlay {
2338      display: none;
2339  }
2340  
2341  .wp-customizer.modal-open .theme-overlay {
2342      position: fixed;
2343      left: 0;
2344      top: 0;
2345      right: 0;
2346      bottom: 0;
2347      z-index: 109;
2348  }
2349  
2350  /* Avoid a z-index war by resetting elements that should be under the overlay.
2351     This is likely required because of the way that sections and panels are positioned. */
2352  .wp-customizer.modal-open #customize-header-actions,
2353  .wp-customizer.modal-open .control-panel-themes .filter-themes-count,
2354  .wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
2355      z-index: -1;
2356  }
2357  
2358  .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
2359      overflow: visible;
2360  }
2361  
2362  .wp-customizer .theme-overlay .theme-backdrop {
2363      background: rgba(240, 240, 241, 0.75);
2364      position: fixed;
2365      z-index: 110;
2366  }
2367  
2368  .wp-customizer .theme-overlay .star-rating {
2369      float: left;
2370      margin-right: 8px;
2371  }
2372  
2373  .wp-customizer .theme-rating .num-ratings {
2374      line-height: 20px;
2375  }
2376  
2377  .wp-customizer .theme-overlay .theme-wrap {
2378      left: 90px;
2379      right: 90px;
2380      top: 45px;
2381      bottom: 45px;
2382      z-index: 120;
2383  }
2384  
2385  .wp-customizer .theme-overlay .theme-actions {
2386      text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
2387      padding: 10px 25px 5px;
2388      background: #f0f0f1;
2389      border-top: 1px solid #dcdcde;
2390  }
2391  
2392  .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
2393      margin-left: 8px;
2394  }
2395  
2396  .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
2397      overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
2398  }
2399  
2400  .wp-customizer .theme-header {
2401      background: #f0f0f1;
2402  }
2403  
2404  .wp-customizer .theme-overlay .theme-header button,
2405  .wp-customizer .theme-overlay .theme-header .close:before {
2406      color: #3c434a;
2407  }
2408  
2409  .wp-customizer .theme-overlay .theme-header .close:focus,
2410  .wp-customizer .theme-overlay .theme-header .close:hover,
2411  .wp-customizer .theme-overlay .theme-header .right:focus,
2412  .wp-customizer .theme-overlay .theme-header .right:hover,
2413  .wp-customizer .theme-overlay .theme-header .left:focus,
2414  .wp-customizer .theme-overlay .theme-header .left:hover {
2415      background: #fff;
2416      border-bottom: 4px solid #2271b1;
2417      color: #2271b1;
2418  }
2419  
2420  .wp-customizer .theme-overlay .theme-header .close:focus:before,
2421  .wp-customizer .theme-overlay .theme-header .close:hover:before {
2422      color: #2271b1;
2423  }
2424  
2425  .wp-customizer .theme-overlay .theme-header button.disabled,
2426  .wp-customizer .theme-overlay .theme-header button.disabled:hover,
2427  .wp-customizer .theme-overlay .theme-header button.disabled:focus {
2428      border-bottom: none;
2429      background: transparent;
2430      color: #c3c4c7;
2431  }
2432  
2433  /* Small Screens */
2434  @media (max-width: 850px), (max-height: 472px) {
2435      .wp-customizer .theme-overlay .theme-wrap {
2436          left: 0;
2437          right: 0;
2438          top: 0;
2439          bottom: 0;
2440      }
2441  
2442      .wp-customizer .theme-browser .themes {
2443          padding-right: 25px;
2444      }
2445  }
2446  
2447  /* Handle cheaters. */
2448  body.cheatin {
2449      font-size: medium;
2450      height: auto;
2451      background: #fff;
2452      border: 1px solid #c3c4c7;
2453      margin: 50px auto 2em;
2454      padding: 1em 2em;
2455      max-width: 700px;
2456      min-width: 0;
2457      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2458  }
2459  
2460  body.cheatin h1 {
2461      border-bottom: 1px solid #dcdcde;
2462      clear: both;
2463      color: #50575e;
2464      font-size: 24px;
2465      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2466      margin: 30px 0 0;
2467      padding: 0 0 7px;
2468  }
2469  
2470  body.cheatin p {
2471      font-size: 14px;
2472      line-height: 1.5;
2473      margin: 25px 0 20px;
2474  }
2475  
2476  /**
2477   * Widgets and Menus common styles
2478   */
2479  
2480  /* higher specificity than .wp-core-ui .button */
2481  #customize-theme-controls .add-new-widget,
2482  #customize-theme-controls .add-new-menu-item {
2483      cursor: pointer;
2484      float: right;
2485      margin: 0 0 0 10px;
2486      transition: all 0.2s;
2487      -webkit-user-select: none;
2488      user-select: none;
2489      outline: none;
2490  }
2491  
2492  .reordering .add-new-widget,
2493  .reordering .add-new-menu-item {
2494      opacity: 0.2;
2495      pointer-events: none;
2496      cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
2497  }
2498  
2499  .add-new-widget:before,
2500  .add-new-menu-item:before,
2501  #available-menu-items .new-content-item .add-content:before {
2502      content: "\f132";
2503      display: inline-block;
2504      position: relative;
2505      left: -2px;
2506      top: 0;
2507      font: normal 20px/1 dashicons;
2508      vertical-align: middle;
2509      transition: all 0.2s;
2510      -webkit-font-smoothing: antialiased;
2511      -moz-osx-font-smoothing: grayscale;
2512  }
2513  
2514  /* Reordering */
2515  .reorder-toggle {
2516      float: right;
2517      padding: 5px 8px;
2518      text-decoration: none;
2519      cursor: pointer;
2520      outline: none;
2521  }
2522  
2523  .reorder,
2524  .reordering .reorder-done {
2525      display: block;
2526      padding: 5px 8px;
2527  }
2528  
2529  .reorder-done,
2530  .reordering .reorder {
2531      display: none;
2532  }
2533  
2534  .widget-reorder-nav span,
2535  .menu-item-reorder-nav button {
2536      position: relative;
2537      overflow: hidden;
2538      float: left;
2539      display: block;
2540      width: 33px; /* was 42px for mobile */
2541      height: 43px;
2542      color: #8c8f94;
2543      text-indent: -9999px;
2544      cursor: pointer;
2545      outline: none;
2546  }
2547  
2548  .menu-item-reorder-nav button {
2549      width: 30px;
2550      height: 40px;
2551      background: transparent;
2552      border: none;
2553      box-shadow: none;
2554  }
2555  
2556  .widget-reorder-nav span:before,
2557  .menu-item-reorder-nav button:before {
2558      display: inline-block;
2559      position: absolute;
2560      top: 0;
2561      right: 0;
2562      width: 100%;
2563      height: 100%;
2564      font: normal 20px/43px dashicons;
2565      text-align: center;
2566      text-indent: 0;
2567      -webkit-font-smoothing: antialiased;
2568      -moz-osx-font-smoothing: grayscale;
2569  }
2570  
2571  .widget-reorder-nav span:hover,
2572  .widget-reorder-nav span:focus,
2573  .menu-item-reorder-nav button:hover,
2574  .menu-item-reorder-nav button:focus {
2575      color: #1d2327;
2576      background: #f0f0f1;
2577  }
2578  
2579  .move-widget-down:before,
2580  .menus-move-down:before {
2581      content: "\f347";
2582  }
2583  
2584  .move-widget-up:before,
2585  .menus-move-up:before {
2586      content: "\f343";
2587  }
2588  
2589  #customize-theme-controls .first-widget .move-widget-up,
2590  #customize-theme-controls .last-widget .move-widget-down,
2591  .move-up-disabled .menus-move-up,
2592  .move-down-disabled .menus-move-down,
2593  .move-right-disabled .menus-move-right,
2594  .move-left-disabled .menus-move-left {
2595      color: #dcdcde;
2596      background-color: #fff;
2597      cursor: default;
2598      pointer-events: none;
2599  }
2600  
2601  /**
2602   * New widget and Add-menu-items modes and panels
2603   */
2604  
2605  .wp-full-overlay-main {
2606      right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
2607      width: 100%;
2608  }
2609  
2610  body.adding-widget .add-new-widget,
2611  body.adding-widget .add-new-widget:hover,
2612  .adding-menu-items .add-new-menu-item,
2613  .adding-menu-items .add-new-menu-item:hover,
2614  .add-menu-toggle.open,
2615  .add-menu-toggle.open:hover {
2616      background: #f0f0f1;
2617      border-color: #8c8f94;
2618      color: #2c3338;
2619      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
2620  }
2621  
2622  body.adding-widget .add-new-widget:before,
2623  .adding-menu-items .add-new-menu-item:before,
2624  #accordion-section-add_menu .add-new-menu-item.open:before {
2625      transform: rotate(45deg);
2626  }
2627  
2628  #available-widgets,
2629  #available-menu-items {
2630      position: absolute;
2631      top: 0;
2632      bottom: 0;
2633      left: -301px;
2634      visibility: hidden;
2635      overflow-x: hidden;
2636      overflow-y: auto;
2637      width: 300px;
2638      margin: 0;
2639      z-index: 4;
2640      background: #f0f0f1;
2641      transition: left .18s;
2642      border-right: 1px solid #dcdcde;
2643  }
2644  
2645  #available-widgets .customize-section-title,
2646  #available-menu-items .customize-section-title {
2647      border: 0;
2648      clip-path: inset(50%);
2649      height: 1px;
2650      margin: -1px;
2651      overflow: hidden;
2652      padding: 0;
2653      position: absolute;
2654      width: 1px;
2655      word-wrap: normal !important;
2656  }
2657  
2658  #available-widgets .customize-section-title button,
2659  #available-menu-items .customize-section-title button {
2660      display: none;
2661  }
2662  
2663  #available-widgets-list {
2664      top: 82px;
2665      position: absolute;
2666      overflow: auto;
2667      bottom: 0;
2668      width: 100%;
2669      border-top: 1px solid #dcdcde;
2670  }
2671  
2672  .no-widgets-found #available-widgets-list {
2673      border-top: none;
2674  }
2675  
2676  #available-widgets-filter {
2677      position: fixed;
2678      top: 0;
2679      z-index: 1;
2680      width: 300px;
2681      background: #f0f0f1;
2682  }
2683  
2684  /* search field container */
2685  #available-widgets-filter,
2686  #available-menu-items-search .accordion-section-title {
2687      padding: 13px 15px;
2688      box-sizing: border-box;
2689  }
2690  
2691  #available-widgets-filter input,
2692  #available-menu-items-search input {
2693      width: 100%;
2694      min-height: 32px;
2695      margin: 1px 0;
2696      padding: 0 30px;
2697  }
2698  
2699  #available-widgets-filter input::-ms-clear,
2700  #available-menu-items-search input::-ms-clear {
2701      display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
2702  }
2703  
2704  #available-menu-items-search .search-icon,
2705  #available-widgets-filter .search-icon {
2706      display: block;
2707      position: absolute;
2708      bottom: 15px; /* 13 container padding +1 input margin +1 input border */
2709      left: 16px;
2710      width: 30px;
2711      height: 30px;
2712      line-height: 2.1;
2713      text-align: center;
2714      color: #646970;
2715  }
2716  
2717  #available-widgets-filter .clear-results,
2718  #available-menu-items-search .accordion-section-title .clear-results {
2719      position: absolute;
2720      top: 36px; /* 13 container padding +1 input margin +1 input border */
2721      right: 16px;
2722      width: 30px;
2723      height: 30px;
2724      padding: 0;
2725      border: 0;
2726      cursor: pointer;
2727      background: none;
2728      color: #d63638;
2729      text-decoration: none;
2730      outline: 0;
2731  }
2732  
2733  #available-widgets-filter .clear-results,
2734  #available-menu-items-search .clear-results,
2735  #available-menu-items-search.loading .clear-results.is-visible {
2736      display: none;
2737  }
2738  
2739  #available-widgets-filter .clear-results.is-visible,
2740  #available-menu-items-search .clear-results.is-visible {
2741      display: block;
2742  }
2743  
2744  #available-widgets-filter .clear-results:before,
2745  #available-menu-items-search .clear-results:before {
2746      content: "\f335";
2747      font: normal 20px/1 dashicons;
2748      vertical-align: middle;
2749      -webkit-font-smoothing: antialiased;
2750      -moz-osx-font-smoothing: grayscale;
2751  }
2752  
2753  #available-widgets-filter .clear-results:hover,
2754  #available-widgets-filter .clear-results:focus,
2755  #available-menu-items-search .clear-results:hover,
2756  #available-menu-items-search .clear-results:focus {
2757      color: #d63638;
2758  }
2759  
2760  #available-widgets-filter .clear-results:focus,
2761  #available-menu-items-search .clear-results:focus {
2762      box-shadow: 0 0 0 2px #2271b1;
2763      /* Only visible in Windows High Contrast mode */
2764      outline: 2px solid transparent;
2765  }
2766  
2767  #available-menu-items-search .search-icon:after,
2768  #available-widgets-filter .search-icon:after,
2769  .themes-filter-bar .search-icon:after {
2770      content: "\f179";
2771      font: normal 20px/1 dashicons;
2772      vertical-align: middle;
2773      -webkit-font-smoothing: antialiased;
2774      -moz-osx-font-smoothing: grayscale;
2775  }
2776  
2777  .themes-filter-bar .search-icon {
2778      position: absolute;
2779      top: 2px;
2780      left: 2px;
2781      z-index: 1;
2782      color: #646970;
2783      height: 30px;
2784      width: 30px;
2785      line-height: 2;
2786      text-align: center;
2787  }
2788  
2789  .no-widgets-found-message {
2790      display: none;
2791      margin: 0;
2792      padding: 0 15px;
2793      line-height: inherit;
2794  }
2795  
2796  .no-widgets-found .no-widgets-found-message {
2797      display: block;
2798  }
2799  
2800  #available-widgets .widget-top,
2801  #available-widgets .widget-top:hover,
2802  #available-menu-items .item-top,
2803  #available-menu-items .item-top:hover {
2804      border: none;
2805      background: transparent;
2806      box-shadow: none;
2807  }
2808  
2809  #available-widgets .widget-tpl,
2810  #available-menu-items .item-tpl {
2811      position: relative;
2812      padding: 15px 15px 15px 60px;
2813      background: #fff;
2814      border-bottom: 1px solid #dcdcde;
2815      border-left: 4px solid #fff;
2816      transition:
2817          .15s color ease-in-out,
2818          .15s background-color ease-in-out,
2819          .15s border-color ease-in-out;
2820      cursor: pointer;
2821      display: none;
2822  }
2823  
2824  #available-widgets .widget,
2825  #available-menu-items .item {
2826      position: static;
2827  }
2828  
2829  
2830  /* Responsive */
2831  .customize-controls-preview-toggle {
2832      display: none;
2833  }
2834  
2835  @media only screen and (max-width: 782px) {
2836      .wp-customizer .theme:not(.active):hover .theme-actions,
2837      .wp-customizer .theme:not(.active):focus .theme-actions {
2838          display: block;
2839      }
2840  
2841      .wp-customizer .theme-browser .theme.active .theme-name span {
2842          display: inline;
2843      }
2844  
2845      .customize-control-header button.random .dice {
2846          margin-top: 0;
2847      }
2848  
2849      .customize-control-radio .customize-inside-control-row,
2850      .customize-control-checkbox .customize-inside-control-row,
2851      .customize-control-nav_menu_auto_add .customize-inside-control-row {
2852          margin-left: 32px;
2853      }
2854  
2855      .customize-control-radio input,
2856      .customize-control-checkbox input,
2857      .customize-control-nav_menu_auto_add input {
2858          margin-left: -32px;
2859      }
2860  
2861      .customize-control input[type="radio"] + label + br,
2862      .customize-control input[type="checkbox"] + label + br {
2863          line-height: 2.5; /* For widgets checkboxes */
2864      }
2865  
2866      .customize-control .date-time-fields select {
2867          height: 39px;
2868      }
2869  
2870      .date-time-fields .date-input.month {
2871          width: 79px;
2872      }
2873  
2874      .date-time-fields .date-input.day,
2875      .date-time-fields .date-input.hour,
2876      .date-time-fields .date-input.minute {
2877          width: 55px;
2878      }
2879  
2880      .date-time-fields .date-input.year {
2881          width: 80px;
2882      }
2883  
2884      #customize-control-changeset_preview_link a {
2885          bottom: 16px;
2886      }
2887  
2888      .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
2889          bottom: 10px;
2890      }
2891  
2892      .media-widget-control .media-widget-buttons .button.edit-media,
2893      .media-widget-control .media-widget-buttons .button.change-media,
2894      .media-widget-control .media-widget-buttons .button.select-media {
2895          margin-top: 12px;
2896      }
2897  
2898      .customize-preview-header.themes-filter-bar .search-icon {
2899          top: 6px;
2900      }
2901  }
2902  
2903  @media screen and (max-width: 1200px) {
2904      .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2905      .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2906      .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
2907          left: 67%;
2908      }
2909  }
2910  
2911  @media screen and (max-width: 640px) {
2912  
2913      /* when the sidebar is collapsed and switching to responsive view,
2914         bring it back see ticket #35220 */
2915      .wp-full-overlay.collapsed #customize-controls {
2916          margin-left: 0;
2917      }
2918  
2919      .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
2920          bottom: 0;
2921      }
2922  
2923      .customize-controls-preview-toggle {
2924          display: block;
2925          position: absolute;
2926          top: 0;
2927          left: 48px;
2928          line-height: 2.6;
2929          font-size: 14px;
2930          padding: 0 12px 4px;
2931          margin: 0;
2932          height: 45px;
2933          background: #f0f0f1;
2934          border: 0;
2935          border-right: 1px solid #dcdcde;
2936          border-top: 4px solid #f0f0f1;
2937          color: #50575e;
2938          cursor: pointer;
2939          transition: color .1s ease-in-out, background .1s ease-in-out;
2940      }
2941  
2942      #customize-footer-actions,
2943      /*#customize-preview,*/
2944      .customize-controls-preview-toggle .controls,
2945      .preview-only .wp-full-overlay-sidebar-content,
2946      .preview-only .customize-controls-preview-toggle .preview {
2947          display: none;
2948      }
2949  
2950      .preview-only #customize-save-button-wrapper {
2951          margin-top: -46px;
2952      }
2953  
2954      .customize-controls-preview-toggle .preview:before,
2955      .customize-controls-preview-toggle .controls:before {
2956          font: normal 20px/1 dashicons;
2957          content: "\f177";
2958          position: relative;
2959          top: 4px;
2960          margin-right: 6px;
2961      }
2962  
2963      .customize-controls-preview-toggle .controls:before {
2964          content: "\f540";
2965      }
2966  
2967      .preview-only #customize-controls {
2968          height: 45px;
2969      }
2970  
2971      .preview-only #customize-preview,
2972      .preview-only .customize-controls-preview-toggle .controls {
2973          display: block;
2974      }
2975  
2976      .wp-core-ui.wp-customizer .button {
2977          min-height: 30px;
2978          padding: 0 14px;
2979          line-height: 2;
2980          font-size: 14px;
2981          vertical-align: middle;
2982      }
2983  
2984      #customize-control-changeset_status .customize-inside-control-row {
2985          padding-top: 15px;
2986      }
2987  
2988      body.adding-widget div#available-widgets,
2989      body.adding-menu-items div#available-menu-items,
2990      body.outer-section-open div#customize-sidebar-outer-content {
2991          width: 100%;
2992      }
2993  
2994      #available-widgets .customize-section-title,
2995      #available-menu-items .customize-section-title {
2996          border: 0;
2997          clip-path: none;
2998          height: inherit;
2999          margin: 0;
3000          overflow: hidden;
3001          padding: 0;
3002          width: auto;
3003          position: static;
3004      }
3005  
3006      #available-widgets .customize-section-title button,
3007      #available-menu-items .customize-section-title button {
3008          display: block;
3009      }
3010  
3011      #available-widgets .customize-section-back,
3012      #available-menu-items .customize-section-back {
3013          height: 69px;
3014      }
3015  
3016      #available-widgets .customize-section-title h3,
3017      #available-menu-items .customize-section-title h3 {
3018          font-size: 20px;
3019          font-weight: 200;
3020          padding: 9px 10px 12px 14px;
3021          margin: 0;
3022          line-height: 24px;
3023          color: #50575e;
3024          display: block;
3025          overflow: hidden;
3026          white-space: nowrap;
3027          text-overflow: ellipsis;
3028      }
3029  
3030      #available-widgets .customize-section-title .customize-action,
3031      #available-menu-items .customize-section-title .customize-action {
3032          font-size: 13px;
3033          display: block;
3034          font-weight: 400;
3035          overflow: hidden;
3036          white-space: nowrap;
3037          text-overflow: ellipsis;
3038      }
3039  
3040      #available-widgets-filter {
3041          position: relative;
3042          width: 100%;
3043          height: auto;
3044      }
3045  
3046      #available-widgets-list {
3047          top: 152px;
3048      }
3049  
3050      #available-menu-items-search .clear-results {
3051          top: 36px;
3052          right: 16px;
3053      }
3054  
3055      .reorder,
3056      .reordering .reorder-done {
3057          padding: 8px;
3058      }
3059  }
3060  
3061  @media screen and (max-width: 600px) {
3062      .wp-full-overlay.expanded {
3063          margin-left: 0;
3064      }
3065  
3066      body.adding-widget div#available-widgets,
3067      body.adding-menu-items div#available-menu-items,
3068      body.outer-section-open div#customize-sidebar-outer-content {
3069          top: 46px;
3070          z-index: 10;
3071      }
3072  
3073      body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
3074          left: -100%;
3075      }
3076  
3077      body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
3078          left: 0;
3079      }
3080  }