wp-admin/css/customize-controls-rtl.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: left;
  28         margin-top: 9px;
  29 }
  30
  31 #customize-header-actions .spinner {
  32         margin-top: 13px;
  33         margin-left: 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-right: none;
  60         border-left: 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         left: 1px;
 102         padding: 20px 10px 10px 20px;
 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         right: 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-left: 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: "\f341";
 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         right: 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 14px 12px 10px;
 255         margin: 0;
 256         line-height: 21px;
 257         color: #555;
 258 }
 259
 260 #customize-theme-controls {
 261         position: relative;
 262         right: 0;
 263         -webkit-transition: .18s right ease-in-out;
 264         transition: .18s right ease-in-out;
 265 }
 266
 267 .ios #customize-theme-controls {
 268         -webkit-transition: right 0s;
 269         transition: right 0s;
 270 }
 271
 272 .section-open #customize-info,
 273 .section-open #customize-theme-controls {
 274         right: -100%;
 275 }
 276
 277 .accordion-sub-container.control-panel-content {
 278         display: none;
 279         position: absolute;
 280         right: 300px;
 281         top: 0;
 282         width: 300px;
 283         -webkit-transition: right ease-in-out .18s;
 284         transition: right ease-in-out .18s;
 285 }
 286
 287 .ios .accordion-sub-container.control-panel-content {
 288         -webkit-transition: right 0s;
 289         transition: right 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         right: 0;
 305         width: 45px;
 306         height: 45px;
 307         padding: 0 0 0 2px;
 308         background: #eee;
 309         border: none;
 310         border-left: 1px solid #ddd;
 311         color: #444;
 312         text-align: right;
 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: right;
 325         width: 48px;
 326         height: 71px;
 327         padding: 0 0 0 24px;
 328         margin: 0;
 329         background: #fff;
 330         border: none;
 331         border-left: 1px solid #ddd;
 332         -webkit-box-shadow: none;
 333         box-shadow: none;
 334         cursor: pointer;
 335         -webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 336         transition: right .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: right 0s;
 346         transition: right 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-right: 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         right: 13px;
 395 }
 396
 397 .customize-panel-back:before,
 398 .customize-section-back:before {
 399         font: normal 20px/72px dashicons;
 400         content: "\f345";
 401         position: relative;
 402         right: 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-right: 62px;
 412 }
 413
 414 #customize-info,
 415 #customize-theme-controls > ul > .accordion-section {
 416         position: relative;
 417         right: 0;
 418         -webkit-transition: right ease-in-out .18s;
 419         transition: right ease-in-out .18s;
 420 }
 421
 422 .ios #customize-info,
 423 .ios #customize-theme-controls > ul > .accordion-section {
 424         -webkit-transition: right 0s;
 425         transition: right 0s;
 426 }
 427
 428 .in-sub-panel #customize-info,
 429 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
 430         right: -300px;
 431         width: 300px;
 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         right: 0;
 445 }
 446
 447 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
 448         right: -354px;
 449         -webkit-transition: right ease-in-out .18s;
 450         transition: right ease-in-out .18s;
 451 }
 452
 453 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
 454         -webkit-transition: right 0s;
 455         transition: right 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: right;
 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: 98%;
 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: 5px;
 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-right: 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-left: 4px;
 556         margin-right: -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: right;
 574         margin: 10px;
 575         width: auto;
 576 }
 577
 578 .customize-control .attachment-title {
 579         font-weight: bold;
 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: right;
 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-left: 1px solid #ddd;
 623 }
 624
 625 /* Style for custom settings */
 626
 627 /**
 628  * Dropdowns
 629  */
 630
 631 .accordion-section .dropdown {
 632         float: right;
 633         display: block;
 634         position: relative;
 635         cursor: pointer;
 636 }
 637
 638 .accordion-section .dropdown-content {
 639         overflow: hidden;
 640         float: right;
 641         min-width: 30px;
 642         height: 16px;
 643         line-height: 16px;
 644         margin-left: 16px;
 645         padding: 4px 5px;
 646         border: 2px solid #eee;
 647         -webkit-user-select: none;
 648         -moz-user-select: none;
 649         -ms-user-select: none;
 650         user-select: none;
 651 }
 652
 653 /* @todo maybe no more used? */
 654 .customize-control .dropdown-arrow {
 655         position: absolute;
 656         top: 0;
 657         bottom: 0;
 658         left: 0;
 659         width: 20px;
 660         background: #eee;
 661 }
 662
 663 .customize-control .dropdown-arrow:after {
 664         content: "\f140";
 665         font: normal 20px/1 dashicons;
 666         speak: none;
 667         display: block;
 668         padding: 0;
 669         text-indent: 0;
 670         text-align: center;
 671         position: relative;
 672         -webkit-font-smoothing: antialiased;
 673         -moz-osx-font-smoothing: grayscale;
 674         text-decoration: none !important;
 675         color: #32373c;
 676 }
 677
 678 .customize-control .dropdown-status {
 679         color: #32373c;
 680         background: #eee;
 681         display: none;
 682         max-width: 112px;
 683 }
 684
 685 /* Color Picker */
 686 .customize-control-color .color-picker-hex {
 687         display: none;
 688 }
 689
 690 .customize-control-color.open .color-picker-hex {
 691         display: block;
 692 }
 693
 694 .customize-control-color .dropdown {
 695         margin-left: 5px;
 696         margin-bottom: 5px;
 697 }
 698
 699 .customize-control-color .dropdown .dropdown-content {
 700         background-color: #555;
 701         border: 1px solid rgba(0, 0, 0, 0.15);
 702 }
 703
 704 .customize-control-color .dropdown:hover .dropdown-content {
 705         border-color: rgba(0, 0, 0, 0.25);
 706 }
 707
 708 /**
 709  * iOS can't scroll iframes,
 710  * instead it expands the iframe size to match the size of the content
 711  */
 712
 713 .ios .wp-full-overlay {
 714         position: relative;
 715 }
 716
 717 .ios #customize-controls .wp-full-overlay-sidebar-content {
 718         -webkit-overflow-scrolling: touch;
 719 }
 720
 721 /* Media controls */
 722
 723 .customize-control-media .current,
 724 .customize-control-upload .current,
 725 .customize-control-image .current,
 726 .customize-control-background .current,
 727 .customize-control-cropped_image .current,
 728 .customize-control-site_icon .current,
 729 .customize-control-header .current {
 730         margin-bottom: 8px;
 731 }
 732
 733 .customize-control-header .uploaded {
 734         margin-bottom: 18px;
 735 }
 736
 737 .customize-control-header .uploaded button:not(.random),
 738 .customize-control-header .default button:not(.random) {
 739         width: 100%;
 740         padding: 0;
 741         margin: 0;
 742         background: none;
 743         border: none;
 744         color: inherit;
 745         cursor: pointer;
 746 }
 747
 748 .customize-control-header button img {
 749         display: block;
 750 }
 751
 752 .customize-control-media .remove-button,
 753 .customize-control-media .default-button,
 754 .customize-control-media .upload-button,
 755 .customize-control-upload .remove-button,
 756 .customize-control-upload .default-button,
 757 .customize-control-upload .upload-button,
 758 .customize-control-image .remove-button,
 759 .customize-control-image .default-button,
 760 .customize-control-image .upload-button,
 761 .customize-control-background .remove-button,
 762 .customize-control-background .default-button,
 763 .customize-control-background .upload-button,
 764 .customize-control-cropped_image .remove-button,
 765 .customize-control-cropped_image .default-button,
 766 .customize-control-cropped_image .upload-button,
 767 .customize-control-site_icon .remove-button,
 768 .customize-control-site_icon .default-button,
 769 .customize-control-site_icon .upload-button,
 770 .customize-control-header button.new,
 771 .customize-control-header button.remove {
 772         white-space: normal;
 773         width: 48%;
 774         height: auto;
 775 }
 776
 777 .customize-control-media .current .container,
 778 .customize-control-upload .current .container,
 779 .customize-control-image .current .container,
 780 .customize-control-background .current .container,
 781 .customize-control-cropped_image .current .container,
 782 .customize-control-site_icon .current .container,
 783 .customize-control-header .current .container {
 784         overflow: hidden;
 785         -webkit-border-radius: 2px;
 786         border: 1px solid #eee;
 787         -webkit-border-radius: 2px;
 788         border-radius: 2px;
 789 }
 790
 791 .customize-control-media .current .container,
 792 .customize-control-upload .current .container,
 793 .customize-control-background .current .container,
 794 .customize-control-cropped_image .current .container,
 795 .customize-control-site_icon .current .container,
 796 .customize-control-image .current .container {
 797         min-height: 40px;
 798 }
 799
 800 .customize-control-media .placeholder,
 801 .customize-control-upload .placeholder,
 802 .customize-control-image .placeholder,
 803 .customize-control-background .placeholder,
 804 .customize-control-cropped_image .placeholder,
 805 .customize-control-site_icon .placeholder,
 806 .customize-control-header .placeholder {
 807         width: 100%;
 808         position: relative;
 809         text-align: center;
 810         cursor: default;
 811         border: 1px dashed #b4b9be;
 812         -webkit-box-sizing: border-box;
 813         -moz-box-sizing: border-box;
 814         box-sizing: border-box;
 815         min-height: 40px;
 816 }
 817
 818 .customize-control-media .inner,
 819 .customize-control-upload .inner,
 820 .customize-control-image .inner,
 821 .customize-control-background .inner,
 822 .customize-control-cropped_image .inner,
 823 .customize-control-site_icon .inner,
 824 .customize-control-header .inner {
 825         display: none;
 826         position: absolute;
 827         width: 100%;
 828         color: #555;
 829         white-space: nowrap;
 830         text-overflow: ellipsis;
 831         overflow: hidden;
 832 }
 833
 834 .customize-control-media .inner,
 835 .customize-control-upload .inner,
 836 .customize-control-background .inner,
 837 .customize-control-cropped_image .inner,
 838 .customize-control-site_icon .inner,
 839 .customize-control-image .inner {
 840         display: block;
 841         min-height: 40px;
 842 }
 843
 844 .customize-control-media .inner,
 845 .customize-control-upload .inner,
 846 .customize-control-image .inner,
 847 .customize-control-background .inner,
 848 .customize-control-cropped_image .inner,
 849 .customize-control-site_icon .inner,
 850 .customize-control-header .inner,
 851 .customize-control-header .inner .dashicons {
 852         line-height: 20px;
 853         top: 8px;
 854 }
 855
 856 .customize-control-header .list .inner,
 857 .customize-control-header .list .inner .dashicons {
 858         top: 9px;
 859 }
 860
 861 .customize-control-header .header-view {
 862         position: relative;
 863         width: 100%;
 864         margin-bottom: 5px;
 865 }
 866
 867 .customize-control-header .header-view:last-child {
 868         margin-bottom: 0px;
 869 }
 870
 871 /* Convoluted, but 'outline' support isn't good enough yet */
 872 .customize-control-header .header-view:after {
 873         border: 0;
 874 }
 875 .customize-control-header .header-view.selected:after {
 876         content: '';
 877         position: absolute;
 878         height: auto;
 879         top: 0; right: 0; bottom: 0; left: 0;
 880         border: 4px solid #00a0d2;
 881         -webkit-border-radius: 2px;
 882         border-radius: 2px;
 883 }
 884 .customize-control-header .header-view.button.selected {
 885         border: 0;
 886 }
 887
 888 /* Header control: overlay "close" button */
 889
 890 .customize-control-header .uploaded .header-view .close {
 891         font-size: 20px;
 892         color: #fff;
 893         background: #555;
 894         background: rgba(0, 0, 0, 0.5);
 895         position: absolute;
 896         top: 10px;
 897         left: -999px;
 898         z-index: 1;
 899         width: 26px;
 900         height: 26px;
 901         cursor: pointer;
 902 }
 903
 904 .customize-control-header .header-view:hover .close,
 905 .customize-control-header .header-view .close:focus {
 906         left: 10px;
 907 }
 908
 909 /* Header control: randomiz(s)er */
 910
 911 .customize-control-header .random.placeholder {
 912         cursor: pointer;
 913         -webkit-border-radius: 2px;
 914         border-radius: 2px;
 915         height: 40px;
 916 }
 917
 918 .customize-control-header button.random {
 919         width: 100%;
 920         height: auto;
 921         min-height: 40px;
 922         white-space: normal;
 923 }
 924
 925 .customize-control-header button.random .dice {
 926         margin-top: 4px;
 927 }
 928
 929 .customize-control-header .placeholder:hover .dice,
 930 .customize-control-header .header-view:hover > button.random .dice {
 931         -webkit-animation: dice-color-change 3s infinite;
 932         animation: dice-color-change 3s infinite;
 933 }
 934
 935 @-webkit-keyframes dice-color-change {
 936         0% { color: #d4b146; }
 937         50% { color: #ef54b0; }
 938         75% { color: #7190d3; }
 939         100% { color: #d4b146; }
 940 }
 941
 942 @keyframes dice-color-change {
 943         0% { color: #d4b146; }
 944         50% { color: #ef54b0; }
 945         75% { color: #7190d3; }
 946         100% { color: #d4b146; }
 947 }
 948
 949 .customize-control-header .choice {
 950         position: relative;
 951         display: block;
 952         margin-bottom: 9px;
 953 }
 954
 955 .customize-control-header .uploaded div:last-child > .choice {
 956         margin-bottom: 0;
 957 }
 958
 959 .customize-control-media img,
 960 .customize-control-upload img,
 961 .customize-control-image img,
 962 .customize-control-background img,
 963 .customize-control-cropped_image img,
 964 .customize-control-header img {
 965         width: 100%;
 966         -webkit-border-radius: 2px;
 967         border-radius: 2px;
 968 }
 969
 970 .customize-control-media .remove-button,
 971 .customize-control-media .default-button,
 972 .customize-control-upload .remove-button,
 973 .customize-control-upload .default-button,
 974 .customize-control-image .remove-button,
 975 .customize-control-image .default-button,
 976 .customize-control-background .remove-button,
 977 .customize-control-background .default-button,
 978 .customize-control-cropped_image .remove-button,
 979 .customize-control-cropped_image .default-button,
 980 .customize-control-site_icon .remove-button,
 981 .customize-control-site_icon .default-button,
 982 .customize-control-header .remove {
 983         float: right;
 984         margin-left: 3px;
 985 }
 986
 987 .customize-control-media .upload-button,
 988 .customize-control-upload .upload-button,
 989 .customize-control-image .upload-button,
 990 .customize-control-background .upload-button,
 991 .customize-control-cropped_image .upload-button,
 992 .customize-control-site_icon .upload-button,
 993 .customize-control-header .new {
 994         float: left;
 995 }
 996
 997 /**
 998  * Themes
 999  */
1000
1001 @-webkit-keyframes customize-reload {
1002         0%   { opacity: 0; }
1003         100% { opacity: 1; }
1004 }
1005
1006 @keyframes customize-reload {
1007         0%   { opacity: 0; }
1008         100% { opacity: 1; }
1009 }
1010
1011 /* #customize-container is reused from customize-loader.js, hence the naming. */
1012 .wp-customizer .customize-loading #customize-container {
1013         display: block;
1014         -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
1015         animation: customize-reload .75s;
1016 }
1017
1018 .control-section-themes .accordion-section-title {
1019         cursor: default;
1020 }
1021
1022 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
1023 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
1024         color: #555;
1025         background-color: #fff;
1026 }
1027
1028 .control-section-themes .accordion-section-title {
1029         margin: 15px 0;
1030 }
1031
1032 .customize-themes-panel .accordion-section-title {
1033         margin: 15px -8px;
1034 }
1035
1036 .control-section-themes .accordion-section-title {
1037         padding-left: 100px; /* Space for the button */
1038 }
1039
1040 .control-section-themes .accordion-section-title span.customize-action,
1041 #customize-controls .customize-section-title span.customize-action {
1042         font-size: 13px;
1043         display: block;
1044         font-weight: 400;
1045 }
1046
1047 .control-section-themes .accordion-section-title .change-theme,
1048 .control-section-themes .accordion-section-title .customize-theme {
1049         position: absolute;
1050         left: 10px;
1051         top: 50%;
1052         margin-top: -14px;
1053         font-weight: normal;
1054 }
1055
1056 .control-section-themes .accordion-section-title:before {
1057         display: none;
1058 }
1059
1060 .customize-themes-panel {
1061         display: none;
1062         padding: 0 8px;
1063         background: #f1f1f1;
1064         -webkit-box-sizing: border-box;
1065         -moz-box-sizing: border-box;
1066         box-sizing: border-box;
1067 }
1068
1069 .customize-themes-panel .accordion-section-title:first-child {
1070         margin-top: 0;
1071 }
1072
1073 #customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
1074         font-size: 14px;
1075         font-weight: 600;
1076 }
1077
1078 .customize-themes-panel > h2 {
1079         padding: 15px 8px 0 8px;
1080 }
1081
1082 .control-section.open .customize-themes-panel {
1083         display: block;
1084 }
1085
1086 #customize-theme-controls .customize-themes-panel .accordion-section-content {
1087         background: transparent;
1088         display: block;
1089 }
1090
1091 .customize-control.customize-control-theme {
1092         margin-bottom: 8px;
1093 }
1094
1095 #customize-theme-controls .themes.accordion-section-content {
1096         position: relative;
1097         right: 0;
1098         padding: 0;
1099         width: 100%;
1100 }
1101
1102 .wp-customizer .theme-browser .themes {
1103         padding-bottom: 8px;
1104 }
1105
1106 .wp-customizer .theme-browser .theme {
1107         margin: 0;
1108         width: 100%;
1109 }
1110
1111 .wp-customizer .theme-browser .theme .theme-actions {
1112         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
1113         opacity: 1;
1114 }
1115
1116 #customize-controls h3.theme-name {
1117         font-size: 15px;
1118 }
1119
1120 #customize-controls .theme-overlay .theme-name {
1121         font-size: 32px;
1122 }
1123
1124 .wp-customizer #themes-filter {
1125         font-size: 16px;
1126         font-weight: 300;
1127         line-height: 1.5;
1128         width: 100%;
1129 }
1130
1131 #accordion-section-themes .accordion-section-title:after {
1132         display: none;
1133 }
1134
1135 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
1136         right: 0;
1137 }
1138
1139 .customize-themes-panel.control-panel-content {
1140         position: absolute;
1141         right: -100%;
1142         top: 0;
1143         width: 100%;
1144         border-top: 1px solid #ddd;
1145 }
1146
1147 .in-themes-panel #customize-info,
1148 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
1149         right: 100%;
1150 }
1151
1152 /* Details View */
1153 .wp-customizer .theme-overlay {
1154         display: none;
1155 }
1156
1157 .wp-customizer.modal-open .theme-overlay {
1158         position: fixed;
1159         right: 0;
1160         top: 0;
1161         left: 0;
1162         bottom: 0;
1163         z-index: 109;
1164 }
1165
1166 .wp-customizer .theme-overlay .theme-backdrop {
1167         background: rgba( 238, 238, 238, 0.75 );
1168         position: fixed;
1169         z-index: 110;
1170 }
1171
1172 .wp-customizer .theme-overlay .theme-wrap {
1173         right: 90px;
1174         left: 90px;
1175         top: 45px;
1176         bottom: 45px;
1177         z-index: 120;
1178         max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
1179 }
1180
1181 .wp-customizer .theme-overlay .theme-actions {
1182         text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
1183 }
1184
1185 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
1186         overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
1187 }
1188
1189 .ie8 .wp-customizer .theme-overlay .theme-header,
1190 .ie8 .wp-customizer .theme-overlay .theme-about,
1191 .ie8 .wp-customizer .theme-overlay .theme-actions {
1192         position: static;
1193 }
1194
1195 /* Small Screens */
1196 @media (max-width:850px), (max-height:472px) {
1197         .wp-customizer .theme-overlay .theme-wrap {
1198                 right: 0;
1199                 left: 0;
1200                 top: 0;
1201                 bottom: 0;
1202         }
1203 }
1204
1205 /* Handle cheaters. */
1206 body.cheatin {
1207         font-size: medium;
1208         height: auto;
1209         background: #fff;
1210         margin: 50px auto 2em;
1211         padding: 1em 2em;
1212         max-width: 700px;
1213         min-width: 0;
1214         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1215         box-shadow: 0 1px 3px rgba(0,0,0,0.13);
1216 }
1217
1218 body.cheatin h1 {
1219         border-bottom: 1px solid #ddd;
1220         clear: both;
1221         color: #666;
1222         font: 24px "Open Sans", sans-serif;
1223         margin: 30px 0 0 0;
1224         padding: 0;
1225         padding-bottom: 7px;
1226 }
1227
1228 body.cheatin p {
1229         font-size: 14px;
1230         line-height: 1.5;
1231         margin: 25px 0 20px;
1232 }
1233
1234 /**
1235  * Widgets and Menus common styles
1236  */
1237
1238 /* higher specificity than .wp-core-ui .button-secondary */
1239 #customize-theme-controls .add-new-widget,
1240 #customize-theme-controls .add-new-menu-item {
1241         cursor: pointer;
1242         float: left;
1243         margin-right: 10px;
1244         -webkit-transition: all 0.2s;
1245         transition: all 0.2s;
1246         -webkit-user-select: none;
1247         -moz-user-select: none;
1248         -ms-user-select: none;
1249         user-select: none;
1250         outline: none;
1251 }
1252
1253 .reordering .add-new-widget,
1254 .reordering .add-new-menu-item {
1255         opacity: 0.2;
1256         pointer-events: none;
1257         cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
1258 }
1259
1260 .add-new-widget:before,
1261 .add-new-menu-item:before {
1262         content: "\f132";
1263         display: inline-block;
1264         position: relative;
1265         right: -2px;
1266         top: -1px;
1267         font: normal 20px/1 dashicons;
1268         vertical-align: middle;
1269         -webkit-transition: all 0.2s;
1270         transition: all 0.2s;
1271         -webkit-font-smoothing: antialiased;
1272         -moz-osx-font-smoothing: grayscale;
1273 }
1274
1275 /* Reordering */
1276 .reorder-toggle {
1277         color: #0073aa;
1278         float: left;
1279         padding: 5px 8px;
1280         text-decoration: none;
1281         cursor: pointer;
1282         outline: none;
1283         -webkit-user-select: none;
1284         -moz-user-select: none;
1285         -ms-user-select: none;
1286         user-select: none;
1287 }
1288
1289 .reorder-toggle:hover {
1290         color: #00a0d2;
1291 }
1292
1293 .reorder-toggle:focus {
1294         outline: 1px dotted;
1295 }
1296
1297 .reorder,
1298 .reordering .reorder-done {
1299         display: block;
1300         padding: 5px 8px;
1301 }
1302
1303 .reorder-done,
1304 .reordering .reorder {
1305         display: none;
1306         color: #0073aa;
1307 }
1308
1309 .reorder-toggle:hover .reorder-done,
1310 .reorder-toggle:active .reorder-done,
1311 .reorder-toggle:focus .reorder-done {
1312         color: #00a0d2;
1313 }
1314
1315 .widget-reorder-nav span,
1316 .menu-item-reorder-nav button {
1317         position: relative;
1318         overflow: hidden;
1319         float: right;
1320         display: block;
1321         width: 33px; /* was 42px for mobile */
1322         height: 43px;
1323         color: #82878c;
1324         text-indent: -9999px;
1325         cursor: pointer;
1326         outline: none;
1327 }
1328
1329 .menu-item-reorder-nav button {
1330         width: 30px;
1331         height: 40px;
1332         background: transparent;
1333         border: none;
1334         -webkit-box-shadow: none;
1335         box-shadow: none;
1336 }
1337
1338 .widget-reorder-nav span:before,
1339 .menu-item-reorder-nav button:before {
1340         display: inline-block;
1341         position: absolute;
1342         top: 0;
1343         left: 0;
1344         width: 100%;
1345         height: 100%;
1346         font: normal 20px/43px dashicons;
1347         text-align: center;
1348         text-indent: 0;
1349         -webkit-font-smoothing: antialiased;
1350         -moz-osx-font-smoothing: grayscale;
1351 }
1352
1353 .widget-reorder-nav span:hover,
1354 .widget-reorder-nav span:focus,
1355 .menu-item-reorder-nav button:hover,
1356 .menu-item-reorder-nav button:focus {
1357         color: #191e23;
1358         background: #eee;
1359 }
1360
1361 .move-widget-down:before,
1362 .menus-move-down:before {
1363         content: "\f347";
1364 }
1365
1366 .move-widget-up:before,
1367 .menus-move-up:before {
1368         content: "\f343";
1369 }
1370
1371 #customize-theme-controls .first-widget .move-widget-up,
1372 #customize-theme-controls .last-widget .move-widget-down,
1373 .move-up-disabled .menus-move-up,
1374 .move-down-disabled .menus-move-down,
1375 .move-right-disabled .menus-move-right,
1376 .move-left-disabled .menus-move-left {
1377         color: #d5d5d5;
1378         background-color: #fff;
1379         cursor: default;
1380         pointer-events: none;
1381 }
1382
1383 /**
1384  * New widget and Add-menu-items modes and panels
1385  */
1386
1387 .wp-full-overlay-main {
1388         left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
1389         width: 100%;
1390 }
1391
1392 body.adding-widget .add-new-widget,
1393 body.adding-widget .add-new-widget:hover,
1394 .adding-menu-items .add-new-menu-item,
1395 .adding-menu-items .add-new-menu-item:hover,
1396 .add-menu-toggle.open,
1397 .add-menu-toggle.open:hover {
1398         background: #eee;
1399         border-color: #929793;
1400         color: #32373c;
1401         -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1402         box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1403 }
1404
1405 body.adding-widget .add-new-widget:before,
1406 .adding-menu-items .add-new-menu-item:before,
1407 #accordion-section-add_menu .add-new-menu-item.open:before {
1408         -webkit-transform: rotate(-45deg);
1409         -ms-transform: rotate(-45deg);
1410         transform: rotate(-45deg);
1411 }
1412
1413 #available-widgets,
1414 #available-menu-items {
1415         position: absolute;
1416         top: 0;
1417         bottom: 0;
1418         right: -301px;
1419         visibility: hidden;
1420         overflow-x: hidden;
1421         overflow-y: auto;
1422         width: 300px;
1423         margin: 0;
1424         z-index: 4;
1425         background: #eee;
1426         -webkit-transition: right .18s;
1427         transition: right .18s;
1428         border-left: 1px solid #ddd;
1429 }
1430
1431 #available-widgets .customize-section-title,
1432 #available-menu-items .customize-section-title {
1433         display: none;
1434 }
1435
1436 #available-widgets-list {
1437         top: 60px;
1438         position: absolute;
1439         overflow: auto;
1440         bottom: 0;
1441         width: 100%;
1442 }
1443
1444 #available-widgets-filter {
1445         position: fixed;
1446         top: 0;
1447         z-index: 1;
1448         width: 300px;
1449         background: #eee;
1450         border-bottom: 1px solid #e5e5e5;
1451 }
1452
1453 /* search field container */
1454 #available-widgets-filter,
1455 #available-menu-items-search .accordion-section-title {
1456         padding: 12px 15px;
1457         -webkit-box-sizing: border-box;
1458         -moz-box-sizing: border-box;
1459         box-sizing: border-box;
1460 }
1461
1462 #available-widgets-filter input,
1463 #available-menu-items-search input {
1464         padding: 6px 10px;
1465         width: 100%;
1466 }
1467
1468 #available-widgets .widget-top,
1469 #available-widgets .widget-top:hover,
1470 #available-menu-items .item-top,
1471 #available-menu-items .item-top:hover {
1472         border: none;
1473         background: transparent;
1474         -webkit-box-shadow: none;
1475         box-shadow: none;
1476 }
1477
1478 #available-widgets .widget-tpl,
1479 #available-menu-items .item-tpl {
1480         position: relative;
1481         padding: 20px 60px 20px 15px;
1482         background: #fff;
1483         border-bottom: 1px solid #e5e5e5;
1484         cursor: pointer;
1485         display: none;
1486 }
1487
1488 #available-widgets .widget,
1489 #available-menu-items .item {
1490         position: static;
1491 }
1492
1493
1494 /* Responsive */
1495 .customize-controls-preview-toggle {
1496         display: none;
1497 }
1498
1499 @media only screen and (max-width: 782px) {
1500         .wp-customizer .theme:not(.active):hover .theme-actions,
1501         .wp-customizer .theme:not(.active):focus .theme-actions {
1502                 display: block;
1503         }
1504
1505         .wp-customizer .theme-browser .theme.active .theme-name span {
1506                 display: inline;
1507         }
1508
1509         .customize-control-radio label,
1510         .customize-control-checkbox label,
1511         .customize-control-nav_menu_auto_add label {
1512                 margin-right: 32px;
1513         }
1514
1515         .customize-control-radio input,
1516         .customize-control-checkbox input,
1517         .customize-control-nav_menu_auto_add input {
1518                 margin-right: -32px;
1519         }
1520
1521         .customize-control input[type="radio"] + label,
1522         .customize-control input[type="checkbox"] + label {
1523                 line-height: 32px;
1524         }
1525 }
1526
1527 @media screen and ( max-width: 640px ) {
1528         #customize-controls {
1529                 width: 100%;
1530         }
1531
1532         .wp-full-overlay.expanded {
1533                 margin-right: 0;
1534         }
1535
1536         /* when the sidebar is collapsed and switching to responsive view,
1537            bring it back see ticket #35220 */
1538         .wp-full-overlay.collapsed #customize-controls {
1539                 margin-right: 0;
1540         }
1541
1542         .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1543                 bottom: 0;
1544         }
1545
1546         .customize-controls-preview-toggle {
1547                 display: block;
1548                 position: absolute;
1549                 top: 0;
1550                 right: 48px;
1551                 line-height: 45px;
1552                 font-size: 14px;
1553                 padding: 0 12px 0 12px;
1554                 margin: 0;
1555                 height: 45px;
1556                 background: #eee;
1557                 border-left: 1px solid #ddd;
1558                 color: #444;
1559                 cursor: pointer;
1560                 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1561                 transition: color .1s ease-in-out, background .1s ease-in-out;
1562         }
1563
1564         #customize-footer-actions,
1565         #customize-preview,
1566         .customize-controls-preview-toggle .controls,
1567         .preview-only .wp-full-overlay-sidebar-content,
1568         .preview-only .customize-controls-preview-toggle .preview {
1569                 display: none;
1570         }
1571
1572         .customize-controls-preview-toggle .preview:before,
1573         .customize-controls-preview-toggle .controls:before {
1574                 font: normal 20px/1 dashicons;
1575                 content: "\f177";
1576                 position: relative;
1577                 top: 4px;
1578                 margin-left: 6px;
1579         }
1580
1581         .customize-controls-preview-toggle .controls:before {
1582                 content: "\f540";
1583         }
1584
1585         .preview-only #customize-controls {
1586                 height: 45px;
1587         }
1588
1589         .preview-only #customize-preview,
1590         .preview-only .customize-controls-preview-toggle .controls {
1591                 display: block;
1592         }
1593
1594         #customize-preview {
1595                 top: 45px;
1596                 bottom: 0;
1597                 height: auto;
1598         }
1599
1600         .wp-core-ui.wp-customizer .button {
1601                 padding: 6px 14px;
1602                 line-height: normal;
1603                 font-size: 14px;
1604                 vertical-align: middle;
1605                 height: auto;
1606                 margin-bottom: 4px;
1607         }
1608
1609         #customize-header-actions .button-primary {
1610                 margin-top: 6px;
1611         }
1612
1613         body.adding-widget div#available-widgets,
1614         body.adding-menu-items div#available-menu-items {
1615                 top: 46px;
1616                 right: 0;
1617                 z-index: 10;
1618                 width: 100%;
1619         }
1620
1621         #available-widgets .customize-section-title,
1622         #available-menu-items .customize-section-title {
1623                 display: block;
1624                 margin: 0;
1625         }
1626
1627         #available-widgets .customize-section-back,
1628         #available-menu-items .customize-section-back {
1629                 height: 69px;
1630         }
1631
1632         #available-widgets .customize-section-title h3,
1633         #available-menu-items .customize-section-title h3 {
1634                 font-size: 20px;
1635                 font-weight: 200;
1636                 padding: 9px 14px 12px 10px;
1637                 margin: 0;
1638                 line-height: 24px;
1639                 color: #555;
1640                 display: block;
1641                 overflow: hidden;
1642                 white-space: nowrap;
1643                 text-overflow: ellipsis;
1644         }
1645
1646         #available-widgets .customize-section-title .customize-action,
1647         #available-menu-items .customize-section-title .customize-action {
1648                 font-size: 13px;
1649                 display: block;
1650                 font-weight: 400;
1651                 overflow: hidden;
1652                 white-space: nowrap;
1653                 text-overflow: ellipsis;
1654         }
1655
1656         #available-widgets-filter {
1657                 position: relative;
1658                 width: 100%;
1659                 background: #fff;
1660                 height: auto;
1661                 padding: 10px 15px;
1662         }
1663
1664         #available-widgets-list {
1665                 top: 140px;
1666         }
1667 }