[Summary view] [Print] [Text view]

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