[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-admin/css/ -> customize-controls-rtl.css (source)

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


Generated : Tue Sep 29 08:20:02 2020 Cross-referenced by PHPXref