wp-admin/css/customize-controls.css

   1 body {
   2         overflow: hidden;
   3         -webkit-text-size-adjust: 100%;
   4 }
   5
   6 #customize-controls a {
   7         text-decoration: none;
   8 }
   9
  10 #customize-controls h3 {
  11         font-size: 14px;
  12 }
  13
  14 #customize-controls img {
  15         max-width: 100%;
  16 }
  17
  18 #customize-controls .submit {
  19         text-align: center;
  20 }
  21
  22 #customize-controls .description {
  23         color: #666666;
  24 }
  25
  26 #customize-header-actions .button-primary {
  27         float: right;
  28         margin-top: 9px;
  29 }
  30
  31 #customize-header-actions .spinner {
  32         margin-top: 13px;
  33         margin-right: 4px;
  34 }
  35
  36 .saving #customize-header-actions .spinner {
  37         visibility: visible;
  38 }
  39
  40 #customize-header-actions {
  41         border-bottom: 1px solid #ddd;
  42 }
  43
  44 #customize-header-actions .secondary-actions {
  45         display: none;
  46 }
  47
  48 #customize-controls .wp-full-overlay-sidebar-content {
  49         overflow-y: auto;
  50         overflow-x: hidden;
  51 }
  52
  53 #customize-info {
  54         border: none;
  55         border-top: 1px solid #ddd;
  56 }
  57
  58 #customize-info .accordion-section-title {
  59         background-color: #fff;
  60         color: #666666;
  61         border-left: none;
  62         border-right: none;
  63         border-bottom: 1px solid #eeeeee;
  64 }
  65
  66 #customize-info.open .accordion-section-title:after,
  67 #customize-info .accordion-section-title:hover:after,
  68 #customize-info .accordion-section-title:focus:after {
  69         color: #555555;
  70 }
  71
  72 #customize-info .preview-notice {
  73         font-size: 13px;
  74         line-height: 24px;
  75 }
  76
  77 #customize-info .theme-name {
  78         font-size: 20px;
  79         font-weight: 200;
  80         line-height: 24px;
  81         display: block;
  82 }
  83
  84 #customize-info .theme-screenshot {
  85         width: 258px;
  86 }
  87
  88 #customize-info .theme-description {
  89         margin-top: 1em;
  90         color: #666666;
  91         line-height: 20px;
  92 }
  93
  94 #customize-theme-controls .control-section {
  95         border: none;
  96 }
  97
  98 #customize-theme-controls .accordion-section-title {
  99         color: #555555;
 100         background-color: #fff;
 101         border-bottom: 1px solid #eeeeee;
 102 }
 103
 104 #customize-theme-controls .accordion-section-content {
 105         color: #555555;
 106         background: #fff;
 107 }
 108
 109 #customize-info.open .accordion-section-title,
 110 #customize-info .accordion-section-title:hover,
 111 #customize-info .accordion-section-title:focus,
 112 #customize-theme-controls .control-section:hover > .accordion-section-title,
 113 #customize-theme-controls .control-section .accordion-section-title:hover,
 114 #customize-theme-controls .control-section.open .accordion-section-title,
 115 #customize-theme-controls .control-section .accordion-section-title:focus {
 116         color: #23282d;
 117         background: #f5f5f5;
 118 }
 119
 120 .js .control-section:hover .accordion-section-title,
 121 .js .control-section .accordion-section-title:hover,
 122 .js .control-section.open .accordion-section-title,
 123 .js .control-section .accordion-section-title:focus {
 124         background: #f5f5f5;
 125 }
 126
 127 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
 128 #customize-theme-controls .control-section .accordion-section-title:hover:after,
 129 #customize-theme-controls .control-section.open .accordion-section-title:after,
 130 #customize-theme-controls .control-section .accordion-section-title:focus:after {
 131         color: #555;
 132 }
 133
 134 #customize-info.open,
 135 #customize-theme-controls .control-section.open {
 136         border-bottom: 1px solid #eeeeee;
 137 }
 138
 139 #customize-theme-controls .control-section.open .accordion-section-title {
 140         border-bottom-color: #eeeeee !important;
 141 }
 142
 143 #customize-theme-controls .control-section:last-of-type.open,
 144 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 145         border-bottom-color: #ddd;
 146 }
 147
 148 #customize-theme-controls > ul,
 149 #customize-theme-controls .accordion-section-content {
 150         margin: 0;
 151 }
 152
 153 .control-section.control-panel > .accordion-section-title {
 154         padding-right: 54px;
 155 }
 156
 157 .control-section.control-panel > .accordion-section-title:after {
 158         content: "\f345";
 159         background: #f5f5f5;
 160         color: #555;
 161         width: 38px;
 162         height: 100%;
 163         margin: -11px -10px -11px 0; /* compensate for positioning */
 164         line-height: 45px;
 165         padding-left: 5px;
 166         border-left: 1px solid #eee;
 167         z-index: 0;
 168 }
 169
 170 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
 171 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
 172         background: #ddd;
 173         color: #000;
 174         border: 1px solid #d9d9d9;
 175         border-right: none;
 176         margin-top: -12px;
 177         line-height: 44px;
 178         z-index: 1;
 179 }
 180
 181 .accordion-sub-container.control-panel-content {
 182         display: none;
 183         position: absolute;
 184         left: 300px;
 185         top: 0;
 186         width: 300px;
 187         border-top: 1px solid #ddd;
 188         -webkit-transition: left ease-in-out .18s;
 189         transition: left ease-in-out .18s;
 190 }
 191
 192 .accordion-sub-container.control-panel-content.animating {
 193         display: block;
 194 }
 195
 196 .current-panel .accordion-sub-container.control-panel-content {
 197         width: 100%;
 198 }
 199
 200 .customize-overlay-close,
 201 .customize-controls-close {
 202         display: block;
 203         position: absolute;
 204         top: 0;
 205         left: 0;
 206         width: 45px;
 207         height: 45px;
 208         padding: 0 2px 0 0;
 209         background: #eee;
 210         border: none;
 211         border-right: 1px solid #ddd;
 212         color: #444;
 213         text-align: left;
 214         cursor: pointer;
 215         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 216         transition: color .1s ease-in-out, background .1s ease-in-out;
 217         -webkit-box-sizing: content-box;
 218         -moz-box-sizing: content-box;
 219         box-sizing: content-box;
 220 }
 221
 222 .customize-overlay-close {
 223         left: auto;
 224         right: 0;
 225         border-right: 0;
 226         border-left: 1px solid #ddd;
 227 }
 228
 229 .control-panel-back {
 230         display: block;
 231         position: fixed;
 232         top: 0;
 233         z-index: 99;
 234         left: -48px;
 235         width: 45px;
 236         height: 45px;
 237         padding-right: 2px;
 238         background: #eee;
 239         border-right: 1px solid #ddd;
 240         cursor: pointer;
 241         -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 242         transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 243 }
 244
 245 .ios .control-panel-back {
 246         -webkit-transition: left 0s;
 247         transition: left 0s;
 248 }
 249
 250 .collapsed .control-panel-back {
 251         display: none;
 252 }
 253
 254 .customize-overlay-close:focus,
 255 .customize-overlay-close:hover,
 256 .customize-controls-close:focus,
 257 .customize-controls-close:hover,
 258 .control-panel-back:focus,
 259 .control-panel-back:hover,
 260 .customize-controls-preview-toggle:focus,
 261 .customize-controls-preview-toggle:hover {
 262         background: #ddd;
 263         border-color: #ccc;
 264         color: #000;
 265         outline: none;
 266         -webkit-box-shadow: none;
 267         box-shadow: none;
 268 }
 269
 270 .customize-overlay-close:before,
 271 .customize-controls-close:before {
 272         font: normal 22px/45px dashicons;
 273         content: "\f335";
 274         position: relative;
 275         top: 1px;
 276         left: 13px;
 277 }
 278
 279 .control-panel-back:before {
 280         font: normal 20px/45px dashicons;
 281         content: "\f341";
 282         position: relative;
 283         top: 1px;
 284         left: 13px;
 285 }
 286
 287 .in-sub-panel .control-panel-back {
 288         left: 0;
 289 }
 290
 291 .current-panel > .accordion-section-title {
 292         height: 22px;
 293 }
 294
 295 .wp-full-overlay-sidebar .wp-full-overlay-header {
 296         -webkit-transition: padding ease-in-out .18s;
 297         transition: padding ease-in-out .18s;
 298 }
 299
 300 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 301         padding-left: 62px;
 302 }
 303
 304 #customize-info,
 305 #customize-theme-controls > ul > .accordion-section {
 306         position: relative;
 307         left: 0;
 308         -webkit-transition: left ease-in-out .18s;
 309         transition: left ease-in-out .18s;
 310 }
 311
 312 .ios #customize-info,
 313 .ios #customize-theme-controls > ul > .accordion-section {
 314         -webkit-transition: left 0s;
 315         transition: left 0s;
 316 }
 317
 318 .in-sub-panel #customize-info,
 319 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
 320         left: -300px;
 321         width: 300px;
 322 }
 323
 324 .in-sub-panel #customize-theme-controls .accordion-section.current-panel {
 325         width: 100%;
 326 }
 327
 328 #customize-theme-controls .control-section.current-panel {
 329         padding: 0;
 330 }
 331
 332 #customize-theme-controls .control-section > h3.accordion-section-title {
 333         position: relative;
 334         left: 0;
 335 }
 336
 337 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
 338         left: -354px;
 339         -webkit-transition: left ease-in-out .18s;
 340         transition: left ease-in-out .18s;
 341 }
 342
 343 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
 344         -webkit-transition: left 0s;
 345         transition: left 0s;
 346 }
 347
 348 .control-section.control-panel .accordion-section-title .panel-title {
 349         font-size: 20px;
 350         font-weight: 200;
 351         line-height: 24px;
 352         display: block;
 353         border: none;
 354 }
 355
 356 .control-section.control-panel .preview-notice {
 357         font-size: 13px;
 358         line-height: 24px;
 359 }
 360
 361 p.customize-section-description {
 362         font-style: normal;
 363 }
 364
 365 .customize-control {
 366         width: 100%;
 367         float: left;
 368         clear: both;
 369         margin-bottom: 8px;
 370 }
 371
 372 .customize-control select,
 373 .customize-control input[type="radio"],
 374 .customize-control input[type="checkbox"] {
 375         line-height: 28px;
 376 }
 377
 378 .customize-control input[type="text"],
 379 .customize-control input[type="password"],
 380 .customize-control input[type="email"],
 381 .customize-control input[type="number"],
 382 .customize-control input[type="search"],
 383 .customize-control input[type="tel"],
 384 .customize-control input[type="url"] {
 385         width: 98%;
 386         line-height: 18px;
 387         margin: 0;
 388 }
 389
 390 .customize-control-hidden {
 391         margin: 0;
 392 }
 393
 394 .customize-control-textarea textarea {
 395         width: 100%;
 396         resize: vertical;
 397 }
 398
 399 .customize-control select {
 400         min-width: 50%;
 401         max-width: 100%;
 402         height: 28px;
 403         line-height: 28px;
 404 }
 405
 406 .customize-control select[multiple] {
 407         height: auto;
 408 }
 409
 410 .customize-control-title {
 411         display: block;
 412         font-size: 14px;
 413         line-height: 24px;
 414         font-weight: 600;
 415         margin-bottom: 5px;
 416 }
 417
 418 .customize-control-description {
 419         display: block;
 420         font-style: italic;
 421         line-height: 18px;
 422         margin-bottom: 5px;
 423 }
 424
 425 .customize-control-color .color-picker,
 426 .customize-control-checkbox label,
 427 .customize-control-upload div {
 428         line-height: 28px;
 429 }
 430
 431 .customize-control-checkbox input {
 432         margin-right: 5px;
 433 }
 434
 435 .customize-control-radio {
 436         padding: 5px 0 10px;
 437 }
 438
 439 .customize-control-radio .customize-control-title {
 440         margin-bottom: 0;
 441         line-height: 22px;
 442 }
 443
 444 .customize-control-radio .customize-control-title + .customize-control-description {
 445         margin-top: 7px;
 446 }
 447
 448 .customize-control-radio label {
 449         line-height: 32px;
 450 }
 451
 452 .customize-control-radio input {
 453         margin-right: 5px;
 454 }
 455
 456 .customize-control .attachment-thumb.type-icon {
 457         float: left;
 458         margin: 10px;
 459         width: auto;
 460 }
 461
 462 .customize-control .attachment-title {
 463         font-weight: bold;
 464         margin: 0;
 465         padding: 5px 10px;
 466 }
 467
 468 .customize-control .attachment-meta {
 469         white-space: nowrap;
 470         overflow: hidden;
 471         text-overflow: ellipsis;
 472         margin: 0;
 473         padding: 0 10px;
 474 }
 475
 476 .customize-control .attachment-meta-title {
 477         padding-top: 7px;
 478 }
 479
 480 .customize-control .thumbnail-image {
 481         line-height: 0;
 482 }
 483
 484 .customize-control .thumbnail-image img {
 485         cursor: pointer;
 486 }
 487
 488 #customize-controls .thumbnail-audio .thumbnail {
 489         max-width: 64px;
 490         max-height: 64px;
 491         margin: 10px;
 492         float: left;
 493 }
 494
 495 #customize-preview iframe {
 496         width: 100%;
 497         height: 100%;
 498 }
 499
 500 .wp-full-overlay-sidebar {
 501         background: #eeeeee;
 502         border-right: 1px solid #ddd;
 503 }
 504
 505 .collapse-sidebar {
 506         background-color: transparent !important;
 507         border: none !important;
 508         -webkit-box-shadow: none !important;
 509         box-shadow: none !important;
 510         -webkit-border-radius: 0 !important;
 511         border-radius: 0 !important;
 512 }
 513
 514
 515 .collapse-sidebar:active,
 516 .collapse-sidebar:active .collapse-sidebar-label,
 517 .collapse-sidebar:active .collapse-sidebar-arrow:before {
 518         text-shadow: none;
 519 }
 520
 521 .collapsed .collapse-sidebar-arrow:before {
 522         color: #82878c;
 523 }
 524
 525 /* Style for custom settings */
 526
 527 /*
 528  * Dropdowns
 529  */
 530 .accordion-section .dropdown {
 531         float: left;
 532         display: block;
 533         position: relative;
 534         cursor: pointer;
 535 }
 536
 537 .accordion-section .dropdown-content {
 538         overflow: hidden;
 539         float: left;
 540         min-width: 30px;
 541         height: 16px;
 542         line-height: 16px;
 543         margin-right: 16px;
 544         padding: 4px 5px;
 545         border: 2px solid #eeeeee;
 546         -webkit-user-select: none;
 547         -moz-user-select: none;
 548         -ms-user-select: none;
 549         user-select: none;
 550 }
 551
 552 .customize-control .dropdown-arrow {
 553         position: absolute;
 554         top: 0;
 555         bottom: 0;
 556         right: 0;
 557         width: 20px;
 558         background: #eeeeee;
 559 }
 560
 561 .customize-control .dropdown-arrow:after {
 562         content: "\f140";
 563         font: normal 20px/1 'dashicons';
 564         speak: none;
 565         display: block;
 566         padding: 0;
 567         text-indent: 0;
 568         text-align: center;
 569         position: relative;
 570         -webkit-font-smoothing: antialiased;
 571         -moz-osx-font-smoothing: grayscale;
 572         text-decoration: none !important;
 573         color: #32373c;
 574 }
 575
 576 .customize-control .dropdown-status {
 577         color: #32373c;
 578         background: #eeeeee;
 579         display: none;
 580         max-width: 112px;
 581 }
 582
 583 /* Color Picker */
 584 .customize-control-color .color-picker-hex {
 585         display: none;
 586 }
 587
 588 .customize-control-color.open .color-picker-hex {
 589         display: block;
 590 }
 591
 592 .customize-control-color .dropdown {
 593         margin-right: 5px;
 594         margin-bottom: 5px;
 595 }
 596
 597 .customize-control-color .dropdown .dropdown-content {
 598         background-color: #555555;
 599         border: 1px solid rgba(0, 0, 0, 0.15);
 600 }
 601
 602 .customize-control-color .dropdown:hover .dropdown-content {
 603         border-color: rgba(0, 0, 0, 0.25);
 604 }
 605
 606 /**
 607  * iOS can't scroll iframes,
 608  * instead it expands the iframe size to match the size of the content
 609  */
 610 .ios .wp-full-overlay {
 611         position: relative;
 612 }
 613
 614 .ios #customize-preview {
 615         position: relative;
 616 }
 617
 618 .ios #customize-controls .wp-full-overlay-sidebar-content {
 619         -webkit-overflow-scrolling: touch;
 620 }
 621
 622 /** Media controls **/
 623
 624 .customize-control-media .current,
 625 .customize-control-upload .current,
 626 .customize-control-image .current,
 627 .customize-control-background .current,
 628 .customize-control-header .current {
 629         margin-bottom: 8px;
 630 }
 631
 632 .customize-control-header .uploaded {
 633         margin-bottom: 18px;
 634 }
 635
 636 .customize-control-header .uploaded button:not(.random),
 637 .customize-control-header .default button:not(.random) {
 638         width: 100%;
 639         padding: 0;
 640         margin: 0;
 641         background: none;
 642         border: none;
 643         color: inherit;
 644         cursor: pointer;
 645 }
 646
 647 .customize-control-header button img {
 648         display: block;
 649 }
 650
 651 .customize-control-media .remove-button,
 652 .customize-control-media .default-button,
 653 .customize-control-media .upload-button,
 654 .customize-control-upload .remove-button,
 655 .customize-control-upload .default-button,
 656 .customize-control-upload .upload-button,
 657 .customize-control-image .remove-button,
 658 .customize-control-image .default-button,
 659 .customize-control-image .upload-button,
 660 .customize-control-background .remove-button,
 661 .customize-control-background .default-button,
 662 .customize-control-background .upload-button,
 663 .customize-control-header button.new,
 664 .customize-control-header button.remove {
 665         white-space: normal;
 666         width: 48%;
 667         height: auto;
 668 }
 669
 670 .customize-control-media .current .container,
 671 .customize-control-upload .current .container,
 672 .customize-control-image .current .container,
 673 .customize-control-background .current .container,
 674 .customize-control-header .current .container {
 675         overflow: hidden;
 676         -webkit-border-radius: 2px;
 677         border: 1px solid #eee;
 678         -webkit-border-radius: 2px;
 679         border-radius: 2px;
 680 }
 681
 682 .customize-control-media .current .container,
 683 .customize-control-upload .current .container,
 684 .customize-control-background .current .container,
 685 .customize-control-image .current .container {
 686         min-height: 40px;
 687 }
 688
 689 .customize-control-media .placeholder,
 690 .customize-control-upload .placeholder,
 691 .customize-control-image .placeholder,
 692 .customize-control-background .placeholder,
 693 .customize-control-header .placeholder {
 694         width: 100%;
 695         position: relative;
 696         text-align: center;
 697         cursor: default;
 698 }
 699
 700 .customize-control-media .inner,
 701 .customize-control-upload .inner,
 702 .customize-control-image .inner,
 703 .customize-control-background .inner,
 704 .customize-control-header .inner {
 705         display: none;
 706         position: absolute;
 707         width: 100%;
 708         color: #555;
 709         white-space: nowrap;
 710         text-overflow: ellipsis;
 711         overflow: hidden;
 712 }
 713
 714 .customize-control-media .inner,
 715 .customize-control-upload .inner,
 716 .customize-control-background .inner,
 717 .customize-control-image .inner {
 718         display: block;
 719         min-height: 40px;
 720 }
 721
 722 .customize-control-media .inner,
 723 .customize-control-upload .inner,
 724 .customize-control-image .inner,
 725 .customize-control-background .inner,
 726 .customize-control-header .inner,
 727 .customize-control-header .inner .dashicons {
 728         line-height: 20px;
 729         top: 10px;
 730 }
 731
 732 .customize-control-header .list .inner,
 733 .customize-control-header .list .inner .dashicons {
 734         top: 9px;
 735 }
 736
 737 .customize-control-header .header-view {
 738         position: relative;
 739         width: 100%;
 740         margin-bottom: 5px;
 741 }
 742
 743 .customize-control-header .header-view:last-child {
 744         margin-bottom: 0px;
 745 }
 746
 747 /* Convoluted, but 'outline' support isn't good enough yet */
 748 .customize-control-header .header-view:after {
 749         border: 0;
 750 }
 751 .customize-control-header .header-view.selected:after {
 752         content: '';
 753         position: absolute;
 754         height: auto;
 755         top: 0; left: 0; bottom: 0; right: 0;
 756         border: 4px solid #00a0d2;
 757         -webkit-border-radius: 2px;
 758         border-radius: 2px;
 759 }
 760 .customize-control-header .header-view.button.selected {
 761         border: 0;
 762 }
 763
 764 /* Header control: overlay "close" button */
 765
 766 .customize-control-header .uploaded .header-view .close {
 767         font-size: 2em;
 768         color: grey;
 769         position: absolute;
 770         visibility: hidden;
 771         top: 10px;
 772         right: 10px;
 773         z-index: 1;
 774         width: 20px;
 775         height: 20px;
 776         cursor: pointer;
 777 }
 778
 779 .customize-control-header .uploaded .header-view .close:hover {
 780  color: black;
 781  text-shadow:
 782     -1px -1px 0 #fff,
 783     1px -1px 0 #fff,
 784     -1px 1px 0 #fff,
 785     1px 1px 0 #fff;
 786 }
 787
 788 .customize-control-header .header-view:hover .close {
 789         visibility: visible;
 790 }
 791
 792 /* Header control: randomiz(s)er */
 793
 794 .customize-control-header .random.placeholder {
 795         cursor: pointer;
 796         -webkit-border-radius: 2px;
 797         border-radius: 2px;
 798         height: 40px;
 799 }
 800
 801 .customize-control-header button.random {
 802         width: 100%;
 803         height: auto;
 804         min-height: 40px;
 805         white-space: normal;
 806 }
 807
 808 .customize-control-header button.random .dice {
 809         margin-top: 4px;
 810 }
 811
 812 .customize-control-header .placeholder:hover .dice,
 813 .customize-control-header .header-view:hover > button.random .dice {
 814         -webkit-animation: dice-color-change 3s infinite;
 815         animation: dice-color-change 3s infinite;
 816 }
 817
 818 @-webkit-keyframes dice-color-change {
 819         0% { color: #d4b146; }
 820         50% { color: #ef54b0; }
 821         75% { color: #7190d3; }
 822         100% { color: #d4b146; }
 823 }
 824
 825 @keyframes dice-color-change {
 826         0% { color: #d4b146; }
 827         50% { color: #ef54b0; }
 828         75% { color: #7190d3; }
 829         100% { color: #d4b146; }
 830 }
 831
 832 .customize-control-media .actions,
 833 .customize-control-upload .actions,
 834 .customize-control-image .actions,
 835 .customize-control-background .actions,
 836 .customize-control-header .actions {
 837         margin-bottom: 32px;
 838 }
 839
 840 .customize-control-header .choice {
 841         position: relative;
 842         display: block;
 843         margin-bottom: 9px;
 844 }
 845
 846 .customize-control-header .uploaded div:last-child > .choice {
 847         margin-bottom: 0;
 848 }
 849
 850 .customize-control-media img,
 851 .customize-control-upload img,
 852 .customize-control-image img,
 853 .customize-control-background img,
 854 .customize-control-header img {
 855         width: 100%;
 856         -webkit-border-radius: 2px;
 857         border-radius: 2px;
 858 }
 859
 860 .customize-control-media .remove-button,
 861 .customize-control-media .default-button,
 862 .customize-control-upload .remove-button,
 863 .customize-control-upload .default-button,
 864 .customize-control-image .remove-button,
 865 .customize-control-image .default-button,
 866 .customize-control-background .remove-button,
 867 .customize-control-background .default-button,
 868 .customize-control-header .remove {
 869         float: left;
 870         margin-right: 3px;
 871 }
 872
 873 .customize-control-media .upload-button,
 874 .customize-control-upload .upload-button,
 875 .customize-control-image .upload-button,
 876 .customize-control-background .upload-button,
 877 .customize-control-header .new {
 878         float: right;
 879 }
 880
 881 /**
 882  * Themes
 883  */
 884 @-webkit-keyframes customize-reload {
 885         0%   { opacity: 0; }
 886         100% { opacity: 1; }
 887 }
 888
 889 @keyframes customize-reload {
 890         0%   { opacity: 0; }
 891         100% { opacity: 1; }
 892 }
 893
 894 /* #customize-container is reused from customize-loader.js, hence the naming. */
 895 .wp-customizer .customize-loading #customize-container {
 896         display: block;
 897         -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
 898         animation: customize-reload .75s;
 899 }
 900
 901 .control-section-themes .accordion-section-title {
 902         cursor: default;
 903 }
 904
 905 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
 906 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
 907         color: #555555;
 908         background-color: #fff;
 909 }
 910
 911 .control-section-themes .accordion-section-title {
 912         margin: 15px 0;
 913 }
 914
 915 .customize-themes-panel .accordion-section-title {
 916         margin: 15px -8px;
 917 }
 918
 919 .control-section-themes .accordion-section-title {
 920         padding-right: 100px; /* Space for the button */
 921 }
 922
 923 .control-section-themes .accordion-section-title span {
 924         font-size: small;
 925         display: block;
 926         font-weight: 400;
 927 }
 928
 929 .control-section-themes .accordion-section-title .change-theme,
 930 .control-section-themes .accordion-section-title .customize-theme {
 931         position: absolute;
 932         right: 10px;
 933         top: 50%;
 934         margin-top: -14px;
 935         font-weight: normal;
 936 }
 937
 938 .customize-themes-panel {
 939         display: none;
 940         padding: 0 8px;
 941         background: #f1f1f1;
 942         box-sizing: border-box;
 943         -webkit-box-sizing: border-box;
 944         -moz-box-sizing: border-box;
 945         box-sizing: border-box;
 946 }
 947
 948
 949 .customize-themes-panel > h2 {
 950         padding: 15px 8px 0 8px;
 951 }
 952
 953 .control-section.open .customize-themes-panel {
 954         display: block;
 955 }
 956
 957 #customize-theme-controls .customize-themes-panel .accordion-section-content {
 958         background: transparent;
 959         display: block;
 960 }
 961
 962 .customize-control.customize-control-theme {
 963         margin-bottom: 8px;
 964 }
 965
 966 .wp-customizer .theme-browser .themes {
 967         padding-bottom: 8px;
 968 }
 969
 970 .wp-customizer .theme-browser .theme {
 971         margin: 0;
 972         width: 100%;
 973 }
 974
 975 .wp-customizer .theme-browser .theme .theme-actions {
 976         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 977         opacity: 1;
 978 }
 979
 980 #customize-controls h3.theme-name {
 981         font-size: 15px;
 982 }
 983
 984 #customize-controls .theme-overlay .theme-name {
 985         font-size: 32px;
 986 }
 987
 988 .wp-customizer #themes-filter {
 989         font-size: 16px;
 990         font-weight: 300;
 991         line-height: 1.5;
 992         width: 100%;
 993 }
 994
 995 #accordion-section-themes .accordion-section-title:after {
 996         display: none;
 997 }
 998
 999 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
1000         left: 0;
1001 }
1002
1003 .customize-themes-panel.control-panel-content {
1004         position: absolute;
1005         left: -100%;
1006         top: 0;
1007         width: 100%;
1008         border-top: 1px solid #ddd;
1009 }
1010
1011 .in-themes-panel #customize-info,
1012 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
1013         left: 100%;
1014 }
1015
1016 /* Details View */
1017 .wp-customizer .theme-overlay {
1018         display: none;
1019 }
1020
1021 .wp-customizer.modal-open .theme-overlay {
1022         position: fixed;
1023         left: 0;
1024         top: 0;
1025         right: 0;
1026         bottom: 0;
1027         z-index: 109;
1028 }
1029
1030 .wp-customizer .theme-overlay .theme-backdrop {
1031         background: rgba( 238, 238, 238, 0.75 );
1032         position: fixed;
1033         z-index: 110;
1034 }
1035
1036 .wp-customizer .theme-overlay .theme-wrap {
1037         left: 90px;
1038         right: 90px;
1039         top: 45px;
1040         bottom: 45px;
1041         z-index: 120;
1042         max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
1043 }
1044
1045 .wp-customizer .theme-overlay .theme-actions {
1046         text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
1047 }
1048
1049 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
1050         overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
1051 }
1052
1053 .ie8 .wp-customizer .theme-overlay .theme-header,
1054 .ie8 .wp-customizer .theme-overlay .theme-about,
1055 .ie8 .wp-customizer .theme-overlay .theme-actions {
1056         position: static;
1057 }
1058
1059 /* Small Screens */
1060 @media (max-width:850px), (max-height:472px) {
1061         .wp-customizer .theme-overlay .theme-wrap {
1062                 left: 0;
1063                 right: 0;
1064                 top: 0;
1065                 bottom: 0;
1066         }
1067 }
1068
1069 /* Handle cheaters. */
1070 body.cheatin {
1071         font-size: medium;
1072         height: auto;
1073         background: #fff;
1074         margin: 50px auto 2em;
1075         padding: 1em 2em;
1076         max-width: 700px;
1077         min-width: 0;
1078         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1079         box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1080 }
1081
1082 body.cheatin p {
1083         font-size: 14px;
1084         line-height: 1.5;
1085         margin: 25px 0 20px;
1086 }
1087
1088 /* Responsive */
1089 .customize-controls-preview-toggle {
1090         display: none;
1091 }
1092
1093 @media only screen and (max-width: 780px) {
1094         .wp-customizer .theme:not(.active):hover .theme-actions,
1095         .wp-customizer .theme:not(.active):focus .theme-actions {
1096                 display: block;
1097         }
1098
1099         .wp-customizer .theme-browser .theme.active .theme-name span {
1100                 display: inline;
1101         }
1102 }
1103
1104 @media screen and ( max-width: 640px ) {
1105         #customize-controls {
1106                 width: 100%;
1107         }
1108
1109         .wp-full-overlay.expanded {
1110                 margin-left: 0;
1111         }
1112
1113         .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1114                 bottom: 0;
1115         }
1116
1117         .customize-controls-preview-toggle {
1118                 display: block;
1119                 position: absolute;
1120                 top: 0;
1121                 left: 48px;
1122                 line-height: 45px;
1123                 font-size: 14px;
1124                 padding: 0 12px 0 12px;
1125                 margin: 0;
1126                 height: 45px;
1127                 background: #eee;
1128                 border-right: 1px solid #ddd;
1129                 color: #444;
1130                 cursor: pointer;
1131                 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1132                 transition: color .1s ease-in-out, background .1s ease-in-out;
1133         }
1134
1135         #customize-footer-actions,
1136         #customize-preview,
1137         .customize-controls-preview-toggle .controls,
1138         .preview-only .wp-full-overlay-sidebar-content,
1139         .preview-only .customize-controls-preview-toggle .preview {
1140                 display: none;
1141         }
1142
1143         .customize-controls-preview-toggle .preview:before,
1144         .customize-controls-preview-toggle .controls:before {
1145                 font: normal 20px/1 dashicons;
1146                 content: "\f177";
1147                 position: relative;
1148                 top: 4px;
1149                 margin-right: 6px;
1150         }
1151
1152         .customize-controls-preview-toggle .controls:before {
1153                 content: "\f100";
1154         }
1155
1156         .preview-only #customize-controls {
1157                 height: 45px;
1158         }
1159
1160         .preview-only #customize-preview,
1161         .preview-only .customize-controls-preview-toggle .controls {
1162                 display: block;
1163         }
1164
1165         #customize-preview {
1166                 top: 45px;
1167                 bottom: 0;
1168                 height: auto;
1169         }
1170
1171         .wp-core-ui.wp-customizer .button {
1172                 padding: 6px 14px;
1173                 line-height: normal;
1174                 font-size: 14px;
1175                 vertical-align: middle;
1176                 height: auto;
1177                 margin-bottom: 4px;
1178         }
1179
1180         .adding-widget #customize-header-actions .primary-actions {
1181                 display: none;
1182         }
1183
1184         .adding-widget #customize-header-actions .secondary-actions {
1185                 display: block;
1186         }
1187
1188         #customize-header-actions .button-primary {
1189                 margin-top: 6px;
1190         }
1191 }