[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

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


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7