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