[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      speak: never;
1363      display: block;
1364      padding: 0;
1365      text-indent: 0;
1366      text-align: center;
1367      position: relative;
1368      -webkit-font-smoothing: antialiased;
1369      -moz-osx-font-smoothing: grayscale;
1370      text-decoration: none !important;
1371      color: #2c3338;
1372  }
1373  
1374  .customize-control .dropdown-status {
1375      color: #2c3338;
1376      background: #f0f0f1;
1377      display: none;
1378      max-width: 112px;
1379  }
1380  
1381  .customize-control-color .dropdown {
1382      margin-right: 5px;
1383      margin-bottom: 5px;
1384  }
1385  
1386  .customize-control-color .dropdown .dropdown-content {
1387      background-color: #50575e;
1388      border: 1px solid rgba(0, 0, 0, 0.15);
1389  }
1390  
1391  .customize-control-color .dropdown:hover .dropdown-content {
1392      border-color: rgba(0, 0, 0, 0.25);
1393  }
1394  
1395  /**
1396   * iOS can't scroll iframes,
1397   * instead it expands the iframe size to match the size of the content
1398   */
1399  
1400  .ios .wp-full-overlay {
1401      position: relative;
1402  }
1403  
1404  .ios #customize-controls .wp-full-overlay-sidebar-content {
1405      -webkit-overflow-scrolling: touch;
1406  }
1407  
1408  /* Media controls */
1409  
1410  .customize-control .actions .button {
1411      margin-top: 12px;
1412  }
1413  
1414  .customize-control-header .actions,
1415  .customize-control-header .uploaded {
1416      margin-bottom: 18px;
1417  }
1418  
1419  .customize-control-header .uploaded button:not(.random),
1420  .customize-control-header .default button:not(.random) {
1421      width: 100%;
1422      padding: 0;
1423      margin: 0;
1424      background: none;
1425      border: none;
1426      color: inherit;
1427      cursor: pointer;
1428  }
1429  
1430  .customize-control-header button img {
1431      display: block;
1432  }
1433  
1434  .customize-control .attachment-media-view .remove-button,
1435  .customize-control .attachment-media-view .default-button,
1436  .customize-control .attachment-media-view .upload-button,
1437  .customize-control-header button.new,
1438  .customize-control-header button.remove {
1439      width: auto;
1440      height: auto;
1441      white-space: normal;
1442  }
1443  
1444  .customize-control .attachment-media-view .upload-button {
1445      width: 100%;
1446      padding: 9px 0;
1447  }
1448  
1449  .customize-control .attachment-media-view .upload-button.control-focus {
1450      width: auto;
1451      padding: 0 10px;
1452  }
1453  
1454  .customize-control.customize-control-header .actions .upload-button.button.new {
1455      width: 100%;
1456      padding: 9px 0;
1457  }
1458  
1459  .customize-control .attachment-media-view .thumbnail,
1460  .customize-control-header .current .container {
1461      overflow: hidden;
1462  }
1463  
1464  .customize-control .attachment-media-view .placeholder,
1465  .customize-control .attachment-media-view .button-add-media,
1466  .customize-control-header .placeholder {
1467      width: 100%;
1468      position: relative;
1469      text-align: center;
1470      cursor: default;
1471      border: 1px dashed #c3c4c7;
1472      box-sizing: border-box;
1473      padding: 9px 0;
1474      line-height: 1.6;
1475  }
1476  
1477  .customize-control .attachment-media-view .button-add-media {
1478      cursor: pointer;
1479      background-color: #f0f0f1;
1480      color: #2c3338;
1481  }
1482  
1483  .customize-control .attachment-media-view .button-add-media:hover {
1484      background-color: #fff;
1485  }
1486  
1487  .customize-control .attachment-media-view .button-add-media:focus {
1488      background-color: #fff;
1489      border-color: #3582c4;
1490      border-style: solid;
1491      box-shadow: 0 0 0 1px #3582c4;
1492      /* Only visible in Windows High Contrast mode */
1493      outline: 2px solid transparent;
1494  }
1495  
1496  .customize-control-header .inner {
1497      display: none;
1498      position: absolute;
1499      width: 100%;
1500      color: #50575e;
1501      white-space: nowrap;
1502      text-overflow: ellipsis;
1503      overflow: hidden;
1504  }
1505  
1506  .customize-control-header .inner,
1507  .customize-control-header .inner .dashicons {
1508      line-height: 20px;
1509      top: 8px;
1510  }
1511  
1512  .customize-control-header .list .inner,
1513  .customize-control-header .list .inner .dashicons {
1514      top: 9px;
1515  }
1516  
1517  .customize-control-header .header-view {
1518      position: relative;
1519      width: 100%;
1520      margin-bottom: 12px;
1521  }
1522  
1523  .customize-control-header .header-view:last-child {
1524      margin-bottom: 0;
1525  }
1526  
1527  /* Convoluted, but 'outline' support isn't good enough yet */
1528  .customize-control-header .header-view:after {
1529      border: 0;
1530  }
1531  
1532  .customize-control-header .header-view.selected .choice:focus {
1533      outline: none;
1534  }
1535  
1536  .customize-control-header .header-view.selected:after {
1537      content: "";
1538      position: absolute;
1539      height: auto;
1540      top: 0;
1541      left: 0;
1542      bottom: 0;
1543      right: 0;
1544      border: 4px solid #72aee6;
1545      border-radius: 2px;
1546  }
1547  
1548  .customize-control-header .header-view.button.selected {
1549      border: 0;
1550  }
1551  
1552  /* Header control: overlay "close" button */
1553  
1554  .customize-control-header .uploaded .header-view .close {
1555      font-size: 20px;
1556      color: #fff;
1557      background: #50575e;
1558      background: rgba(0, 0, 0, 0.5);
1559      position: absolute;
1560      top: 10px;
1561      left: -999px;
1562      z-index: 1;
1563      width: 26px;
1564      height: 26px;
1565      cursor: pointer;
1566  }
1567  
1568  .customize-control-header .header-view:hover .close,
1569  .customize-control-header .header-view .close:focus {
1570      left: auto;
1571      right: 10px;
1572  }
1573  
1574  .customize-control-header .header-view .close:focus {
1575      outline: 1px solid #4f94d4;
1576  }
1577  
1578  /* Header control: randomiz(s)er */
1579  
1580  .customize-control-header .random.placeholder {
1581      cursor: pointer;
1582      border-radius: 2px;
1583      height: 40px;
1584  }
1585  
1586  .customize-control-header button.random {
1587      width: 100%;
1588      height: auto;
1589      min-height: 40px;
1590      white-space: normal;
1591  }
1592  
1593  .customize-control-header button.random .dice {
1594      margin-top: 4px;
1595  }
1596  
1597  .customize-control-header .placeholder:hover .dice,
1598  .customize-control-header .header-view:hover > button.random .dice {
1599      animation: dice-color-change 3s infinite;
1600  }
1601  
1602  .button-see-me {
1603      animation: bounce .7s 1;
1604      transform-origin: center bottom;
1605  }
1606  
1607  @keyframes bounce {
1608      from, 20%, 53%, 80%, to {
1609          animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1610          transform: translate3d(0,0,0);
1611      }
1612  
1613      40%, 43% {
1614          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1615          transform: translate3d(0, -12px, 0);
1616      }
1617  
1618      70% {
1619          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1620          transform: translate3d(0, -6px, 0);
1621      }
1622  
1623      90% {
1624          transform: translate3d(0,-1px,0);
1625      }
1626  }
1627  
1628  .customize-control-header .choice {
1629      position: relative;
1630      display: block;
1631      margin-bottom: 9px;
1632  }
1633  
1634  .customize-control-header .choice:focus {
1635      box-shadow: 0 0 0 2px #2271b1;
1636      /* Only visible in Windows High Contrast mode */
1637      outline: 2px solid transparent;
1638  }
1639  
1640  .customize-control-header .uploaded div:last-child > .choice {
1641      margin-bottom: 0;
1642  }
1643  
1644  .customize-control .attachment-media-view .thumbnail-image img,
1645  .customize-control-header img {
1646      max-width: 100%;
1647  }
1648  
1649  .customize-control .attachment-media-view .remove-button,
1650  .customize-control .attachment-media-view .default-button,
1651  .customize-control-header .remove {
1652      margin-right: 8px;
1653  }
1654  
1655  /* Background position control */
1656  .customize-control-background_position .background-position-control .button-group {
1657      display: block;
1658  }
1659  
1660  /**
1661   * Code Editor Control and Custom CSS Section
1662   *
1663   * Modifications to the Section Container to make the textarea full-width and
1664   * full-height, if the control is the only control in the section.
1665   */
1666  
1667  .customize-control-code_editor textarea {
1668      width: 100%;
1669      font-family: Consolas, Monaco, monospace;
1670      font-size: 12px;
1671      padding: 6px 8px;
1672      tab-size: 2;
1673  }
1674  .customize-control-code_editor textarea,
1675  .customize-control-code_editor .CodeMirror {
1676      height: 14em;
1677  }
1678  
1679  #customize-controls .customize-section-description-container.section-meta.customize-info {
1680      border-bottom: none;
1681  }
1682  
1683  #sub-accordion-section-custom_css .customize-control-notifications-container {
1684      margin-bottom: 15px;
1685  }
1686  
1687  #customize-control-custom_css textarea {
1688      display: block;
1689      height: 500px;
1690  }
1691  
1692  .customize-section-description-container + #customize-control-custom_css .customize-control-title {
1693      margin-left: 12px;
1694  }
1695  
1696  .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1697      border-right: 0;
1698      border-left: 0;
1699      height: calc( 100vh - 185px );
1700      resize: none;
1701  }
1702  
1703  .customize-section-description-container + #customize-control-custom_css:last-child {
1704      margin-left: -12px;
1705      width: 299px;
1706      width: calc( 100% + 24px );
1707      margin-bottom: -12px;
1708  }
1709  
1710  .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1711      height: calc( 100vh - 185px );
1712  }
1713  
1714  .CodeMirror-lint-tooltip,
1715  .CodeMirror-hints {
1716      z-index: 500000 !important;
1717  }
1718  
1719  .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1720      margin-left: 12px;
1721      margin-right: 12px;
1722  }
1723  
1724  .theme-browser .theme.active .theme-actions,
1725  .wp-customizer .theme-browser .theme .theme-actions {
1726      padding: 9px 15px;
1727      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1728  }
1729  
1730  @media screen and (max-width: 640px) {
1731      .customize-section-description-container + #customize-control-custom_css:last-child {
1732          margin-right: 0;
1733      }
1734  
1735      .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1736          height: calc( 100vh - 140px );
1737      }
1738  }
1739  
1740  /**
1741   * Themes
1742   */
1743  
1744  #customize-theme-controls .control-panel-themes {
1745      border-bottom: none;
1746  }
1747  
1748  #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1749  #customize-theme-controls .control-panel-themes > .accordion-section-title {
1750      cursor: default;
1751      background: #fff;
1752      color: #50575e;
1753      border-top: 1px solid #dcdcde;
1754      border-bottom: 1px solid #dcdcde;
1755      border-left: none;
1756      border-right: none;
1757      margin: 0 0 15px;
1758      padding: 12px 100px 15px 15px; /* Space for the button */
1759  }
1760  
1761  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1762  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1763      border-top: 0;
1764  }
1765  
1766  #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1767  #customize-theme-controls .control-section-themes > .accordion-section-title {
1768      margin: 0 0 15px;
1769  }
1770  
1771  #customize-controls .customize-themes-panel .accordion-section-title:hover,
1772  #customize-controls .customize-themes-panel .accordion-section-title {
1773      margin: 15px -8px;
1774  }
1775  
1776  #customize-controls .control-section-themes .accordion-section-title,
1777  #customize-controls .customize-themes-panel .accordion-section-title {
1778      padding-right: 100px; /* Space for the button */
1779  }
1780  
1781  .control-panel-themes .accordion-section-title span.customize-action,
1782  #customize-controls .customize-section-title span.customize-action,
1783  #customize-controls .control-section-themes .accordion-section-title span.customize-action,
1784  #customize-controls .customize-section-title span.customize-action {
1785      font-size: 13px;
1786      display: block;
1787      font-weight: 400;
1788  }
1789  
1790  #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1791      position: absolute;
1792      right: 10px;
1793      top: 50%;
1794      margin-top: -14px;
1795      font-weight: 400;
1796  }
1797  
1798  #customize-notifications-area .notification-message button.switch-to-editor {
1799      display: block;
1800      margin-top: 6px;
1801      font-weight: 400;
1802  }
1803  
1804  #customize-theme-controls .control-panel-themes > .accordion-section-title:after {
1805      display: none;
1806  }
1807  
1808  .control-panel-themes .customize-themes-full-container {
1809      position: fixed;
1810      top: 0;
1811      left: 0;
1812      transition: .18s left ease-in-out;
1813      margin: 0 0 0 300px;
1814      padding: 71px 0 25px;
1815      overflow-y: scroll;
1816      width: calc(100% - 300px);
1817      height: calc(100% - 96px);
1818      background: #f0f0f1;
1819      z-index: 20;
1820  }
1821  
1822  @media (prefers-reduced-motion: reduce) {
1823      .control-panel-themes .customize-themes-full-container {
1824          transition: none;
1825      }
1826  }
1827  
1828  @media screen and (min-width: 1670px) {
1829      .control-panel-themes .customize-themes-full-container {
1830          width: 82%;
1831          right: 0;
1832          left: initial;
1833      }
1834  }
1835  
1836  .modal-open .control-panel-themes .customize-themes-full-container {
1837      overflow-y: visible;
1838  }
1839  
1840  /* Animations for opening the themes panel */
1841  #customize-save-button-wrapper,
1842  #customize-header-actions .spinner,
1843  #customize-header-actions .customize-controls-preview-toggle {
1844      transition: .18s margin ease-in-out;
1845  }
1846  
1847  #customize-footer-actions,
1848  #customize-footer-actions .collapse-sidebar {
1849      bottom: 0;
1850      transition: .18s bottom ease-in-out;
1851  }
1852  
1853  .in-themes-panel:not(.animating) #customize-header-actions .spinner,
1854  .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1855  .in-themes-panel:not(.animating) #customize-preview,
1856  .in-themes-panel:not(.animating) #customize-footer-actions {
1857      visibility: hidden;
1858  }
1859  
1860  .wp-full-overlay.in-themes-panel {
1861      background: #f0f0f1; /* Prevents a black flash when fading in the panel */
1862  }
1863  
1864  .in-themes-panel #customize-save-button-wrapper,
1865  .in-themes-panel #customize-header-actions .spinner,
1866  .in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1867      margin-top: -46px; /* Height of header actions bar */
1868  }
1869  
1870  .in-themes-panel #customize-footer-actions,
1871  .in-themes-panel #customize-footer-actions .collapse-sidebar {
1872      bottom: -45px;
1873  }
1874  
1875  /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1876  .in-themes-panel.animating .control-panel-themes .filter-themes-count {
1877      display: none;
1878  }
1879  
1880  .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1881      bottom: 0;
1882  }
1883  
1884  .themes-filter-bar .feature-filter-toggle:before {
1885      content: "\f111";
1886      margin: 0 5px 0 0;
1887      font: normal 16px/1 dashicons;
1888      vertical-align: text-bottom;
1889      -webkit-font-smoothing: antialiased;
1890      -moz-osx-font-smoothing: grayscale;
1891  }
1892  
1893  .themes-filter-bar .feature-filter-toggle.open {
1894      background: #f0f0f1;
1895      border-color: #8c8f94;
1896      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1897  }
1898  
1899  .themes-filter-bar .feature-filter-toggle .filter-count-filters {
1900      display: none;
1901  }
1902  
1903  .filter-drawer {
1904      box-sizing: border-box;
1905      width: 100%;
1906      position: absolute;
1907      top: 46px;
1908      left: 0;
1909      padding: 25px 0 25px 25px;
1910      border-top: 0;
1911      margin: 0;
1912      background: #f0f0f1;
1913      border-bottom: 1px solid #dcdcde;
1914  }
1915  
1916  .filter-drawer .filter-group {
1917      margin: 0 25px 0 0;
1918      width: calc( (100% - 75px) / 3);
1919      min-width: 200px;
1920      max-width: 320px;
1921  }
1922  
1923  /* Adds a delay before fading in to avoid it "jumping" */
1924  @keyframes themes-fade-in {
1925      0% {
1926          opacity: 0;
1927      }
1928      50% {
1929          opacity: 0;
1930      }
1931      100% {
1932          opacity: 1;
1933      }
1934  }
1935  
1936  .control-panel-themes .customize-themes-full-container.animate {
1937      animation: .6s themes-fade-in 1;
1938  }
1939  
1940  .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1941      animation: .6s themes-fade-in 1;
1942  }
1943  
1944  .control-panel-themes .filter-themes-count .themes-displayed {
1945      font-weight: 600;
1946      color: #50575e;
1947  }
1948  
1949  .customize-themes-notifications {
1950      margin: 0;
1951  }
1952  
1953  .control-panel-themes .customize-themes-notifications .notice {
1954      margin: 0 0 25px;
1955  }
1956  
1957  .customize-themes-full-container .customize-themes-section {
1958      display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1959      overflow: hidden;
1960  }
1961  
1962  .customize-themes-full-container .customize-themes-section.current-section {
1963      display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1964  }
1965  
1966  .control-section .customize-section-text-before {
1967      padding: 0 0 8px 15px;
1968      margin: 15px 0 0;
1969      line-height: 16px;
1970      border-bottom: 1px solid #dcdcde;
1971      color: #50575e;
1972  }
1973  
1974  .control-panel-themes .customize-themes-section-title {
1975      width: 100%;
1976      background: #fff;
1977      box-shadow: none;
1978      outline: none;
1979      border-top: none;
1980      border-bottom: 1px solid #dcdcde;
1981      border-left: 4px solid #fff;
1982      border-right: none;
1983      cursor: pointer;
1984      padding: 10px 15px;
1985      position: relative;
1986      text-align: left;
1987      font-size: 14px;
1988      font-weight: 600;
1989      color: #50575e;
1990      text-shadow: none;
1991  }
1992  
1993  .control-panel-themes #accordion-section-installed_themes {
1994      border-top: 1px solid #dcdcde;
1995  }
1996  
1997  .control-panel-themes .theme-section {
1998      margin: 0;
1999      position: relative;
2000  }
2001  
2002  .control-panel-themes .customize-themes-section-title:focus,
2003  .control-panel-themes .customize-themes-section-title:hover {
2004      border-left-color: #2271b1;
2005      color: #2271b1;
2006      background: #f6f7f7;
2007  }
2008  
2009  .customize-themes-section-title:not(.selected):after {
2010      content: "";
2011      display: block;
2012      position: absolute;
2013      top: 9px;
2014      right: 15px;
2015      width: 18px;
2016      height: 18px;
2017      border-radius: 100%;
2018      border: 1px solid #c3c4c7;
2019      background: #fff;
2020  }
2021  
2022  .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
2023      content: "\f147";
2024      font: 16px/1 dashicons;
2025      box-sizing: border-box;
2026      width: 20px;
2027      height: 20px;
2028      padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
2029      border-radius: 100%;
2030      position: absolute;
2031      top: 9px;
2032      right: 15px;
2033      background: #2271b1;
2034      color: #fff;
2035  }
2036  
2037  .control-panel-themes .customize-themes-section-title.selected {
2038      color: #2271b1;
2039  }
2040  
2041  #customize-theme-controls .themes.accordion-section-content {
2042      position: relative;
2043      left: 0;
2044      padding: 0;
2045      width: 100%;
2046  }
2047  
2048  .loading .customize-themes-section .spinner {
2049      display: block;
2050      visibility: visible;
2051      position: relative;
2052      clear: both;
2053      width: 20px;
2054      height: 20px;
2055      left: calc(50% - 10px);
2056      float: none;
2057      margin-top: 50px;
2058  }
2059  
2060  .customize-themes-section .no-themes,
2061  .customize-themes-section .no-themes-local {
2062      display: none;
2063  }
2064  
2065  .themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2066      display: none; /* Hide "installed" notice on installed themes tab. */
2067  }
2068  
2069  .customize-control-theme .theme {
2070      width: 100%;
2071      margin: 0;
2072      border: 1px solid #dcdcde;
2073      background: #fff;
2074  }
2075  
2076  .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
2077      background: #fff;
2078      border: none;
2079  }
2080  
2081  .customize-control.customize-control-theme { /* override most properties on .customize-control */
2082      box-sizing: border-box;
2083      width: 25%;
2084      max-width: 600px; /* Max. screenshot size / 2 */
2085      margin: 0 25px 25px 0;
2086      padding: 0;
2087      clear: none;
2088  }
2089  
2090  /* 5 columns above 2100px */
2091  @media screen and (min-width: 2101px) {
2092      .customize-control.customize-control-theme {
2093          width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
2094      }
2095  }
2096  
2097  /* 4 columns up to 2100px */
2098  @media screen and (min-width: 1601px) and (max-width: 2100px) {
2099      .customize-control.customize-control-theme {
2100          width: calc( ( 100% - 100px ) / 4 - 1px );
2101      }
2102  }
2103  
2104  /* 3 columns up to 1600px */
2105  @media screen and (min-width: 1201px) and (max-width: 1600px) {
2106      .customize-control.customize-control-theme {
2107          width: calc( ( 100% - 75px ) / 3 - 1px );
2108      }
2109  }
2110  
2111  /* 2 columns up to 1200px */
2112  @media screen and (min-width: 851px) and (max-width: 1200px) {
2113      .customize-control.customize-control-theme {
2114          width: calc( ( 100% - 50px ) / 2 - 1px );
2115  
2116      }
2117  }
2118  
2119  /* 1 column up to 850 px */
2120  @media screen and (max-width: 850px) {
2121      .customize-control.customize-control-theme {
2122          width: 100%;
2123      }
2124  }
2125  
2126  .wp-customizer .theme-browser .themes {
2127      padding: 0 0 25px 25px;
2128      transition: .18s margin-top linear;
2129  }
2130  
2131  .wp-customizer .theme-browser .theme .theme-actions {
2132      opacity: 1;
2133  }
2134  
2135  #customize-controls h3.theme-name {
2136      font-size: 15px;
2137  }
2138  
2139  #customize-controls .theme-overlay .theme-name {
2140      font-size: 32px;
2141  }
2142  
2143  .customize-preview-header.themes-filter-bar {
2144      position: fixed;
2145      top: 0;
2146      left: 300px;
2147      width: calc(100% - 300px);
2148      height: 46px;
2149      background: #f0f0f1;
2150      z-index: 10;
2151      padding: 6px 25px;
2152      box-sizing: border-box;
2153      border-bottom: 1px solid #dcdcde;
2154  }
2155  .customize-preview-header.themes-filter-bar,
2156  .customize-preview-header.themes-filter-bar .search-form {
2157      display: flex;
2158      align-items: center;
2159      gap: 10px;
2160      flex-wrap: wrap;
2161  }
2162  
2163  .customize-preview-header.themes-filter-bar .search-form-input {
2164      position: relative;
2165  }
2166  
2167  .customize-preview-header .filter-themes-wrapper {
2168      display: grid;
2169      align-items: center;
2170      gap: 10px;
2171      grid-template-columns: auto 1fr;
2172  }
2173  
2174  .customize-preview-header .filter-themes-wrapper .filter-themes-count {
2175      justify-self: end;
2176  }
2177  
2178  @media screen and (min-width: 1670px) {
2179      .customize-preview-header.themes-filter-bar {
2180          width: 82%;
2181          right: 0;
2182          left: initial;
2183      }
2184  }
2185  
2186  .themes-filter-bar .themes-filter-container {
2187      margin: 0;
2188      padding: 0;
2189      display: flex;
2190      align-items: center;
2191      gap: 10px;
2192  }
2193  
2194  .themes-filter-bar .wp-filter-search {
2195      line-height: 1.8;
2196      padding: 6px 10px 6px 30px;
2197      max-width: 100%;
2198      width: 40%;
2199      min-width: 300px;
2200      height: 32px;
2201      margin: 1px 0;
2202      top: 0;
2203      left: 0;
2204  }
2205  
2206  /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
2207     current length of .org feature filters assuming translations do not wrap lines. */
2208  @media screen and (max-height: 540px), screen and (max-width: 1018px) {
2209      .customize-preview-header.themes-filter-bar {
2210          position: relative;
2211          left: 0;
2212          width: 100%;
2213          margin: 0 0 25px;
2214      }
2215      .filter-drawer {
2216          top: 46px;
2217      }
2218      .wp-customizer .theme-browser .themes {
2219          padding: 0 0 25px 25px;
2220          overflow: hidden;
2221      }
2222  
2223      .control-panel-themes .customize-themes-full-container {
2224          margin-top: 0;
2225          padding: 0;
2226          height: 100%;
2227          width: calc(100% - 300px);
2228      }
2229  }
2230  
2231  @media screen and (max-width: 1018px) {
2232      .filter-drawer .filter-group {
2233          width: calc( (100% - 50px) / 2);
2234      }
2235  }
2236  
2237  @media screen and (max-width: 960px) {
2238      .customize-preview-header.themes-filter-bar {
2239          height: 96px;
2240      }
2241  }
2242  
2243  @media screen and (max-width: 900px) {
2244      .themes-filter-bar .wp-filter-search {
2245          width: 100%;
2246          margin: 0;
2247          min-width: 200px;
2248      }
2249  
2250      .customize-preview-header.themes-filter-bar,
2251      .customize-preview-header.themes-filter-bar .search-form
2252      .themes-filter-bar .themes-filter-container {
2253          display: grid;
2254          gap: 4px;
2255      }
2256  
2257      .customize-preview-header.themes-filter-bar .search-form-input {
2258          display: flex;
2259          flex-grow: 1;
2260      }
2261  
2262      .filter-drawer {
2263          top: 86px;
2264      }
2265  
2266      .control-panel-themes .filter-themes-count {
2267          float: left;
2268      }
2269  }
2270  
2271  @media screen and (max-width: 792px) {
2272      .filter-drawer .filter-group {
2273          width: calc( 100% - 25px);
2274      }
2275  }
2276  
2277  .control-panel-themes .customize-themes-mobile-back {
2278      display: none;
2279  }
2280  
2281  /* Mobile - toggle between themes and filters */
2282  @media screen and (max-width: 600px) {
2283  
2284      .filter-drawer {
2285          top: 132px;
2286      }
2287  
2288      .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
2289          display: block;
2290          float: right;
2291      }
2292  
2293      .control-panel-themes .customize-themes-full-container {
2294          width: 100%;
2295          margin: 0;
2296          padding-top: 46px;
2297          height: calc(100% - 46px);
2298          z-index: 1;
2299          display: none;
2300      }
2301  
2302      .showing-themes .control-panel-themes .customize-themes-full-container {
2303          display: block;
2304      }
2305  
2306      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
2307          display: block;
2308          position: fixed;
2309          top: 0;
2310          left: 0;
2311          background: #f0f0f1;
2312          color: #3c434a;
2313          border-radius: 0;
2314          box-shadow: none;
2315          border: none;
2316          height: 46px;
2317          width: 100%;
2318          z-index: 10;
2319          text-align: left;
2320          text-shadow: none;
2321          border-bottom: 1px solid #dcdcde;
2322          border-left: 4px solid transparent;
2323          margin: 0;
2324          padding: 0;
2325          font-size: 0;
2326          overflow: hidden;
2327      }
2328  
2329      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
2330          left: 0;
2331          top: 0;
2332          height: 46px;
2333          width: 26px;
2334          display: block;
2335          line-height: 2.3;
2336          padding: 0 8px;
2337          border-right: 1px solid #dcdcde;
2338      }
2339  
2340      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
2341      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
2342          color: #2271b1;
2343          background: #f6f7f7;
2344          border-left-color: #2271b1;
2345          box-shadow: none;
2346          /* Only visible in Windows High Contrast mode */
2347          outline: 2px solid transparent;
2348          outline-offset: -2px;
2349      }
2350  
2351      .showing-themes #customize-header-actions {
2352          display: none;
2353      }
2354  
2355      #customize-controls {
2356          width: 100%;
2357      }
2358  }
2359  
2360  /* Details View */
2361  .wp-customizer .theme-overlay {
2362      display: none;
2363  }
2364  
2365  .wp-customizer.modal-open .theme-overlay {
2366      position: fixed;
2367      left: 0;
2368      top: 0;
2369      right: 0;
2370      bottom: 0;
2371      z-index: 109;
2372  }
2373  
2374  /* Avoid a z-index war by resetting elements that should be under the overlay.
2375     This is likely required because of the way that sections and panels are positioned. */
2376  .wp-customizer.modal-open #customize-header-actions,
2377  .wp-customizer.modal-open .control-panel-themes .filter-themes-count,
2378  .wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
2379      z-index: -1;
2380  }
2381  
2382  .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
2383      overflow: visible;
2384  }
2385  
2386  .wp-customizer .theme-overlay .theme-backdrop {
2387      background: rgba(240, 240, 241, 0.75);
2388      position: fixed;
2389      z-index: 110;
2390  }
2391  
2392  .wp-customizer .theme-overlay .star-rating {
2393      float: left;
2394      margin-right: 8px;
2395  }
2396  
2397  .wp-customizer .theme-rating .num-ratings {
2398      line-height: 20px;
2399  }
2400  
2401  .wp-customizer .theme-overlay .theme-wrap {
2402      left: 90px;
2403      right: 90px;
2404      top: 45px;
2405      bottom: 45px;
2406      z-index: 120;
2407  }
2408  
2409  .wp-customizer .theme-overlay .theme-actions {
2410      text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
2411      padding: 10px 25px 5px;
2412      background: #f0f0f1;
2413      border-top: 1px solid #dcdcde;
2414  }
2415  
2416  .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
2417      margin-left: 8px;
2418  }
2419  
2420  .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
2421      overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
2422  }
2423  
2424  .wp-customizer .theme-header {
2425      background: #f0f0f1;
2426  }
2427  
2428  .wp-customizer .theme-overlay .theme-header button,
2429  .wp-customizer .theme-overlay .theme-header .close:before {
2430      color: #3c434a;
2431  }
2432  
2433  .wp-customizer .theme-overlay .theme-header .close:focus,
2434  .wp-customizer .theme-overlay .theme-header .close:hover,
2435  .wp-customizer .theme-overlay .theme-header .right:focus,
2436  .wp-customizer .theme-overlay .theme-header .right:hover,
2437  .wp-customizer .theme-overlay .theme-header .left:focus,
2438  .wp-customizer .theme-overlay .theme-header .left:hover {
2439      background: #fff;
2440      border-bottom: 4px solid #2271b1;
2441      color: #2271b1;
2442  }
2443  
2444  .wp-customizer .theme-overlay .theme-header .close:focus:before,
2445  .wp-customizer .theme-overlay .theme-header .close:hover:before {
2446      color: #2271b1;
2447  }
2448  
2449  .wp-customizer .theme-overlay .theme-header button.disabled,
2450  .wp-customizer .theme-overlay .theme-header button.disabled:hover,
2451  .wp-customizer .theme-overlay .theme-header button.disabled:focus {
2452      border-bottom: none;
2453      background: transparent;
2454      color: #c3c4c7;
2455  }
2456  
2457  /* Small Screens */
2458  @media (max-width: 850px), (max-height: 472px) {
2459      .wp-customizer .theme-overlay .theme-wrap {
2460          left: 0;
2461          right: 0;
2462          top: 0;
2463          bottom: 0;
2464      }
2465  
2466      .wp-customizer .theme-browser .themes {
2467          padding-right: 25px;
2468      }
2469  }
2470  
2471  /* Handle cheaters. */
2472  body.cheatin {
2473      font-size: medium;
2474      height: auto;
2475      background: #fff;
2476      border: 1px solid #c3c4c7;
2477      margin: 50px auto 2em;
2478      padding: 1em 2em;
2479      max-width: 700px;
2480      min-width: 0;
2481      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2482  }
2483  
2484  body.cheatin h1 {
2485      border-bottom: 1px solid #dcdcde;
2486      clear: both;
2487      color: #50575e;
2488      font-size: 24px;
2489      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2490      margin: 30px 0 0;
2491      padding: 0 0 7px;
2492  }
2493  
2494  body.cheatin p {
2495      font-size: 14px;
2496      line-height: 1.5;
2497      margin: 25px 0 20px;
2498  }
2499  
2500  /**
2501   * Widgets and Menus common styles
2502   */
2503  
2504  /* higher specificity than .wp-core-ui .button */
2505  #customize-theme-controls .add-new-widget,
2506  #customize-theme-controls .add-new-menu-item {
2507      cursor: pointer;
2508      float: right;
2509      margin: 0 0 0 10px;
2510      transition: all 0.2s;
2511      -webkit-user-select: none;
2512      user-select: none;
2513      outline: none;
2514  }
2515  
2516  .reordering .add-new-widget,
2517  .reordering .add-new-menu-item {
2518      opacity: 0.2;
2519      pointer-events: none;
2520      cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
2521  }
2522  
2523  .add-new-widget:before,
2524  .add-new-menu-item:before,
2525  #available-menu-items .new-content-item .add-content:before {
2526      content: "\f132";
2527      display: inline-block;
2528      position: relative;
2529      left: -2px;
2530      top: 0;
2531      font: normal 20px/1 dashicons;
2532      vertical-align: middle;
2533      transition: all 0.2s;
2534      -webkit-font-smoothing: antialiased;
2535      -moz-osx-font-smoothing: grayscale;
2536  }
2537  
2538  /* Reordering */
2539  .reorder-toggle {
2540      float: right;
2541      padding: 5px 8px;
2542      text-decoration: none;
2543      cursor: pointer;
2544      outline: none;
2545  }
2546  
2547  .reorder,
2548  .reordering .reorder-done {
2549      display: block;
2550      padding: 5px 8px;
2551  }
2552  
2553  .reorder-done,
2554  .reordering .reorder {
2555      display: none;
2556  }
2557  
2558  .widget-reorder-nav span,
2559  .menu-item-reorder-nav button {
2560      position: relative;
2561      overflow: hidden;
2562      float: left;
2563      display: block;
2564      width: 33px; /* was 42px for mobile */
2565      height: 43px;
2566      color: #8c8f94;
2567      text-indent: -9999px;
2568      cursor: pointer;
2569      outline: none;
2570  }
2571  
2572  .menu-item-reorder-nav button {
2573      width: 30px;
2574      height: 40px;
2575      background: transparent;
2576      border: none;
2577      box-shadow: none;
2578  }
2579  
2580  .widget-reorder-nav span:before,
2581  .menu-item-reorder-nav button:before {
2582      display: inline-block;
2583      position: absolute;
2584      top: 0;
2585      right: 0;
2586      width: 100%;
2587      height: 100%;
2588      font: normal 20px/43px dashicons;
2589      text-align: center;
2590      text-indent: 0;
2591      -webkit-font-smoothing: antialiased;
2592      -moz-osx-font-smoothing: grayscale;
2593  }
2594  
2595  .widget-reorder-nav span:hover,
2596  .widget-reorder-nav span:focus,
2597  .menu-item-reorder-nav button:hover,
2598  .menu-item-reorder-nav button:focus {
2599      color: #1d2327;
2600      background: #f0f0f1;
2601  }
2602  
2603  .move-widget-down:before,
2604  .menus-move-down:before {
2605      content: "\f347";
2606  }
2607  
2608  .move-widget-up:before,
2609  .menus-move-up:before {
2610      content: "\f343";
2611  }
2612  
2613  #customize-theme-controls .first-widget .move-widget-up,
2614  #customize-theme-controls .last-widget .move-widget-down,
2615  .move-up-disabled .menus-move-up,
2616  .move-down-disabled .menus-move-down,
2617  .move-right-disabled .menus-move-right,
2618  .move-left-disabled .menus-move-left {
2619      color: #dcdcde;
2620      background-color: #fff;
2621      cursor: default;
2622      pointer-events: none;
2623  }
2624  
2625  /**
2626   * New widget and Add-menu-items modes and panels
2627   */
2628  
2629  .wp-full-overlay-main {
2630      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. */
2631      width: 100%;
2632  }
2633  
2634  body.adding-widget .add-new-widget,
2635  body.adding-widget .add-new-widget:hover,
2636  .adding-menu-items .add-new-menu-item,
2637  .adding-menu-items .add-new-menu-item:hover,
2638  .add-menu-toggle.open,
2639  .add-menu-toggle.open:hover {
2640      background: #f0f0f1;
2641      border-color: #8c8f94;
2642      color: #2c3338;
2643      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
2644  }
2645  
2646  body.adding-widget .add-new-widget:before,
2647  .adding-menu-items .add-new-menu-item:before,
2648  #accordion-section-add_menu .add-new-menu-item.open:before {
2649      transform: rotate(45deg);
2650  }
2651  
2652  #available-widgets,
2653  #available-menu-items {
2654      position: absolute;
2655      top: 0;
2656      bottom: 0;
2657      left: -301px;
2658      visibility: hidden;
2659      overflow-x: hidden;
2660      overflow-y: auto;
2661      width: 300px;
2662      margin: 0;
2663      z-index: 4;
2664      background: #f0f0f1;
2665      transition: left .18s;
2666      border-right: 1px solid #dcdcde;
2667  }
2668  
2669  #available-widgets .customize-section-title,
2670  #available-menu-items .customize-section-title {
2671      border: 0;
2672      clip-path: inset(50%);
2673      height: 1px;
2674      margin: -1px;
2675      overflow: hidden;
2676      padding: 0;
2677      position: absolute;
2678      width: 1px;
2679      word-wrap: normal !important;
2680  }
2681  
2682  #available-widgets .customize-section-title button,
2683  #available-menu-items .customize-section-title button {
2684      display: none;
2685  }
2686  
2687  #available-widgets-list {
2688      top: 82px;
2689      position: absolute;
2690      overflow: auto;
2691      bottom: 0;
2692      width: 100%;
2693      border-top: 1px solid #dcdcde;
2694  }
2695  
2696  .no-widgets-found #available-widgets-list {
2697      border-top: none;
2698  }
2699  
2700  #available-widgets-filter {
2701      position: fixed;
2702      top: 0;
2703      z-index: 1;
2704      width: 300px;
2705      background: #f0f0f1;
2706  }
2707  
2708  /* search field container */
2709  #available-widgets-filter,
2710  #available-menu-items-search .accordion-section-title {
2711      padding: 13px 15px;
2712      box-sizing: border-box;
2713  }
2714  
2715  #available-widgets-filter input,
2716  #available-menu-items-search input {
2717      width: 100%;
2718      min-height: 32px;
2719      margin: 1px 0;
2720      padding: 0 30px;
2721  }
2722  
2723  #available-widgets-filter input::-ms-clear,
2724  #available-menu-items-search input::-ms-clear {
2725      display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
2726  }
2727  
2728  #available-menu-items-search .search-icon,
2729  #available-widgets-filter .search-icon {
2730      display: block;
2731      position: absolute;
2732      bottom: 15px; /* 13 container padding +1 input margin +1 input border */
2733      left: 16px;
2734      width: 30px;
2735      height: 30px;
2736      line-height: 2.1;
2737      text-align: center;
2738      color: #646970;
2739  }
2740  
2741  #available-widgets-filter .clear-results,
2742  #available-menu-items-search .accordion-section-title .clear-results {
2743      position: absolute;
2744      top: 36px; /* 13 container padding +1 input margin +1 input border */
2745      right: 16px;
2746      width: 30px;
2747      height: 30px;
2748      padding: 0;
2749      border: 0;
2750      cursor: pointer;
2751      background: none;
2752      color: #d63638;
2753      text-decoration: none;
2754      outline: 0;
2755  }
2756  
2757  #available-widgets-filter .clear-results,
2758  #available-menu-items-search .clear-results,
2759  #available-menu-items-search.loading .clear-results.is-visible {
2760      display: none;
2761  }
2762  
2763  #available-widgets-filter .clear-results.is-visible,
2764  #available-menu-items-search .clear-results.is-visible {
2765      display: block;
2766  }
2767  
2768  #available-widgets-filter .clear-results:before,
2769  #available-menu-items-search .clear-results:before {
2770      content: "\f335";
2771      font: normal 20px/1 dashicons;
2772      vertical-align: middle;
2773      -webkit-font-smoothing: antialiased;
2774      -moz-osx-font-smoothing: grayscale;
2775  }
2776  
2777  #available-widgets-filter .clear-results:hover,
2778  #available-widgets-filter .clear-results:focus,
2779  #available-menu-items-search .clear-results:hover,
2780  #available-menu-items-search .clear-results:focus {
2781      color: #d63638;
2782  }
2783  
2784  #available-widgets-filter .clear-results:focus,
2785  #available-menu-items-search .clear-results:focus {
2786      box-shadow: 0 0 0 2px #2271b1;
2787      /* Only visible in Windows High Contrast mode */
2788      outline: 2px solid transparent;
2789  }
2790  
2791  #available-menu-items-search .search-icon:after,
2792  #available-widgets-filter .search-icon:after,
2793  .themes-filter-bar .search-icon:after {
2794      content: "\f179";
2795      font: normal 20px/1 dashicons;
2796      vertical-align: middle;
2797      -webkit-font-smoothing: antialiased;
2798      -moz-osx-font-smoothing: grayscale;
2799  }
2800  
2801  .themes-filter-bar .search-icon {
2802      position: absolute;
2803      top: 2px;
2804      left: 2px;
2805      z-index: 1;
2806      color: #646970;
2807      height: 30px;
2808      width: 30px;
2809      line-height: 2;
2810      text-align: center;
2811  }
2812  
2813  .no-widgets-found-message {
2814      display: none;
2815      margin: 0;
2816      padding: 0 15px;
2817      line-height: inherit;
2818  }
2819  
2820  .no-widgets-found .no-widgets-found-message {
2821      display: block;
2822  }
2823  
2824  #available-widgets .widget-top,
2825  #available-widgets .widget-top:hover,
2826  #available-menu-items .item-top,
2827  #available-menu-items .item-top:hover {
2828      border: none;
2829      background: transparent;
2830      box-shadow: none;
2831  }
2832  
2833  #available-widgets .widget-tpl,
2834  #available-menu-items .item-tpl {
2835      position: relative;
2836      padding: 15px 15px 15px 60px;
2837      background: #fff;
2838      border-bottom: 1px solid #dcdcde;
2839      border-left: 4px solid #fff;
2840      transition:
2841          .15s color ease-in-out,
2842          .15s background-color ease-in-out,
2843          .15s border-color ease-in-out;
2844      cursor: pointer;
2845      display: none;
2846  }
2847  
2848  #available-widgets .widget,
2849  #available-menu-items .item {
2850      position: static;
2851  }
2852  
2853  
2854  /* Responsive */
2855  .customize-controls-preview-toggle {
2856      display: none;
2857  }
2858  
2859  @media only screen and (max-width: 782px) {
2860      .wp-customizer .theme:not(.active):hover .theme-actions,
2861      .wp-customizer .theme:not(.active):focus .theme-actions {
2862          display: block;
2863      }
2864  
2865      .wp-customizer .theme-browser .theme.active .theme-name span {
2866          display: inline;
2867      }
2868  
2869      .customize-control-header button.random .dice {
2870          margin-top: 0;
2871      }
2872  
2873      .customize-control-radio .customize-inside-control-row,
2874      .customize-control-checkbox .customize-inside-control-row,
2875      .customize-control-nav_menu_auto_add .customize-inside-control-row {
2876          margin-left: 32px;
2877      }
2878  
2879      .customize-control-radio input,
2880      .customize-control-checkbox input,
2881      .customize-control-nav_menu_auto_add input {
2882          margin-left: -32px;
2883      }
2884  
2885      .customize-control input[type="radio"] + label + br,
2886      .customize-control input[type="checkbox"] + label + br {
2887          line-height: 2.5; /* For widgets checkboxes */
2888      }
2889  
2890      .customize-control .date-time-fields select {
2891          height: 39px;
2892      }
2893  
2894      .date-time-fields .date-input.month {
2895          width: 79px;
2896      }
2897  
2898      .date-time-fields .date-input.day,
2899      .date-time-fields .date-input.hour,
2900      .date-time-fields .date-input.minute {
2901          width: 55px;
2902      }
2903  
2904      .date-time-fields .date-input.year {
2905          width: 80px;
2906      }
2907  
2908      #customize-control-changeset_preview_link a {
2909          bottom: 16px;
2910      }
2911  
2912      .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
2913          bottom: 10px;
2914      }
2915  
2916      .media-widget-control .media-widget-buttons .button.edit-media,
2917      .media-widget-control .media-widget-buttons .button.change-media,
2918      .media-widget-control .media-widget-buttons .button.select-media {
2919          margin-top: 12px;
2920      }
2921  
2922      .customize-preview-header.themes-filter-bar .search-icon {
2923          top: 6px;
2924      }
2925  }
2926  
2927  @media screen and (max-width: 1200px) {
2928      .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2929      .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2930      .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
2931          left: 67%;
2932      }
2933  }
2934  
2935  @media screen and (max-width: 640px) {
2936  
2937      /* when the sidebar is collapsed and switching to responsive view,
2938         bring it back see ticket #35220 */
2939      .wp-full-overlay.collapsed #customize-controls {
2940          margin-left: 0;
2941      }
2942  
2943      .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
2944          bottom: 0;
2945      }
2946  
2947      .customize-controls-preview-toggle {
2948          display: block;
2949          position: absolute;
2950          top: 0;
2951          left: 48px;
2952          line-height: 2.6;
2953          font-size: 14px;
2954          padding: 0 12px 4px;
2955          margin: 0;
2956          height: 45px;
2957          background: #f0f0f1;
2958          border: 0;
2959          border-right: 1px solid #dcdcde;
2960          border-top: 4px solid #f0f0f1;
2961          color: #50575e;
2962          cursor: pointer;
2963          transition: color .1s ease-in-out, background .1s ease-in-out;
2964      }
2965  
2966      #customize-footer-actions,
2967      /*#customize-preview,*/
2968      .customize-controls-preview-toggle .controls,
2969      .preview-only .wp-full-overlay-sidebar-content,
2970      .preview-only .customize-controls-preview-toggle .preview {
2971          display: none;
2972      }
2973  
2974      .preview-only #customize-save-button-wrapper {
2975          margin-top: -46px;
2976      }
2977  
2978      .customize-controls-preview-toggle .preview:before,
2979      .customize-controls-preview-toggle .controls:before {
2980          font: normal 20px/1 dashicons;
2981          content: "\f177";
2982          position: relative;
2983          top: 4px;
2984          margin-right: 6px;
2985      }
2986  
2987      .customize-controls-preview-toggle .controls:before {
2988          content: "\f540";
2989      }
2990  
2991      .preview-only #customize-controls {
2992          height: 45px;
2993      }
2994  
2995      .preview-only #customize-preview,
2996      .preview-only .customize-controls-preview-toggle .controls {
2997          display: block;
2998      }
2999  
3000      .wp-core-ui.wp-customizer .button {
3001          min-height: 30px;
3002          padding: 0 14px;
3003          line-height: 2;
3004          font-size: 14px;
3005          vertical-align: middle;
3006      }
3007  
3008      .customize-control .attachment-media-view .upload-button {
3009          padding: 5px 0;
3010      }
3011  
3012      #customize-control-changeset_status .customize-inside-control-row {
3013          padding-top: 15px;
3014      }
3015  
3016      body.adding-widget div#available-widgets,
3017      body.adding-menu-items div#available-menu-items,
3018      body.outer-section-open div#customize-sidebar-outer-content {
3019          width: 100%;
3020      }
3021  
3022      #available-widgets .customize-section-title,
3023      #available-menu-items .customize-section-title {
3024          border: 0;
3025          clip-path: none;
3026          height: inherit;
3027          margin: 0;
3028          overflow: hidden;
3029          padding: 0;
3030          width: auto;
3031          position: static;
3032      }
3033  
3034      #available-widgets .customize-section-title button,
3035      #available-menu-items .customize-section-title button {
3036          display: block;
3037      }
3038  
3039      #available-widgets .customize-section-back,
3040      #available-menu-items .customize-section-back {
3041          height: 69px;
3042      }
3043  
3044      #available-widgets .customize-section-title h3,
3045      #available-menu-items .customize-section-title h3 {
3046          font-size: 20px;
3047          font-weight: 200;
3048          padding: 9px 10px 12px 14px;
3049          margin: 0;
3050          line-height: 24px;
3051          color: #50575e;
3052          display: block;
3053          overflow: hidden;
3054          white-space: nowrap;
3055          text-overflow: ellipsis;
3056      }
3057  
3058      #available-widgets .customize-section-title .customize-action,
3059      #available-menu-items .customize-section-title .customize-action {
3060          font-size: 13px;
3061          display: block;
3062          font-weight: 400;
3063          overflow: hidden;
3064          white-space: nowrap;
3065          text-overflow: ellipsis;
3066      }
3067  
3068      #available-widgets-filter {
3069          position: relative;
3070          width: 100%;
3071          height: auto;
3072      }
3073  
3074      #available-widgets-list {
3075          top: 152px;
3076      }
3077  
3078      #available-menu-items-search .clear-results {
3079          top: 36px;
3080          right: 16px;
3081      }
3082  
3083      .reorder,
3084      .reordering .reorder-done {
3085          padding: 8px;
3086      }
3087  }
3088  
3089  @media screen and (max-width: 600px) {
3090      .wp-full-overlay.expanded {
3091          margin-left: 0;
3092      }
3093  
3094      body.adding-widget div#available-widgets,
3095      body.adding-menu-items div#available-menu-items,
3096      body.outer-section-open div#customize-sidebar-outer-content {
3097          top: 46px;
3098          z-index: 10;
3099      }
3100  
3101      body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
3102          left: -100%;
3103      }
3104  
3105      body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
3106          left: 0;
3107      }
3108  }