[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

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

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


Generated : Tue Jun 2 08:20:01 2020 Cross-referenced by PHPXref