[Summary view] [Print] [Text view]

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