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