wp-admin/css/customize-controls.css

   1 body {
   2         overflow: hidden;
   3 }
   4
   5 #customize-controls a {
   6         text-decoration: none;
   7 }
   8
   9 #customize-controls h3 {
  10         font-size: 14px;
  11 }
  12
  13 #customize-controls img {
  14         max-width: 100%;
  15 }
  16
  17 #customize-controls .submit {
  18         text-align: center;
  19 }
  20
  21 #customize-controls .description {
  22         color: #666666;
  23 }
  24
  25 #customize-header-actions .button-primary {
  26         float: right;
  27         margin-top: 9px;
  28 }
  29
  30 #customize-header-actions .spinner {
  31         margin-top: 16px;
  32         margin-right: 4px;
  33 }
  34
  35 .saving #customize-header-actions .spinner {
  36         display: block;
  37 }
  38
  39 #customize-header-actions {
  40         border-bottom: 1px solid #ddd;
  41 }
  42
  43 #customize-controls .wp-full-overlay-sidebar-content {
  44         overflow-y: auto;
  45         overflow-x: hidden;
  46 }
  47
  48 #customize-info {
  49         border: none;
  50         border-top: 1px solid #ddd;
  51 }
  52
  53 #customize-info .accordion-section-title {
  54         background-color: #fff;
  55         color: #666666;
  56         border-left: none;
  57         border-right: none;
  58         border-bottom: 1px solid #eeeeee;
  59 }
  60
  61 #customize-info.open .accordion-section-title:after,
  62 #customize-info .accordion-section-title:hover:after,
  63 #customize-info .accordion-section-title:focus:after {
  64         color: #555555;
  65 }
  66
  67 #customize-info .preview-notice {
  68         font-size: 13px;
  69         line-height: 24px;
  70 }
  71
  72 #customize-info .theme-name {
  73         font-size: 20px;
  74         font-weight: 200;
  75         line-height: 24px;
  76         display: block;
  77 }
  78
  79 #customize-info .theme-screenshot {
  80         width: 258px;
  81 }
  82
  83 #customize-info .theme-description {
  84         margin-top: 1em;
  85         color: #666666;
  86         line-height: 20px;
  87 }
  88
  89 #customize-theme-controls .control-section {
  90         border: none;
  91 }
  92
  93 #customize-theme-controls .accordion-section-title {
  94         color: #555555;
  95         background-color: #fff;
  96         border-bottom: 1px solid #eeeeee;
  97 }
  98
  99 #customize-theme-controls .accordion-section-content {
 100         color: #555555;
 101         background: #fff;
 102 }
 103
 104 #customize-info.open .accordion-section-title,
 105 #customize-info .accordion-section-title:hover,
 106 #customize-info .accordion-section-title:focus,
 107 #customize-theme-controls .control-section:hover > .accordion-section-title,
 108 #customize-theme-controls .control-section .accordion-section-title:hover,
 109 #customize-theme-controls .control-section.open .accordion-section-title,
 110 #customize-theme-controls .control-section .accordion-section-title:focus {
 111         color: #222;
 112         background: #f5f5f5;
 113 }
 114
 115 .js .control-section:hover .accordion-section-title,
 116 .js .control-section .accordion-section-title:hover,
 117 .js .control-section.open .accordion-section-title,
 118 .js .control-section .accordion-section-title:focus {
 119         background: #f5f5f5;
 120 }
 121
 122 #customize-theme-controls .control-section:hover > .accordion-section-title:after,
 123 #customize-theme-controls .control-section .accordion-section-title:hover:after,
 124 #customize-theme-controls .control-section.open .accordion-section-title:after,
 125 #customize-theme-controls .control-section .accordion-section-title:focus:after {
 126         color: #555;
 127 }
 128
 129 #customize-info.open,
 130 #customize-theme-controls .control-section.open {
 131         border-bottom: 1px solid #eeeeee;
 132 }
 133
 134 #customize-theme-controls .control-section.open .accordion-section-title {
 135         border-bottom-color: #eeeeee !important;
 136 }
 137
 138 #customize-theme-controls .control-section:last-of-type.open,
 139 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 140         border-bottom-color: #ddd;
 141 }
 142
 143 #customize-theme-controls > ul,
 144 #customize-theme-controls .accordion-section-content {
 145         margin: 0;
 146 }
 147
 148 .control-section.control-panel > .accordion-section-title {
 149         padding-right: 54px;
 150 }
 151
 152 .control-section.control-panel > .accordion-section-title:after {
 153         content: "\f345";
 154         background: #f5f5f5;
 155         color: #555;
 156         width: 38px;
 157         height: 100%;
 158         margin: -11px -10px -11px 0; /* compensate for positioning */
 159         line-height: 45px;
 160         padding-left: 5px;
 161         border-left: 1px solid #eee;
 162         z-index: 0;
 163 }
 164
 165 .rtl .control-section.control-panel > .accordion-section-title:after {
 166         content: "\f341";
 167 }
 168
 169 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
 170 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
 171         background: #ddd;
 172         color: #000;
 173         border: 1px solid #d9d9d9;
 174         border-right: none;
 175         margin-top: -12px;
 176         line-height: 44px;
 177         z-index: 1;
 178 }
 179
 180 .accordion-sub-container.control-panel-content {
 181         display: none;
 182         position: absolute;
 183         left: 300px;
 184         top: 0;
 185         width: 300px;
 186         border-top: 1px solid #ddd;
 187         -webkit-transition: left ease-in-out .18s;
 188         transition: left ease-in-out .18s;
 189 }
 190
 191 .accordion-sub-container.control-panel-content.animating {
 192         display: block;
 193 }
 194
 195 .current-panel .accordion-sub-container.control-panel-content {
 196         width: 100%;
 197 }
 198
 199 .customize-controls-close {
 200         display: block;
 201         position: absolute;
 202         top: 0;
 203         left: 0;
 204         width: 45px;
 205         height: 45px;
 206         padding-right: 2px;
 207         background: #eee;
 208         border-right: 1px solid #ddd;
 209         color: #444;
 210         cursor: pointer;
 211         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 212         transition: color .1s ease-in-out, background .1s ease-in-out;
 213 }
 214
 215 .control-panel-back {
 216         display: block;
 217         position: fixed;
 218         top: 0;
 219         z-index: 99;
 220         left: -48px;
 221         width: 45px;
 222         height: 45px;
 223         padding-right: 2px;
 224         background: #eee;
 225         border-right: 1px solid #ddd;
 226         cursor: pointer;
 227         -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 228         transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 229 }
 230
 231 .collapsed .control-panel-back {
 232         display: none;
 233 }
 234
 235 .customize-controls-close:focus,
 236 .customize-controls-close:hover,
 237 .control-panel-back:focus,
 238 .control-panel-back:hover {
 239         background: #ddd;
 240         border-color: #ccc;
 241         color: #000;
 242         outline: none;
 243         -webkit-box-shadow: none;
 244         box-shadow: none;
 245 }
 246
 247 .customize-controls-close:before {
 248         font: normal 22px/1 dashicons;
 249         content: "\f335";
 250         position: relative;
 251         top: 7px;
 252         left: 13px;
 253 }
 254
 255 .control-panel-back:before {
 256         font: normal 20px/1 dashicons;
 257         content: "\f341";
 258         position: relative;
 259         top: 7px;
 260         left: 13px;
 261 }
 262
 263 .rtl .control-panel-back:before {
 264         content: "\f345";
 265 }
 266
 267 .in-sub-panel .control-panel-back {
 268         left: 0;
 269 }
 270
 271 .current-panel > .accordion-section-title {
 272         height: 22px;
 273 }
 274
 275 .wp-full-overlay-sidebar .wp-full-overlay-header {
 276         -webkit-transition: padding ease-in-out .18s;
 277         transition: padding ease-in-out .18s;
 278 }
 279
 280 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 281         padding-left: 62px;
 282 }
 283
 284 #customize-info,
 285 #customize-theme-controls > ul > .accordion-section {
 286         position: relative;
 287         left: 0;
 288         -webkit-transition: left ease-in-out .18s;
 289         transition: left ease-in-out .18s;
 290 }
 291
 292 .in-sub-panel #customize-info,
 293 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
 294         left: -300px;
 295         width: 300px;
 296 }
 297
 298 .in-sub-panel #customize-theme-controls .accordion-section.current-panel {
 299         width: 100%;
 300 }
 301
 302 #customize-theme-controls .control-section.current-panel {
 303         padding: 0;
 304 }
 305
 306 #customize-theme-controls .control-section > h3.accordion-section-title {
 307         position: relative;
 308         left: 0;
 309 }
 310
 311 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
 312         left: -300px;
 313         -webkit-transition: left ease-in-out .18s;
 314         transition: left ease-in-out .18s;
 315 }
 316
 317 .control-section.control-panel .accordion-section-title .panel-title {
 318         font-size: 20px;
 319         font-weight: 200;
 320         line-height: 24px;
 321         display: block;
 322         border: none;
 323 }
 324
 325 .control-section.control-panel .preview-notice {
 326         font-size: 13px;
 327         line-height: 24px;
 328 }
 329
 330 p.customize-section-description {
 331         font-style: normal;
 332 }
 333
 334 .customize-control {
 335         width: 100%;
 336         float: left;
 337         clear: both;
 338         margin-bottom: 8px;
 339 }
 340
 341 .customize-control select,
 342 .customize-control input[type="radio"],
 343 .customize-control input[type="checkbox"] {
 344         line-height: 28px;
 345 }
 346
 347 .customize-control input[type="text"],
 348 .customize-control input[type="password"],
 349 .customize-control input[type="email"],
 350 .customize-control input[type="number"],
 351 .customize-control input[type="search"],
 352 .customize-control input[type="tel"],
 353 .customize-control input[type="url"] {
 354         width: 98%;
 355         line-height: 18px;
 356         margin: 0;
 357 }
 358
 359 .customize-control-textarea textarea {
 360         width: 100%;
 361         resize: vertical;
 362 }
 363
 364 .customize-control select {
 365         min-width: 50%;
 366         max-width: 100%;
 367         height: 28px;
 368         line-height: 28px;
 369 }
 370
 371 .customize-control select[multiple] {
 372         height: auto;
 373 }
 374
 375 .customize-control-title {
 376         display: block;
 377         font-size: 14px;
 378         line-height: 24px;
 379         font-weight: 600;
 380         margin-bottom: 5px;
 381 }
 382
 383 .customize-control-description {
 384         display: block;
 385         font-style: italic;
 386         line-height: 18px;
 387         margin-bottom: 5px;
 388 }
 389
 390 .customize-control-color .color-picker,
 391 .customize-control-checkbox label,
 392 .customize-control-upload div {
 393         line-height: 28px;
 394 }
 395
 396 .customize-control-checkbox input {
 397         margin-right: 5px;
 398 }
 399
 400 .customize-control-radio {
 401         padding: 5px 0 10px;
 402 }
 403
 404 .customize-control-radio .customize-control-title {
 405         margin-bottom: 0;
 406         line-height: 22px;
 407 }
 408
 409 .customize-control-radio .customize-control-title + .customize-control-description {
 410         margin-top: 7px;
 411 }
 412
 413 .customize-control-radio label {
 414         line-height: 32px;
 415 }
 416
 417 .customize-control-radio input {
 418         margin-right: 5px;
 419 }
 420
 421 .customize-control .attachment-thumb.type-icon {
 422         float: left;
 423         margin: 10px;
 424         width: auto;
 425 }
 426
 427 .customize-control .attachment-title {
 428         font-weight: bold;
 429         margin: 0;
 430         padding: 5px 10px;
 431 }
 432
 433 .customize-control .attachment-meta {
 434         white-space: nowrap;
 435         overflow: hidden;
 436         text-overflow: ellipsis;
 437         margin: 0;
 438         padding: 5px 10px 0;
 439 }
 440
 441 .customize-control .attachment-meta-title {
 442         padding-top: 7px;
 443 }
 444
 445 .customize-control .thumbnail-image {
 446         line-height: 0;
 447 }
 448
 449 .customize-control .thumbnail-image img {
 450         cursor: pointer;
 451 }
 452
 453 #customize-preview iframe {
 454         width: 100%;
 455         height: 100%;
 456 }
 457
 458 .wp-full-overlay-sidebar {
 459         background: #eeeeee;
 460         border-right: 1px solid #ddd;
 461 }
 462
 463 .collapse-sidebar {
 464         background-color: transparent !important;
 465         border: none !important;
 466         -webkit-box-shadow: none !important;
 467         box-shadow: none !important;
 468         -webkit-border-radius: 0 !important;
 469         border-radius: 0 !important;
 470 }
 471
 472
 473 .collapse-sidebar:active,
 474 .collapse-sidebar:active .collapse-sidebar-label,
 475 .collapse-sidebar:active .collapse-sidebar-arrow:before {
 476         text-shadow: none;
 477 }
 478
 479 .collapsed .collapse-sidebar-arrow:before {
 480         color: #888;
 481 }
 482
 483 /* Style for custom settings */
 484
 485 /*
 486  * Dropdowns
 487  */
 488 .accordion-section .dropdown {
 489         float: left;
 490         display: block;
 491         position: relative;
 492         cursor: pointer;
 493 }
 494
 495 .accordion-section .dropdown-content {
 496         overflow: hidden;
 497         float: left;
 498         min-width: 30px;
 499         height: 16px;
 500         line-height: 16px;
 501         margin-right: 16px;
 502         padding: 4px 5px;
 503         border: 2px solid #eeeeee;
 504         -webkit-user-select: none;
 505         -moz-user-select: none;
 506         -ms-user-select: none;
 507         user-select: none;
 508 }
 509
 510 .customize-control .dropdown-arrow {
 511         position: absolute;
 512         top: 0;
 513         bottom: 0;
 514         right: 0;
 515         width: 20px;
 516         background: #eeeeee;
 517 }
 518
 519 .customize-control .dropdown-arrow:after {
 520         content: "\f140";
 521         font: normal 20px/1 'dashicons';
 522         speak: none;
 523         display: block;
 524         padding: 0;
 525         text-indent: 0;
 526         text-align: center;
 527         position: relative;
 528         -webkit-font-smoothing: antialiased;
 529         -moz-osx-font-smoothing: grayscale;
 530         text-decoration: none !important;
 531         color: #333;
 532 }
 533
 534 .customize-control .dropdown-status {
 535         color: #333;
 536         background: #eeeeee;
 537         display: none;
 538         max-width: 112px;
 539 }
 540
 541 /* Color Picker */
 542 .customize-control-color .color-picker-hex {
 543         display: none;
 544 }
 545
 546 .customize-control-color.open .color-picker-hex {
 547         display: block;
 548 }
 549
 550 .customize-control-color .dropdown {
 551         margin-right: 5px;
 552         margin-bottom: 5px;
 553 }
 554
 555 .customize-control-color .dropdown .dropdown-content {
 556         background-color: #555555;
 557         border: 1px solid rgba(0, 0, 0, 0.15);
 558 }
 559
 560 .customize-control-color .dropdown:hover .dropdown-content {
 561         border-color: rgba(0, 0, 0, 0.25);
 562 }
 563
 564 /**
 565  * iOS can't scroll iframes,
 566  * instead it expands the iframe size to match the size of the content
 567  */
 568 .ios .wp-full-overlay {
 569         position: relative;
 570 }
 571
 572 .ios #customize-preview {
 573         position: relative;
 574 }
 575
 576 .ios #customize-controls .wp-full-overlay-sidebar-content {
 577         -webkit-overflow-scrolling: touch;
 578 }
 579
 580 /** Header control **/
 581
 582 .customize-control-upload .current,
 583 .customize-control-image .current,
 584 .customize-control-background .current,
 585 .customize-control-header .current {
 586         margin-bottom: 8px;
 587 }
 588
 589 .customize-control-header .uploaded {
 590         margin-bottom: 18px;
 591 }
 592
 593 .customize-control-header .uploaded button:not(.random),
 594 .customize-control-header .default button:not(.random) {
 595         width: 100%;
 596         padding: 0;
 597         margin: 0;
 598         background: none;
 599         border: none;
 600         color: inherit;
 601         cursor: pointer;
 602 }
 603
 604 .customize-control-header button img {
 605         display: block;
 606 }
 607
 608 .customize-control-upload .remove-button,
 609 .customize-control-upload .default-button,
 610 .customize-control-upload .upload-button,
 611 .customize-control-image .remove-button,
 612 .customize-control-image .default-button,
 613 .customize-control-image .upload-button,
 614 .customize-control-background .remove-button,
 615 .customize-control-background .default-button,
 616 .customize-control-background .upload-button,
 617 .customize-control-header button.new,
 618 .customize-control-header button.remove {
 619         white-space: normal;
 620         width: 48%;
 621         height: auto;
 622 }
 623
 624 .customize-control-upload .current .container,
 625 .customize-control-image .current .container,
 626 .customize-control-background .current .container,
 627 .customize-control-header .current .container {
 628         overflow: hidden;
 629         -webkit-border-radius: 2px;
 630         border: 1px solid #eee;
 631         -webkit-border-radius: 2px;
 632         border-radius: 2px;
 633 }
 634
 635 .customize-control-upload .current .container,
 636 .customize-control-background .current .container,
 637 .customize-control-image .current .container {
 638         min-height: 40px;
 639 }
 640
 641 .customize-control-upload .placeholder,
 642 .customize-control-image .placeholder,
 643 .customize-control-background .placeholder,
 644 .customize-control-header .placeholder {
 645         width: 100%;
 646         position: relative;
 647         text-align: center;
 648         cursor: default;
 649 }
 650
 651 .customize-control-upload .inner,
 652 .customize-control-image .inner,
 653 .customize-control-background .inner,
 654 .customize-control-header .inner {
 655         display: none;
 656         position: absolute;
 657         width: 100%;
 658         color: #555;
 659         white-space: nowrap;
 660         text-overflow: ellipsis;
 661         overflow: hidden;
 662 }
 663
 664 .customize-control-upload .inner,
 665 .customize-control-background .inner,
 666 .customize-control-image .inner {
 667         display: block;
 668         min-height: 40px;
 669 }
 670
 671 .customize-control-upload .inner,
 672 .customize-control-image .inner,
 673 .customize-control-background .inner,
 674 .customize-control-header .inner,
 675 .customize-control-header .inner .dashicons {
 676         line-height: 20px;
 677         top: 10px;
 678 }
 679
 680 .customize-control-header .list .inner,
 681 .customize-control-header .list .inner .dashicons {
 682         top: 9px;
 683 }
 684
 685 .customize-control-header .header-view {
 686         position: relative;
 687         width: 100%;
 688         margin-bottom: 5px;
 689 }
 690
 691 .customize-control-header .header-view:last-child {
 692         margin-bottom: 0px;
 693 }
 694
 695 /* Convoluted, but 'outline' support isn't good enough yet */
 696 .customize-control-header .header-view:after {
 697         border: 0;
 698 }
 699 .customize-control-header .header-view.selected:after {
 700         content: '';
 701         position: absolute;
 702         height: auto;
 703         top: 0; left: 0; bottom: 0; right: 0;
 704         border: 4px solid #2ea2cc;
 705         -webkit-border-radius: 2px;
 706         border-radius: 2px;
 707 }
 708 .customize-control-header .header-view.button.selected {
 709         border: 0;
 710 }
 711
 712 /* Header control: overlay "close" button */
 713
 714 .customize-control-header .uploaded .header-view .close {
 715         font-size: 2em;
 716         color: grey;
 717         position: absolute;
 718         visibility: hidden;
 719         top: 10px;
 720         right: 10px;
 721         z-index: 1;
 722         width: 20px;
 723         height: 20px;
 724         cursor: pointer;
 725 }
 726
 727 .customize-control-header .uploaded .header-view .close:hover {
 728  color: black;
 729  text-shadow:
 730     -1px -1px 0 #fff,
 731     1px -1px 0 #fff,
 732     -1px 1px 0 #fff,
 733     1px 1px 0 #fff;
 734 }
 735
 736 .customize-control-header .header-view:hover .close {
 737         visibility: visible;
 738 }
 739
 740 /* Header control: randomiz(s)er */
 741
 742 .customize-control-header .random.placeholder {
 743         cursor: pointer;
 744         -webkit-border-radius: 2px;
 745         border-radius: 2px;
 746         height: 40px;
 747 }
 748
 749 .customize-control-header button.random {
 750         width: 100%;
 751         height: auto;
 752         min-height: 40px;
 753         white-space: normal;
 754 }
 755
 756 .customize-control-header button.random .dice {
 757         margin-top: 4px;
 758 }
 759
 760 .customize-control-header .placeholder:hover .dice,
 761 .customize-control-header .header-view:hover > button.random .dice {
 762         -webkit-animation: dice-color-change 3s infinite;
 763         -ms-animation: dice-color-change 3s infinite;
 764         animation: dice-color-change 3s infinite;
 765 }
 766
 767 @-webkit-keyframes dice-color-change {
 768         0% { color: #d4b146; }
 769         50% { color: #ef54b0; }
 770         75% { color: #7190d3; }
 771         100% { color: #d4b146; }
 772 }
 773
 774 @-ms-keyframes dice-color-change {
 775         0% { color: #d4b146; }
 776         50% { color: #ef54b0; }
 777         75% { color: #7190d3; }
 778         100% { color: #d4b146; }
 779 }
 780
 781 @keyframes dice-color-change {
 782         0% { color: #d4b146; }
 783         50% { color: #ef54b0; }
 784         75% { color: #7190d3; }
 785         100% { color: #d4b146; }
 786 }
 787
 788 .customize-control-upload .actions,
 789 .customize-control-image .actions,
 790 .customize-control-background .actions,
 791 .customize-control-header .actions {
 792         margin-bottom: 32px;
 793 }
 794
 795 .customize-control-header .choice {
 796         position: relative;
 797         display: block;
 798         margin-bottom: 9px;
 799 }
 800
 801 .customize-control-header .uploaded div:last-child > .choice {
 802         margin-bottom: 0;
 803 }
 804
 805 .customize-control-upload img,
 806 .customize-control-image img,
 807 .customize-control-background img,
 808 .customize-control-header img {
 809         width: 100%;
 810         -webkit-border-radius: 2px;
 811         border-radius: 2px;
 812 }
 813
 814 .customize-control-upload .remove-button,
 815 .customize-control-upload .default-button,
 816 .customize-control-image .remove-button,
 817 .customize-control-image .default-button,
 818 .customize-control-background .remove-button,
 819 .customize-control-background .default-button,
 820 .customize-control-header .remove {
 821         float: left;
 822         margin-right: 3px;
 823 }
 824
 825 .customize-control-upload .upload-button,
 826 .customize-control-image .upload-button,
 827 .customize-control-background .upload-button,
 828 .customize-control-header .new {
 829         float: right;
 830 }
 831
 832
 833 /** Handle cheaters. */
 834 body.cheatin {
 835         font-size: medium;
 836         height: auto;
 837         background: #fff;
 838         margin: 50px auto 2em;
 839         padding: 1em 2em;
 840         max-width: 700px;
 841         min-width: 0;
 842         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 843         box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 844 }
 845
 846 body.cheatin p {
 847         font-size: 14px;
 848         line-height: 1.5;
 849         margin: 25px 0 20px;
 850 }