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