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