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