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