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