[Summary view] [Print] [Text view]

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