[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      overflow: hidden;
 476      white-space: nowrap;
 477      text-overflow: ellipsis;
 478  }
 479  
 480  #customize-controls .customize-info .customize-help-toggle {
 481      position: absolute;
 482      top: 4px;
 483      left: 1px;
 484      padding: 20px 10px 10px 20px;
 485      width: 20px;
 486      height: 20px;
 487      cursor: pointer;
 488      box-shadow: none;
 489      background: transparent;
 490      color: #50575e;
 491      border: none;
 492  }
 493  
 494  #customize-controls .customize-info .customize-help-toggle::before {
 495      position: absolute;
 496      top: 5px;
 497      right: 6px;
 498  }
 499  
 500  #customize-controls .customize-info .customize-panel-description,
 501  #customize-controls .customize-info .customize-section-description,
 502  #customize-outer-theme-controls .customize-info .customize-section-description,
 503  #customize-controls .no-widget-areas-rendered-notice {
 504      color: #50575e;
 505      display: none;
 506      background: #fff;
 507      padding: 12px 15px;
 508      border-top: 1px solid #dcdcde;
 509  }
 510  
 511  #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 512      border-top: none;
 513  }
 514  
 515  .no-widget-areas-rendered-notice {
 516      font-style: italic;
 517  }
 518  
 519  .no-widget-areas-rendered-notice p:first-child {
 520      margin-top: 0;
 521  }
 522  
 523  .no-widget-areas-rendered-notice p:last-child {
 524      margin-bottom: 0;
 525  }
 526  
 527  #customize-controls .customize-info .customize-section-description {
 528      margin-bottom: 15px;
 529  }
 530  
 531  #customize-controls .customize-info .customize-panel-description p:first-child,
 532  #customize-controls .customize-info .customize-section-description p:first-child {
 533      margin-top: 0;
 534  }
 535  
 536  #customize-controls .customize-info .customize-panel-description p:last-child,
 537  #customize-controls .customize-info .customize-section-description p:last-child {
 538      margin-bottom: 0;
 539  }
 540  
 541  #customize-controls .current-panel .control-section > h3.accordion-section-title {
 542      padding-left: 30px;
 543  }
 544  
 545  #customize-theme-controls .control-section,
 546  #customize-outer-theme-controls .control-section {
 547      border: none;
 548  }
 549  
 550  #customize-theme-controls .accordion-section-title,
 551  #customize-outer-theme-controls .accordion-section-title {
 552      color: #50575e;
 553      background-color: #fff;
 554      border-bottom: 1px solid #dcdcde;
 555      border-right: 4px solid #fff;
 556      transition:
 557          0.15s color ease-in-out,
 558          0.15s background-color ease-in-out,
 559          0.15s border-color ease-in-out;
 560  }
 561  
 562  .accordion-section-title:has(button.accordion-trigger),
 563  #customize-controls .current-panel .control-section > h3.accordion-section-title:has(button.accordion-trigger) {
 564      padding: 0;
 565  }
 566  
 567  .accordion-section-title button.accordion-trigger {
 568      all: unset;
 569      width: 100%;
 570      padding: 10px 14px 11px 30px;
 571      display: flex;
 572      align-items: center;
 573      box-sizing: border-box;
 574  }
 575  
 576  .accordion-section-title button.accordion-trigger:has(.menu-in-location) {
 577      display: block;
 578  }
 579  
 580  .accordion-section-title button.accordion-trigger .spinner {
 581      margin-top: 0;
 582  }
 583  
 584  @media (prefers-reduced-motion: reduce) {
 585      #customize-theme-controls .accordion-section-title,
 586      #customize-outer-theme-controls .accordion-section-title {
 587          transition: none;
 588      }
 589  }
 590  
 591  #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
 592      color: #50575e;
 593      background-color: #fff;
 594      border-right: 4px solid #fff;
 595  }
 596  
 597  #customize-theme-controls .accordion-section-title::after,
 598  #customize-outer-theme-controls .accordion-section-title::after {
 599      content: "\f341";
 600      content: "\f341" / "";
 601      color: #a7aaad;
 602      pointer-events: none;
 603  }
 604  
 605  #customize-theme-controls .accordion-section-content,
 606  #customize-outer-theme-controls .accordion-section-content {
 607      color: #50575e;
 608      background: transparent;
 609  }
 610  
 611  #accordion-section-themes + .control-section {
 612      border-top: 1px solid #dcdcde;
 613  }
 614  
 615  .js .control-section:hover .accordion-section-title,
 616  .js .control-section .accordion-section-title:hover,
 617  .js .control-section.open .accordion-section-title,
 618  .js .control-section .accordion-section-title:focus {
 619      background: #f6f7f7;
 620  }
 621  
 622  #customize-theme-controls .control-section.open {
 623      border-bottom: 1px solid #f0f0f1;
 624  }
 625  
 626  #customize-theme-controls .control-section.open .accordion-section-title,
 627  #customize-outer-theme-controls .control-section.open .accordion-section-title {
 628      border-bottom-color: #f0f0f1 !important;
 629  }
 630  
 631  #customize-theme-controls .control-section:last-of-type.open,
 632  #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 633      border-bottom-color: #dcdcde;
 634  }
 635  
 636  #customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
 637  #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
 638  #customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
 639      border-top: 1px solid #dcdcde;
 640  }
 641  
 642  #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
 643      border-top: none;
 644  }
 645  
 646  #customize-theme-controls > ul {
 647      margin: 0;
 648  }
 649  
 650  #customize-theme-controls .accordion-section-content {
 651      position: absolute;
 652      top: 0;
 653      right: 100%;
 654      width: 100%;
 655      margin: 0;
 656      padding: 12px;
 657      box-sizing: border-box;
 658  }
 659  
 660  #customize-info,
 661  #customize-theme-controls .customize-pane-parent,
 662  #customize-theme-controls .customize-pane-child {
 663      overflow: visible;
 664      width: 100%;
 665      margin: 0;
 666      padding: 0;
 667      box-sizing: border-box;
 668      transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
 669  }
 670  
 671  @media (prefers-reduced-motion: reduce) {
 672      #customize-info,
 673      #customize-theme-controls .customize-pane-parent,
 674      #customize-theme-controls .customize-pane-child {
 675          transition: none;
 676      }
 677  }
 678  
 679  #customize-theme-controls .customize-pane-child.skip-transition {
 680      transition: none;
 681  }
 682  
 683  #customize-info,
 684  #customize-theme-controls .customize-pane-parent {
 685      position: relative;
 686      visibility: visible;
 687      height: auto;
 688      max-height: none;
 689      overflow: auto;
 690      transform: none;
 691  }
 692  
 693  #customize-theme-controls .customize-pane-child {
 694      position: absolute;
 695      top: 0;
 696      right: 0;
 697      visibility: hidden;
 698      height: 0;
 699      max-height: none;
 700      overflow: hidden;
 701      transform: translateX(-100%);
 702  }
 703  
 704  #customize-theme-controls .customize-pane-child.open,
 705  #customize-theme-controls .customize-pane-child.current-panel {
 706      transform: none;
 707  }
 708  
 709  .section-open #customize-theme-controls .customize-pane-parent,
 710  .in-sub-panel #customize-theme-controls .customize-pane-parent,
 711  .section-open #customize-info,
 712  .in-sub-panel #customize-info,
 713  .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
 714      visibility: hidden;
 715      height: 0;
 716      overflow: hidden;
 717      transform: translateX(100%);
 718  }
 719  
 720  .section-open #customize-theme-controls .customize-pane-parent.busy,
 721  .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
 722  .section-open #customize-info.busy,
 723  .in-sub-panel #customize-info.busy,
 724  .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
 725  #customize-theme-controls .customize-pane-child.open,
 726  #customize-theme-controls .customize-pane-child.current-panel,
 727  #customize-theme-controls .customize-pane-child.busy {
 728      visibility: visible;
 729      height: auto;
 730      overflow: auto;
 731  }
 732  
 733  #customize-theme-controls .customize-pane-child.accordion-section-content,
 734  #customize-theme-controls .customize-pane-child.accordion-sub-container {
 735      display: block;
 736      overflow-x: hidden;
 737  }
 738  
 739  #customize-theme-controls .customize-pane-child.accordion-section-content {
 740      padding: 12px;
 741  }
 742  
 743  #customize-theme-controls .customize-pane-child.menu li {
 744      position: static;
 745  }
 746  
 747  .customize-section-description-container,
 748  .control-section-nav_menu .customize-section-description-container,
 749  .control-section-new_menu .customize-section-description-container {
 750      margin-bottom: 15px;
 751  }
 752  
 753  .control-section-nav_menu .customize-control,
 754  .control-section-new_menu .customize-control {
 755      /* Override default `margin-bottom` for `.customize-control` */
 756      margin-bottom: 0;
 757  }
 758  
 759  .customize-section-title {
 760      margin: -12px -12px 0;
 761      border-bottom: 1px solid #dcdcde;
 762      background: #fff;
 763  }
 764  
 765  div.customize-section-description {
 766      margin-top: 22px;
 767  }
 768  
 769  .customize-info div.customize-section-description {
 770      margin-top: 0;
 771  }
 772  
 773  div.customize-section-description p:first-child {
 774      margin-top: 0;
 775  }
 776  
 777  div.customize-section-description p:last-child {
 778      margin-bottom: 0;
 779  }
 780  
 781  #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 782      border-bottom: 1px solid #dcdcde;
 783      padding: 12px;
 784  }
 785  
 786  .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
 787      padding: 12px 12px 13px;
 788  }
 789  
 790  .customize-section-title h3,
 791  h3.customize-section-title {
 792      padding: 10px 14px 12px 10px;
 793      margin: 0;
 794      /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Can't be unitless because of backward compatibility reasons. */
 795      line-height: 21px;
 796      color: #50575e;
 797  }
 798  
 799  .accordion-sub-container.control-panel-content {
 800      display: none;
 801      position: absolute;
 802      top: 0;
 803      width: 100%;
 804  }
 805  
 806  .accordion-sub-container.control-panel-content.busy {
 807      display: block;
 808  }
 809  
 810  .current-panel .accordion-sub-container.control-panel-content {
 811      width: 100%;
 812  }
 813  
 814  .customize-controls-close {
 815      display: block;
 816      position: absolute;
 817      top: 0;
 818      right: 0;
 819      width: 45px;
 820      height: 41px;
 821      padding: 0 0 0 2px;
 822      background: #f0f0f1;
 823      border: none;
 824      border-top: 4px solid #f0f0f1;
 825      border-left: 1px solid #dcdcde;
 826      color: #3c434a;
 827      text-align: right;
 828      cursor: pointer;
 829      box-sizing: content-box;
 830  }
 831  
 832  @media (prefers-reduced-motion: no-preference) {
 833      .customize-controls-close {
 834          transition:
 835              color 0.15s ease-in-out,
 836              border-color 0.15s ease-in-out,
 837              background 0.15s ease-in-out;
 838      }
 839  }
 840  
 841  .customize-panel-back,
 842  .customize-section-back {
 843      display: block;
 844      float: right;
 845      width: 48px;
 846      height: 71px;
 847      padding: 0 0 0 24px;
 848      margin: 0;
 849      background: #fff;
 850      border: none;
 851      border-left: 1px solid #dcdcde;
 852      border-right: 4px solid #fff;
 853      box-shadow: none;
 854      cursor: pointer;
 855      transition:
 856          color 0.15s ease-in-out,
 857          border-color 0.15s ease-in-out,
 858          background 0.15s ease-in-out;
 859  }
 860  
 861  .customize-section-back {
 862      height: 74px;
 863  }
 864  
 865  .ios .customize-panel-back {
 866      display: none;
 867  }
 868  
 869  .ios .expanded.in-sub-panel .customize-panel-back {
 870      display: block;
 871  }
 872  
 873  #customize-controls .panel-meta.customize-info .accordion-section-title {
 874      margin-right: 48px;
 875      border-right: none;
 876  }
 877  
 878  #customize-controls .panel-meta.customize-info .accordion-section-title:hover,
 879  #customize-controls .cannot-expand:hover .accordion-section-title {
 880      background: #fff;
 881      color: #50575e;
 882      border-right-color: #fff;
 883  }
 884  
 885  .customize-controls-close:focus,
 886  .customize-controls-close:hover,
 887  .customize-controls-preview-toggle:focus,
 888  .customize-controls-preview-toggle:hover {
 889      background: #fff;
 890      box-shadow: none;
 891      /* Only visible in Windows High Contrast mode */
 892      outline: 1px solid transparent;
 893  }
 894  
 895  #customize-theme-controls .accordion-section-title:focus .customize-action {
 896      /* Only visible in Windows High Contrast mode */
 897      outline: 1px solid transparent;
 898      outline-offset: 1px;
 899  }
 900  
 901  .customize-panel-back:hover,
 902  .customize-panel-back:focus,
 903  .customize-section-back:hover,
 904  .customize-section-back:focus {
 905      background: #f6f7f7;
 906      box-shadow: none;
 907      /* Only visible in Windows High Contrast mode */
 908      outline: 2px solid transparent;
 909      outline-offset: -2px;
 910  }
 911  
 912  .customize-controls-close::before {
 913      font: 400 22px/45px dashicons;
 914      content: "\f335";
 915      content: "\f335" / "";
 916      position: relative;
 917      top: -3px;
 918      right: 13px;
 919  }
 920  
 921  .customize-panel-back::before,
 922  .customize-section-back::before {
 923      font: 400 20px/72px dashicons;
 924      content: "\f345";
 925      content: "\f345" / "";
 926      position: relative;
 927      right: 9px;
 928  }
 929  
 930  .wp-full-overlay-sidebar .wp-full-overlay-header {
 931      background-color: #f0f0f1;
 932      transition: padding ease-in-out 0.18s;
 933  }
 934  
 935  .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 936      padding-right: 62px;
 937  }
 938  
 939  p.customize-section-description {
 940      font-style: normal;
 941      margin-top: 22px;
 942      margin-bottom: 0;
 943  }
 944  
 945  .customize-section-description ul {
 946      margin-right: 1em;
 947  }
 948  
 949  .customize-section-description ul > li {
 950      list-style: disc;
 951  }
 952  
 953  .section-description-buttons {
 954      text-align: left;
 955  }
 956  
 957  .customize-control {
 958      width: 100%;
 959      float: right;
 960      clear: both;
 961      margin-bottom: 12px;
 962  }
 963  
 964  .customize-control input[type="text"],
 965  .customize-control input[type="password"],
 966  .customize-control input[type="email"],
 967  .customize-control input[type="number"],
 968  .customize-control input[type="search"],
 969  .customize-control input[type="tel"],
 970  .customize-control input[type="url"],
 971  .customize-control input[type="range"] {
 972      width: 100%;
 973      margin: 0;
 974  }
 975  
 976  .customize-control-hidden {
 977      margin: 0;
 978  }
 979  
 980  .customize-control-textarea textarea {
 981      width: 100%;
 982      resize: vertical;
 983  }
 984  
 985  .customize-control select {
 986      width: 100%;
 987  }
 988  
 989  .customize-control select[multiple] {
 990      height: auto;
 991  }
 992  
 993  .customize-control-title {
 994      display: block;
 995      font-size: 14px;
 996      line-height: 1.75;
 997      font-weight: 600;
 998      margin-bottom: 4px;
 999  }
1000  
1001  .customize-control-description {
1002      display: block;
1003      font-style: italic;
1004      line-height: 1.4;
1005      margin-top: 0;
1006      margin-bottom: 5px;
1007  }
1008  
1009  .customize-section-description a.external-link::after {
1010      font: 16px/11px dashicons;
1011      content: "\f504";
1012      content: "\f504" / "";
1013      top: 3px;
1014      position: relative;
1015      padding-right: 3px;
1016      display: inline-block;
1017      text-decoration: none;
1018  }
1019  
1020  .customize-control-color .color-picker,
1021  .customize-control-upload div {
1022      /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Can't be unitless because of backward compatibility reasons. */
1023      line-height: 28px;
1024  }
1025  
1026  .customize-control .customize-inside-control-row {
1027      line-height: 1.6;
1028      display: block;
1029      margin-right: 24px;
1030      padding-top: 6px;
1031      padding-bottom: 6px;
1032  }
1033  
1034  .customize-control-radio input,
1035  .customize-control-checkbox input,
1036  .customize-control-nav_menu_auto_add input {
1037      margin-left: 4px;
1038      margin-right: -24px;
1039  }
1040  
1041  .customize-control-radio {
1042      padding: 5px 0 10px;
1043  }
1044  
1045  .customize-control-radio .customize-control-title {
1046      margin-bottom: 0;
1047      line-height: 1.6;
1048  }
1049  
1050  .customize-control-radio .customize-control-title + .customize-control-description {
1051      margin-top: 7px;
1052  }
1053  
1054  .customize-control-radio label,
1055  .customize-control-checkbox label {
1056      vertical-align: top;
1057  }
1058  
1059  .customize-control .attachment-thumb.type-icon {
1060      float: right;
1061      margin: 10px;
1062      width: auto;
1063  }
1064  
1065  .customize-control .attachment-title {
1066      font-weight: 600;
1067      margin: 0;
1068      padding: 5px 10px;
1069  }
1070  
1071  .customize-control .attachment-meta {
1072      white-space: nowrap;
1073      overflow: hidden;
1074      text-overflow: ellipsis;
1075      margin: 0;
1076      padding: 0 10px;
1077  }
1078  
1079  .customize-control .attachment-meta-title {
1080      padding-top: 7px;
1081  }
1082  
1083  /* Remove descender space. */
1084  .customize-control .thumbnail-image,
1085  .customize-control-header .current,
1086  .customize-control .wp-media-wrapper.wp-video {
1087      line-height: 0;
1088  }
1089  
1090  .customize-control .thumbnail-image img {
1091      cursor: pointer;
1092  }
1093  
1094  #customize-controls .thumbnail-audio .thumbnail {
1095      max-width: 64px;
1096      max-height: 64px;
1097      margin: 10px;
1098      float: right;
1099  }
1100  
1101  #available-menu-items .accordion-section-content .new-content-item-wrapper,
1102  .customize-control-dropdown-pages .new-content-item-wrapper {
1103      width: calc(100% - 30px);
1104      padding: 8px 15px;
1105      position: absolute;
1106      bottom: 0;
1107      z-index: 10;
1108      background: #f0f0f1;
1109  }
1110  
1111  .customize-control-dropdown-pages .new-content-item-wrapper {
1112      width: 100%;
1113      padding: 0;
1114      position: static;
1115  }
1116  
1117  #available-menu-items .new-content-item-wrapper > label,
1118  .customize-control-dropdown-pages .new-content-item-wrapper > label {
1119      margin-bottom: 4px;
1120      display: block;
1121  }
1122  
1123  #available-menu-items .accordion-section-content .new-content-item,
1124  .customize-control-dropdown-pages .new-content-item {
1125      display: flex;
1126  }
1127  
1128  .customize-control-dropdown-pages .new-content-item {
1129      width: 100%;
1130      padding: 5px 1px 5px 0;
1131      position: relative;
1132  }
1133  
1134  .customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
1135      padding: 0;
1136  }
1137  
1138  .customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
1139      line-height: 1.6;
1140  }
1141  
1142  #available-menu-items .new-content-item .create-item-input,
1143  .customize-control-dropdown-pages .new-content-item .create-item-input {
1144      flex-grow: 10;
1145      width: 100%;
1146  }
1147  
1148  #available-menu-items .new-content-item .create-item-input {
1149      min-height: 32px;
1150      line-height: 2.15384615; /* 28px for 32px min-height with 13px font */
1151  }
1152  
1153  #available-menu-items .new-content-item .add-content,
1154  .customize-control-dropdown-pages .new-content-item .add-content {
1155      margin: 0 6px 0 0;
1156      flex-grow: 1;
1157  }
1158  
1159  #available-menu-items .new-content-item .add-content {
1160      min-height: 32px;
1161      line-height: 2.30769231; /* 30px for 32px min-height with 13px font */
1162  }
1163  
1164  .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
1165      border: 1px solid #d63638;
1166  }
1167  
1168  .customize-control-dropdown-pages .add-new-toggle {
1169      margin-right: 1px;
1170      font-weight: 600;
1171      line-height: 2.2;
1172  }
1173  
1174  #customize-preview iframe {
1175      width: 100%;
1176      height: 100%;
1177      position: absolute;
1178  }
1179  
1180  #customize-preview iframe + iframe {
1181      visibility: hidden;
1182  }
1183  
1184  .wp-full-overlay-sidebar {
1185      background: #f0f0f1;
1186      border-left: 1px solid #dcdcde;
1187  }
1188  
1189  /**
1190   * Notifications
1191   */
1192  
1193  #customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
1194      margin: 4px 0 8px;
1195      padding: 0;
1196      cursor: default;
1197  }
1198  
1199  #customize-controls .customize-control-widget_form.has-error .widget .widget-top,
1200  .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
1201      box-shadow: inset 0 0 0 2px #d63638;
1202      transition: 0.15s box-shadow linear;
1203  }
1204  
1205  #customize-controls .customize-control-notifications-container li.notice {
1206      list-style: none;
1207      margin: 0 0 6px;
1208      padding: 9px 14px;
1209      overflow: hidden;
1210  }
1211  
1212  #customize-controls .customize-control-notifications-container .notice.is-dismissible {
1213      padding-left: 38px;
1214  }
1215  
1216  .customize-control-notifications-container li.notice:last-child {
1217      margin-bottom: 0;
1218  }
1219  
1220  #customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
1221      margin-top: 0;
1222  }
1223  
1224  #customize-controls .customize-control-widget_form .customize-control-notifications-container {
1225      margin-top: 8px;
1226  }
1227  
1228  .customize-control-text.has-error input {
1229      outline: 2px solid #d63638;
1230  }
1231  
1232  #customize-controls #customize-notifications-area {
1233      position: absolute;
1234      top: 46px;
1235      width: 100%;
1236      border-bottom: 1px solid #dcdcde;
1237      display: block;
1238      padding: 0;
1239      margin: 0;
1240  }
1241  
1242  .wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
1243      display: none !important;
1244  }
1245  
1246  #customize-controls #customize-notifications-area:not(.has-overlay-notifications),
1247  #customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications),
1248  #customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) {
1249      max-height: 210px;
1250      overflow-x: hidden;
1251      overflow-y: auto;
1252  }
1253  
1254  #customize-controls #customize-notifications-area > ul,
1255  #customize-controls #customize-notifications-area .notice,
1256  #customize-controls .panel-meta > .customize-control-notifications-container,
1257  #customize-controls .panel-meta > .customize-control-notifications-container .notice,
1258  #customize-controls .customize-section-title > .customize-control-notifications-container,
1259  #customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1260      margin: 0;
1261  }
1262  
1263  #customize-controls .panel-meta > .customize-control-notifications-container,
1264  #customize-controls .customize-section-title > .customize-control-notifications-container {
1265      border-top: 1px solid #dcdcde;
1266  }
1267  
1268  #customize-controls #customize-notifications-area .notice,
1269  #customize-controls .panel-meta > .customize-control-notifications-container .notice,
1270  #customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1271      padding: 9px 14px;
1272  }
1273  
1274  #customize-controls #customize-notifications-area .notice.is-dismissible,
1275  #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
1276  #customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible {
1277      padding-left: 38px;
1278  }
1279  
1280  #customize-controls #customize-notifications-area .notice + .notice,
1281  #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
1282  #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
1283      margin-top: 1px;
1284  }
1285  
1286  @keyframes customize-fade-in {
1287      0% {
1288          opacity: 0;
1289      }
1290  
1291      100% {
1292          opacity: 1;
1293      }
1294  }
1295  
1296  #customize-controls .notice.notification-overlay,
1297  #customize-controls #customize-notifications-area .notice.notification-overlay {
1298      margin: 0;
1299      border-right: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
1300  }
1301  
1302  #customize-controls .customize-control-notifications-container.has-overlay-notifications {
1303      animation: customize-fade-in 0.5s;
1304      z-index: 30;
1305  }
1306  
1307  /* Note: Styles for this are also defined in themes.css */
1308  #customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
1309      clear: both;
1310      color: #1d2327;
1311      font-size: 18px;
1312      font-style: normal;
1313      margin: 0;
1314      padding: 2em 0;
1315      text-align: center;
1316      width: 100%;
1317      display: block;
1318      top: 50%;
1319      position: relative;
1320  }
1321  
1322  /* Style for custom settings */
1323  
1324  /**
1325   * Static front page
1326   */
1327  
1328  #customize-control-show_on_front.has-error {
1329      margin-bottom: 0;
1330  }
1331  
1332  #customize-control-show_on_front.has-error .customize-control-notifications-container {
1333      margin-top: 12px;
1334  }
1335  
1336  /**
1337   * Dropdowns
1338   */
1339  
1340  .accordion-section .dropdown {
1341      float: right;
1342      display: block;
1343      position: relative;
1344      cursor: pointer;
1345  }
1346  
1347  /* @todo maybe no more used? */
1348  .accordion-section .dropdown-content {
1349      overflow: hidden;
1350      float: right;
1351      min-width: 30px;
1352      height: 16px;
1353      /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Legacy UI likely no longer used. */
1354      line-height: 16px;
1355      margin-left: 16px;
1356      padding: 4px 5px;
1357      border: 2px solid #f0f0f1;
1358      -webkit-user-select: none;
1359      user-select: none;
1360  }
1361  
1362  /* @todo maybe no more used? */
1363  .customize-control .dropdown-arrow {
1364      position: absolute;
1365      top: 0;
1366      bottom: 0;
1367      left: 0;
1368      width: 20px;
1369      background: #f0f0f1;
1370  }
1371  
1372  .customize-control .dropdown-arrow::after {
1373      content: "\f140";
1374      content: "\f140" / "";
1375      font: 400 20px/1 dashicons;
1376      display: block;
1377      padding: 0;
1378      text-indent: 0;
1379      text-align: center;
1380      position: relative;
1381      -webkit-font-smoothing: antialiased;
1382      -moz-osx-font-smoothing: grayscale;
1383      text-decoration: none !important;
1384      color: #2c3338;
1385  }
1386  
1387  .customize-control .dropdown-status {
1388      color: #2c3338;
1389      background: #f0f0f1;
1390      display: none;
1391      max-width: 112px;
1392  }
1393  
1394  .customize-control-color .dropdown {
1395      margin-left: 5px;
1396      margin-bottom: 5px;
1397  }
1398  
1399  .customize-control-color .dropdown .dropdown-content {
1400      background-color: #50575e;
1401      border: 1px solid rgba(0, 0, 0, 0.15);
1402  }
1403  
1404  .customize-control-color .dropdown:hover .dropdown-content {
1405      border-color: rgba(0, 0, 0, 0.25);
1406  }
1407  
1408  /**
1409   * iOS can't scroll iframes,
1410   * instead it expands the iframe size to match the size of the content
1411   */
1412  
1413  .ios .wp-full-overlay {
1414      position: relative;
1415  }
1416  
1417  .ios #customize-controls .wp-full-overlay-sidebar-content {
1418      -webkit-overflow-scrolling: touch;
1419  }
1420  
1421  /* Media controls */
1422  
1423  .customize-control .actions .button {
1424      margin-top: 12px;
1425  }
1426  
1427  .customize-control-header .actions,
1428  .customize-control-header .uploaded {
1429      margin-bottom: 18px;
1430  }
1431  
1432  .customize-control-header .uploaded button:not(.random),
1433  .customize-control-header .default button:not(.random) {
1434      width: 100%;
1435      padding: 0;
1436      margin: 0;
1437      background: none;
1438      border: none;
1439      color: inherit;
1440      cursor: pointer;
1441  }
1442  
1443  .customize-control-header button img {
1444      display: block;
1445  }
1446  
1447  .customize-control .attachment-media-view .remove-button,
1448  .customize-control .attachment-media-view .default-button,
1449  .customize-control .attachment-media-view .upload-button,
1450  .customize-control-header button.new,
1451  .customize-control-header button.remove {
1452      width: auto;
1453      height: auto;
1454      white-space: normal;
1455  }
1456  
1457  .customize-control .attachment-media-view .upload-button {
1458      width: 100%;
1459      text-align: center;
1460  }
1461  
1462  .customize-control .attachment-media-view .upload-button.control-focus {
1463      width: auto;
1464  }
1465  
1466  .customize-control.customize-control-header .actions .upload-button.button.new {
1467      width: 100%;
1468      text-align: center;
1469  }
1470  
1471  .customize-control .attachment-media-view .thumbnail,
1472  .customize-control-header .current .container {
1473      overflow: hidden;
1474  }
1475  
1476  .customize-control .attachment-media-view .placeholder,
1477  .customize-control .attachment-media-view .button-add-media,
1478  .customize-control-header .placeholder {
1479      width: 100%;
1480      position: relative;
1481      text-align: center;
1482      cursor: default;
1483      border: 1px dashed #c3c4c7;
1484      box-sizing: border-box;
1485      padding: 9px 0;
1486      line-height: 1.6;
1487  }
1488  
1489  .customize-control .attachment-media-view .button-add-media {
1490      cursor: pointer;
1491      background-color: #f0f0f1;
1492      color: #2c3338;
1493  }
1494  
1495  .customize-control .attachment-media-view .button-add-media:hover {
1496      background-color: #fff;
1497  }
1498  
1499  .customize-control .attachment-media-view .button-add-media:focus {
1500      background-color: #fff;
1501      border-color: #3582c4;
1502      border-style: solid;
1503      box-shadow: 0 0 0 1px #3582c4;
1504      /* Only visible in Windows High Contrast mode */
1505      outline: 2px solid transparent;
1506  }
1507  
1508  .customize-control-header .inner {
1509      display: none;
1510      position: absolute;
1511      width: 100%;
1512      color: #50575e;
1513      white-space: nowrap;
1514      text-overflow: ellipsis;
1515      overflow: hidden;
1516  }
1517  
1518  .customize-control-header .inner,
1519  .customize-control-header .inner .dashicons {
1520      /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Used for dashicons. */
1521      line-height: 20px;
1522      top: 8px;
1523  }
1524  
1525  .customize-control-header .list .inner,
1526  .customize-control-header .list .inner .dashicons {
1527      top: 9px;
1528  }
1529  
1530  .customize-control-header .header-view {
1531      position: relative;
1532      width: 100%;
1533      margin-bottom: 12px;
1534  }
1535  
1536  .customize-control-header .header-view:last-child {
1537      margin-bottom: 0;
1538  }
1539  
1540  /* Convoluted, but 'outline' support isn't good enough yet */
1541  .customize-control-header .header-view::after {
1542      border: 0;
1543  }
1544  
1545  .customize-control-header .header-view.selected .choice:focus {
1546      outline: none;
1547  }
1548  
1549  .customize-control-header .header-view.selected::after {
1550      content: "";
1551      position: absolute;
1552      height: auto;
1553      top: 0;
1554      right: 0;
1555      bottom: 0;
1556      left: 0;
1557      border: 4px solid #72aee6;
1558      border-radius: 2px;
1559  }
1560  
1561  .customize-control-header .header-view.button.selected {
1562      border: 0;
1563  }
1564  
1565  /* Header control: overlay "close" button */
1566  
1567  .customize-control-header .uploaded .header-view .close {
1568      font-size: 20px;
1569      color: #fff;
1570      background: #50575e;
1571      background: rgba(0, 0, 0, 0.5);
1572      position: absolute;
1573      top: 10px;
1574      right: -999px;
1575      z-index: 1;
1576      width: 26px;
1577      height: 26px;
1578      cursor: pointer;
1579  }
1580  
1581  .customize-control-header .header-view:hover .close,
1582  .customize-control-header .header-view .close:focus {
1583      right: auto;
1584      left: 10px;
1585  }
1586  
1587  .customize-control-header .header-view .close:focus {
1588      outline: 1px solid #4f94d4;
1589  }
1590  
1591  /* Header control: randomiz(s)er */
1592  
1593  .customize-control-header .random.placeholder {
1594      cursor: pointer;
1595      border-radius: 2px;
1596      height: 40px;
1597  }
1598  
1599  .customize-control-header button.random {
1600      width: 100%;
1601      height: auto;
1602      min-height: 40px;
1603      white-space: normal;
1604  }
1605  
1606  .customize-control-header button.random .dice {
1607      margin-top: 0;
1608  }
1609  
1610  .customize-control-header .placeholder:hover .dice,
1611  .customize-control-header .header-view:hover > button.random .dice {
1612      animation: dice-color-change 3s infinite;
1613  }
1614  
1615  .button-see-me {
1616      animation: bounce 0.7s 1;
1617      transform-origin: center bottom;
1618  }
1619  
1620  @keyframes bounce {
1621      from,
1622      20%,
1623      53%,
1624      80%,
1625      to {
1626          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1627          transform: translate3d(0, 0, 0);
1628      }
1629  
1630      40%,
1631      43% {
1632          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
1633          transform: translate3d(0, -12px, 0);
1634      }
1635  
1636      70% {
1637          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
1638          transform: translate3d(0, -6px, 0);
1639      }
1640  
1641      90% {
1642          transform: translate3d(0, -1px, 0);
1643      }
1644  }
1645  
1646  .customize-control-header .choice {
1647      position: relative;
1648      display: block;
1649      margin-bottom: 9px;
1650  }
1651  
1652  .customize-control-header .choice:focus {
1653      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
1654      /* Only visible in Windows High Contrast mode */
1655      outline: 2px solid transparent;
1656  }
1657  
1658  .customize-control-header .uploaded div:last-child > .choice {
1659      margin-bottom: 0;
1660  }
1661  
1662  .customize-control .attachment-media-view .thumbnail-image img,
1663  .customize-control-header img {
1664      max-width: 100%;
1665  }
1666  
1667  .customize-control .attachment-media-view .remove-button,
1668  .customize-control .attachment-media-view .default-button,
1669  .customize-control-header .remove {
1670      margin-left: 8px;
1671  }
1672  
1673  /* Background position control */
1674  .customize-control-background_position .background-position-control .button-group {
1675      display: block;
1676  }
1677  
1678  /**
1679   * Code Editor Control and Custom CSS Section
1680   *
1681   * Modifications to the Section Container to make the textarea full-width and
1682   * full-height, if the control is the only control in the section.
1683   */
1684  
1685  .customize-control-code_editor textarea {
1686      width: 100%;
1687      font-family: Consolas, Monaco, monospace;
1688      font-size: 12px;
1689      padding: 6px 8px;
1690      tab-size: 2;
1691  }
1692  
1693  .customize-control-code_editor textarea,
1694  .customize-control-code_editor .CodeMirror {
1695      height: 14em;
1696  }
1697  
1698  #customize-controls .customize-section-description-container.section-meta.customize-info {
1699      border-bottom: none;
1700  }
1701  
1702  #sub-accordion-section-custom_css .customize-control-notifications-container {
1703      margin-bottom: 15px;
1704  }
1705  
1706  #customize-control-custom_css textarea {
1707      display: block;
1708      height: 500px;
1709  }
1710  
1711  .customize-section-description-container + #customize-control-custom_css .customize-control-title {
1712      margin-right: 12px;
1713  }
1714  
1715  .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1716      border-left: 0;
1717      border-right: 0;
1718      height: calc(100vh - 185px);
1719      resize: none;
1720  }
1721  
1722  .customize-section-description-container + #customize-control-custom_css:last-child {
1723      margin-right: -12px;
1724      width: 299px;
1725      width: calc(100% + 24px);
1726      margin-bottom: -12px;
1727  }
1728  
1729  .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1730      height: calc(100vh - 185px);
1731  }
1732  
1733  .CodeMirror-lint-tooltip,
1734  .CodeMirror-hints {
1735      z-index: 500000 !important;
1736  }
1737  
1738  .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1739      margin-right: 12px;
1740      margin-left: 12px;
1741  }
1742  
1743  .theme-browser .theme.active .theme-actions,
1744  .wp-customizer .theme-browser .theme .theme-actions {
1745      padding: 9px 15px;
1746  }
1747  
1748  .theme-browser .theme:not(.active) .theme-actions {
1749      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1750  }
1751  
1752  @media screen and (max-width: 640px) {
1753      .customize-section-description-container + #customize-control-custom_css:last-child {
1754          margin-left: 0;
1755      }
1756  
1757      .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1758          height: calc(100vh - 140px);
1759      }
1760  }
1761  
1762  /**
1763   * Themes
1764   */
1765  
1766  #customize-theme-controls .control-panel-themes {
1767      border-bottom: none;
1768  }
1769  
1770  #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1771  #customize-theme-controls .control-panel-themes > .accordion-section-title {
1772      cursor: default;
1773      background: #fff;
1774      color: #50575e;
1775      border-top: 1px solid #dcdcde;
1776      border-bottom: 1px solid #dcdcde;
1777      border-right: none;
1778      border-left: none;
1779      margin: 0 0 15px;
1780      padding: 12px 15px 15px 100px; /* Space for the button */
1781  }
1782  
1783  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1784  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1785      border-top: 0;
1786  }
1787  
1788  #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1789  #customize-theme-controls .control-section-themes > .accordion-section-title {
1790      margin: 0 0 15px;
1791  }
1792  
1793  #customize-controls .customize-themes-panel .accordion-section-title:hover,
1794  #customize-controls .customize-themes-panel .accordion-section-title {
1795      margin: 15px -8px;
1796  }
1797  
1798  #customize-controls .control-section-themes .accordion-section-title,
1799  #customize-controls .customize-themes-panel .accordion-section-title {
1800      padding-left: 100px; /* Space for the button */
1801  }
1802  
1803  .control-panel-themes .accordion-section-title span.customize-action,
1804  #customize-controls .customize-section-title span.customize-action,
1805  #customize-controls .control-section-themes .accordion-section-title span.customize-action {
1806      font-size: 13px;
1807      display: block;
1808      font-weight: 400;
1809  }
1810  
1811  #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1812      position: absolute;
1813      left: 10px;
1814      top: 50%;
1815      margin-top: -20px; /* Half of 40px button height for vertical centering */
1816      font-weight: 400;
1817  }
1818  
1819  #customize-notifications-area .notification-message button.switch-to-editor {
1820      display: block;
1821      margin-top: 6px;
1822      font-weight: 400;
1823  }
1824  
1825  #customize-theme-controls .control-panel-themes > .accordion-section-title::after {
1826      display: none;
1827  }
1828  
1829  .control-panel-themes .customize-themes-full-container {
1830      position: fixed;
1831      top: 0;
1832      right: 0;
1833      transition: 0.18s right ease-in-out;
1834      margin: 0 300px 0 0;
1835      padding: 71px 0 25px;
1836      overflow-y: scroll;
1837      width: calc(100% - 300px);
1838      height: calc(100% - 96px);
1839      background: #f0f0f1;
1840      z-index: 20;
1841  }
1842  
1843  @media (prefers-reduced-motion: reduce) {
1844      .control-panel-themes .customize-themes-full-container {
1845          transition: none;
1846      }
1847  }
1848  
1849  @media screen and (min-width: 1670px) {
1850      .control-panel-themes .customize-themes-full-container {
1851          width: 82%;
1852          left: 0;
1853          right: initial;
1854      }
1855  }
1856  
1857  .modal-open .control-panel-themes .customize-themes-full-container {
1858      overflow-y: visible;
1859  }
1860  
1861  /* Animations for opening the themes panel */
1862  #customize-save-button-wrapper,
1863  #customize-header-actions .spinner,
1864  #customize-header-actions .customize-controls-preview-toggle {
1865      transition: 0.18s margin ease-in-out;
1866  }
1867  
1868  #customize-footer-actions,
1869  #customize-footer-actions .collapse-sidebar {
1870      bottom: 0;
1871      transition: 0.18s bottom ease-in-out;
1872  }
1873  
1874  .in-themes-panel:not(.animating) #customize-header-actions .spinner,
1875  .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1876  .in-themes-panel:not(.animating) #customize-preview,
1877  .in-themes-panel:not(.animating) #customize-footer-actions {
1878      visibility: hidden;
1879  }
1880  
1881  .wp-full-overlay.in-themes-panel {
1882      background: #f0f0f1; /* Prevents a black flash when fading in the panel */
1883  }
1884  
1885  .in-themes-panel #customize-save-button-wrapper,
1886  .in-themes-panel #customize-header-actions .spinner,
1887  .in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1888      margin-top: -46px; /* Height of header actions bar */
1889  }
1890  
1891  .in-themes-panel #customize-footer-actions,
1892  .in-themes-panel #customize-footer-actions .collapse-sidebar {
1893      bottom: -45px;
1894  }
1895  
1896  /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1897  .in-themes-panel.animating .control-panel-themes .filter-themes-count {
1898      display: none;
1899  }
1900  
1901  .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1902      bottom: 0;
1903  }
1904  
1905  .themes-filter-bar .feature-filter-toggle {
1906      min-height: 32px;
1907      line-height: 2.30769231;
1908  }
1909  
1910  .themes-filter-bar .feature-filter-toggle::before {
1911      content: "\f111";
1912      content: "\f111" / "";
1913      margin: 0 0 0 5px;
1914      font: 400 16px/1 dashicons;
1915      vertical-align: text-bottom;
1916      -webkit-font-smoothing: antialiased;
1917      -moz-osx-font-smoothing: grayscale;
1918  }
1919  
1920  .themes-filter-bar .feature-filter-toggle.open {
1921      background: #f0f0f1;
1922      border-color: #8c8f94;
1923      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1924  }
1925  
1926  .themes-filter-bar .feature-filter-toggle .filter-count-filters {
1927      display: none;
1928  }
1929  
1930  .filter-drawer {
1931      box-sizing: border-box;
1932      width: 100%;
1933      position: absolute;
1934      top: 46px;
1935      right: 0;
1936      padding: 25px 25px 25px 0;
1937      border-top: 0;
1938      margin: 0;
1939      background: #f0f0f1;
1940      border-bottom: 1px solid #dcdcde;
1941  }
1942  
1943  .filter-drawer .filter-group {
1944      margin: 0 0 0 25px;
1945      width: calc((100% - 75px) / 3);
1946      min-width: 200px;
1947      max-width: 320px;
1948  }
1949  
1950  /* Adds a delay before fading in to avoid it "jumping" */
1951  @keyframes themes-fade-in {
1952      0% {
1953          opacity: 0;
1954      }
1955  
1956      50% {
1957          opacity: 0;
1958      }
1959  
1960      100% {
1961          opacity: 1;
1962      }
1963  }
1964  
1965  .control-panel-themes .customize-themes-full-container.animate {
1966      animation: 0.6s themes-fade-in 1;
1967  }
1968  
1969  .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1970      animation: 0.6s themes-fade-in 1;
1971  }
1972  
1973  .control-panel-themes .filter-themes-count .themes-displayed {
1974      font-weight: 600;
1975      color: #50575e;
1976  }
1977  
1978  .customize-themes-notifications {
1979      margin: 0;
1980  }
1981  
1982  .control-panel-themes .customize-themes-notifications .notice {
1983      margin: 0 0 25px;
1984  }
1985  
1986  .customize-themes-full-container .customize-themes-section {
1987      display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1988      overflow: hidden;
1989  }
1990  
1991  .customize-themes-full-container .customize-themes-section.current-section {
1992      display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1993  }
1994  
1995  .control-section .customize-section-text-before {
1996      padding: 0 15px 8px 0;
1997      margin: 15px 0 0;
1998      /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Legacy UI likely no longer used. */
1999      line-height: 16px;
2000      border-bottom: 1px solid #dcdcde;
2001      color: #50575e;
2002  }
2003  
2004  .control-panel-themes .customize-themes-section-title {
2005      width: 100%;
2006      background: #fff;
2007      box-shadow: none;
2008      outline: none;
2009      border-top: none;
2010      border-bottom: 1px solid #dcdcde;
2011      border-right: 4px solid #fff;
2012      border-left: none;
2013      cursor: pointer;
2014      padding: 10px 15px;
2015      position: relative;
2016      text-align: right;
2017      font-size: 14px;
2018      font-weight: 600;
2019      color: #50575e;
2020      text-shadow: none;
2021  }
2022  
2023  .control-panel-themes #accordion-section-installed_themes {
2024      border-top: 1px solid #dcdcde;
2025  }
2026  
2027  .control-panel-themes .theme-section {
2028      margin: 0;
2029      position: relative;
2030  }
2031  
2032  .control-panel-themes .customize-themes-section-title:focus,
2033  .control-panel-themes .customize-themes-section-title:hover {
2034      background: #f6f7f7;
2035  }
2036  
2037  .customize-themes-section-title:not(.selected)::after {
2038      content: "";
2039      display: block;
2040      position: absolute;
2041      top: 9px;
2042      left: 15px;
2043      width: 18px;
2044      height: 18px;
2045      border-radius: 100%;
2046      border: 1px solid #c3c4c7;
2047      background: #fff;
2048  }
2049  
2050  .control-panel-themes .theme-section .customize-themes-section-title.selected::after {
2051      content: "\f147";
2052      content: "\f147" / "";
2053      font: 16px/1 dashicons;
2054      box-sizing: border-box;
2055      width: 20px;
2056      height: 20px;
2057      padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
2058      border-radius: 100%;
2059      position: absolute;
2060      top: 9px;
2061      left: 15px;
2062      color: #fff;
2063  }
2064  
2065  #customize-theme-controls .themes.accordion-section-content {
2066      position: relative;
2067      right: 0;
2068      padding: 0;
2069      width: 100%;
2070  }
2071  
2072  .loading .customize-themes-section .spinner {
2073      display: block;
2074      visibility: visible;
2075      position: relative;
2076      clear: both;
2077      width: 20px;
2078      height: 20px;
2079      right: calc(50% - 10px);
2080      float: none;
2081      margin-top: 50px;
2082  }
2083  
2084  .customize-themes-section .no-themes,
2085  .customize-themes-section .no-themes-local {
2086      display: none;
2087  }
2088  
2089  .themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2090      display: none; /* Hide "installed" notice on installed themes tab. */
2091  }
2092  
2093  .customize-control-theme .theme {
2094      width: 100%;
2095      margin: 0;
2096      border: 1px solid #dcdcde;
2097      background: #fff;
2098  }
2099  
2100  .customize-control-theme .theme .theme-name,
2101  .customize-control-theme .theme .theme-actions {
2102      background: #fff;
2103      border: none;
2104  }
2105  
2106  .customize-control.customize-control-theme { /* override most properties on .customize-control */
2107      box-sizing: border-box;
2108      width: 25%;
2109      max-width: 600px; /* Max. screenshot size / 2 */
2110      margin: 0 0 25px 25px;
2111      padding: 0;
2112      clear: none;
2113  }
2114  
2115  /* 5 columns above 2100px */
2116  @media screen and (min-width: 2101px) {
2117      .customize-control.customize-control-theme {
2118          width: calc(( 100% - 125px ) / 5 - 1px); /* 1px offset accounts for browser rounding, typical all grids */
2119      }
2120  }
2121  
2122  /* 4 columns up to 2100px */
2123  @media screen and (min-width: 1601px) and (max-width: 2100px) {
2124      .customize-control.customize-control-theme {
2125          width: calc(( 100% - 100px ) / 4 - 1px);
2126      }
2127  }
2128  
2129  /* 3 columns up to 1600px */
2130  @media screen and (min-width: 1201px) and (max-width: 1600px) {
2131      .customize-control.customize-control-theme {
2132          width: calc(( 100% - 75px ) / 3 - 1px);
2133      }
2134  }
2135  
2136  /* 2 columns up to 1200px */
2137  @media screen and (min-width: 851px) and (max-width: 1200px) {
2138      .customize-control.customize-control-theme {
2139          width: calc(( 100% - 50px ) / 2 - 1px);
2140  
2141      }
2142  }
2143  
2144  /* 1 column up to 850 px */
2145  @media screen and (max-width: 850px) {
2146      .customize-control.customize-control-theme {
2147          width: 100%;
2148      }
2149  }
2150  
2151  .wp-customizer .theme-browser .themes {
2152      padding: 0 25px 25px 0;
2153      transition: 0.18s margin-top linear;
2154  }
2155  
2156  .wp-customizer .theme-browser .theme .theme-actions {
2157      opacity: 1;
2158  }
2159  
2160  #customize-controls h3.theme-name {
2161      font-size: 15px;
2162  }
2163  
2164  #customize-controls .theme-overlay .theme-name {
2165      font-size: 32px;
2166  }
2167  
2168  .customize-preview-header.themes-filter-bar {
2169      position: fixed;
2170      top: 0;
2171      right: 300px;
2172      width: calc(100% - 300px);
2173      height: 46px;
2174      background: #f0f0f1;
2175      z-index: 10;
2176      padding: 6px 25px;
2177      box-sizing: border-box;
2178      border-bottom: 1px solid #dcdcde;
2179  }
2180  
2181  .customize-preview-header.themes-filter-bar,
2182  .customize-preview-header.themes-filter-bar .search-form {
2183      display: flex;
2184      align-items: center;
2185      gap: 10px;
2186      flex-wrap: wrap;
2187  }
2188  
2189  .customize-preview-header.themes-filter-bar .search-form-input {
2190      position: relative;
2191  }
2192  
2193  .customize-preview-header .filter-themes-wrapper {
2194      display: grid;
2195      align-items: center;
2196      gap: 10px;
2197      grid-template-columns: auto 1fr;
2198  }
2199  
2200  .customize-preview-header .filter-themes-wrapper .filter-themes-count {
2201      justify-self: end;
2202  }
2203  
2204  @media screen and (min-width: 1670px) {
2205      .customize-preview-header.themes-filter-bar {
2206          width: 82%;
2207          left: 0;
2208          right: initial;
2209      }
2210  }
2211  
2212  .themes-filter-bar .themes-filter-container {
2213      margin: 0;
2214      padding: 0;
2215      display: flex;
2216      align-items: center;
2217      gap: 10px;
2218  }
2219  
2220  .themes-filter-bar .wp-filter-search {
2221      padding: 0 30px 0 10px;
2222      max-width: 100%;
2223      width: 40%;
2224      min-width: 300px;
2225      height: 32px;
2226      min-height: 32px; /* Override global 40px min-height for compact bar */
2227      margin: 1px 0;
2228      top: 0;
2229      right: 0;
2230  }
2231  
2232  /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
2233     current length of .org feature filters assuming translations do not wrap lines. */
2234  @media screen and (max-height: 540px), screen and (max-width: 1018px) {
2235      .customize-preview-header.themes-filter-bar {
2236          position: relative;
2237          right: 0;
2238          width: 100%;
2239          margin: 0 0 25px;
2240      }
2241  
2242      .filter-drawer {
2243          top: 46px;
2244      }
2245  
2246      .wp-customizer .theme-browser .themes {
2247          padding: 0 25px 25px 0;
2248          overflow: hidden;
2249      }
2250  
2251      .control-panel-themes .customize-themes-full-container {
2252          margin-top: 0;
2253          padding: 0;
2254          height: 100%;
2255          width: calc(100% - 300px);
2256      }
2257  }
2258  
2259  @media screen and (max-width: 1018px) {
2260      .filter-drawer .filter-group {
2261          width: calc((100% - 50px) / 2);
2262      }
2263  }
2264  
2265  @media screen and (max-width: 960px) {
2266      .customize-preview-header.themes-filter-bar {
2267          height: 96px;
2268      }
2269  }
2270  
2271  @media screen and (max-width: 900px) {
2272      .themes-filter-bar .wp-filter-search {
2273          width: 100%;
2274          margin: 0;
2275          min-width: 200px;
2276      }
2277  
2278      .customize-preview-header.themes-filter-bar,
2279      .customize-preview-header.themes-filter-bar .search-form .themes-filter-bar .themes-filter-container {
2280          display: grid;
2281          gap: 4px;
2282      }
2283  
2284      .customize-preview-header.themes-filter-bar .search-form-input {
2285          display: flex;
2286          flex-grow: 1;
2287      }
2288  
2289      .filter-drawer {
2290          top: 86px;
2291      }
2292  
2293      .control-panel-themes .filter-themes-count {
2294          float: right;
2295      }
2296  }
2297  
2298  @media screen and (max-width: 792px) {
2299      .filter-drawer .filter-group {
2300          width: calc(100% - 25px);
2301      }
2302  }
2303  
2304  .control-panel-themes .customize-themes-mobile-back {
2305      display: none;
2306  }
2307  
2308  /* Mobile - toggle between themes and filters */
2309  @media screen and (max-width: 600px) {
2310      .filter-drawer {
2311          top: 132px;
2312      }
2313  
2314      .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
2315          display: block;
2316          float: left;
2317      }
2318  
2319      .control-panel-themes .customize-themes-full-container {
2320          width: 100%;
2321          margin: 0;
2322          padding-top: 46px;
2323          height: calc(100% - 46px);
2324          z-index: 1;
2325          display: none;
2326      }
2327  
2328      .showing-themes .control-panel-themes .customize-themes-full-container {
2329          display: block;
2330      }
2331  
2332      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
2333          display: block;
2334          position: fixed;
2335          top: 0;
2336          right: 0;
2337          background: #f0f0f1;
2338          color: #3c434a;
2339          border-radius: 0;
2340          box-shadow: none;
2341          border: none;
2342          height: 46px;
2343          width: 100%;
2344          z-index: 10;
2345          text-align: right;
2346          text-shadow: none;
2347          border-bottom: 1px solid #dcdcde;
2348          border-right: 4px solid transparent;
2349          margin: 0;
2350          padding: 0;
2351          font-size: 0;
2352          overflow: hidden;
2353      }
2354  
2355      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back::before {
2356          right: 0;
2357          top: 0;
2358          height: 46px;
2359          width: 26px;
2360          display: block;
2361          line-height: 2.3;
2362          padding: 0 8px;
2363          border-left: 1px solid #dcdcde;
2364      }
2365  
2366      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
2367      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
2368          background: #f6f7f7;
2369          box-shadow: none;
2370          /* Only visible in Windows High Contrast mode */
2371          outline: 2px solid transparent;
2372          outline-offset: -2px;
2373      }
2374  
2375      .showing-themes #customize-header-actions {
2376          display: none;
2377      }
2378  
2379      #customize-controls {
2380          width: 100%;
2381      }
2382  }
2383  
2384  /* Details View */
2385  .wp-customizer .theme-overlay {
2386      display: none;
2387  }
2388  
2389  .wp-customizer.modal-open .theme-overlay {
2390      position: fixed;
2391      right: 0;
2392      top: 0;
2393      left: 0;
2394      bottom: 0;
2395      z-index: 109;
2396  }
2397  
2398  /* Avoid a z-index war by resetting elements that should be under the overlay.
2399     This is likely required because of the way that sections and panels are positioned. */
2400  .wp-customizer.modal-open #customize-header-actions,
2401  .wp-customizer.modal-open .control-panel-themes .filter-themes-count,
2402  .wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected::after {
2403      z-index: -1;
2404  }
2405  
2406  .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
2407      overflow: visible;
2408  }
2409  
2410  .wp-customizer .theme-overlay .theme-backdrop {
2411      background: rgba(240, 240, 241, 0.75);
2412      position: fixed;
2413      z-index: 110;
2414  }
2415  
2416  .wp-customizer .theme-overlay .star-rating {
2417      float: right;
2418      margin-left: 8px;
2419  }
2420  
2421  .wp-customizer .theme-rating .num-ratings {
2422      line-height: 1.5384;
2423  }
2424  
2425  .wp-customizer .theme-overlay .theme-wrap {
2426      right: 90px;
2427      left: 90px;
2428      top: 45px;
2429      bottom: 45px;
2430      z-index: 120;
2431  }
2432  
2433  .wp-customizer .theme-overlay .theme-actions {
2434      text-align: left; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
2435      padding: 10px 25px 5px;
2436      background: #f0f0f1;
2437      border-top: 1px solid #dcdcde;
2438  }
2439  
2440  .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
2441      margin-right: 8px;
2442  }
2443  
2444  .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
2445      overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
2446  }
2447  
2448  .wp-customizer .theme-header {
2449      background: #f0f0f1;
2450  }
2451  
2452  .wp-customizer .theme-overlay .theme-header button,
2453  .wp-customizer .theme-overlay .theme-header .close::before {
2454      color: #3c434a;
2455  }
2456  
2457  .wp-customizer .theme-overlay .theme-header .close:focus,
2458  .wp-customizer .theme-overlay .theme-header .close:hover,
2459  .wp-customizer .theme-overlay .theme-header .right:focus,
2460  .wp-customizer .theme-overlay .theme-header .right:hover,
2461  .wp-customizer .theme-overlay .theme-header .left:focus,
2462  .wp-customizer .theme-overlay .theme-header .left:hover {
2463      background: #fff;
2464  }
2465  
2466  .wp-customizer .theme-overlay .theme-header .close:focus::before,
2467  .wp-customizer .theme-overlay .theme-header .close:hover::before {
2468      color: var(--wp-admin-theme-color);
2469  }
2470  
2471  .wp-customizer .theme-overlay .theme-header button.disabled,
2472  .wp-customizer .theme-overlay .theme-header button.disabled:hover,
2473  .wp-customizer .theme-overlay .theme-header button.disabled:focus {
2474      border-bottom: none;
2475      background: transparent;
2476      color: #c3c4c7;
2477  }
2478  
2479  /* Small Screens */
2480  @media (max-width: 850px), (max-height: 472px) {
2481      .wp-customizer .theme-overlay .theme-wrap {
2482          right: 0;
2483          left: 0;
2484          top: 0;
2485          bottom: 0;
2486      }
2487  
2488      .wp-customizer .theme-browser .themes {
2489          padding-left: 25px;
2490      }
2491  }
2492  
2493  /* Handle cheaters. */
2494  body.cheatin {
2495      font-size: medium;
2496      height: auto;
2497      background: #fff;
2498      border: 1px solid #c3c4c7;
2499      margin: 50px auto 2em;
2500      padding: 1em 2em;
2501      max-width: 700px;
2502      min-width: 0;
2503      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2504  }
2505  
2506  body.cheatin h1 {
2507      border-bottom: 1px solid #dcdcde;
2508      clear: both;
2509      color: #50575e;
2510      font-size: 24px;
2511      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2512      margin: 30px 0 0;
2513      padding: 0 0 7px;
2514  }
2515  
2516  body.cheatin p {
2517      font-size: 14px;
2518      line-height: 1.5;
2519      margin: 25px 0 20px;
2520  }
2521  
2522  /**
2523   * Widgets and Menus common styles
2524   */
2525  
2526  .customize-control-nav_menu-buttons,
2527  .customize-control-widgets-buttons {
2528      display: flex;
2529      flex-wrap: wrap;
2530      justify-content: flex-end;
2531      align-items: center;
2532      gap: 8px;
2533  }
2534  
2535  /* higher specificity than .wp-core-ui .button */
2536  #customize-theme-controls .add-new-widget,
2537  #customize-theme-controls .add-new-menu-item {
2538      cursor: pointer;
2539      margin: 0;
2540      transition: all 0.2s;
2541      -webkit-user-select: none;
2542      user-select: none;
2543      outline: none;
2544  }
2545  
2546  .reordering .add-new-widget,
2547  .reordering .add-new-menu-item {
2548      opacity: 0.2;
2549      pointer-events: none;
2550      cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
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  }