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