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


Generated : Thu Apr 2 08:20:01 2020 Cross-referenced by PHPXref