customize-controls.css (69232B)
1 body { 2 overflow: hidden; 3 -webkit-text-size-adjust: 100%; 4 } 5 6 .customize-controls-close, 7 .widget-control-actions a { 8 text-decoration: none; 9 } 10 11 #customize-controls h3 { 12 font-size: 14px; 13 } 14 15 #customize-controls img { 16 max-width: 100%; 17 } 18 19 #customize-controls .submit { 20 text-align: center; 21 } 22 23 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked { 24 background-color: rgba(0, 0, 0, 0.7); 25 padding: 25px; 26 } 27 28 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message { 29 margin-left: auto; 30 margin-right: auto; 31 max-width: 366px; 32 min-height: 64px; 33 width: auto; 34 padding: 25px 25px 25px 109px; 35 position: relative; 36 background: #fff; 37 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); 38 line-height: 1.5; 39 overflow-y: auto; 40 text-align: left; 41 top: calc( 50% - 100px ); 42 } 43 44 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing { 45 margin-top: 0; 46 } 47 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons { 48 margin-bottom: 0; 49 } 50 51 .customize-changeset-locked-avatar { 52 width: 64px; 53 position: absolute; 54 left: 25px; 55 top: 25px; 56 } 57 58 .wp-core-ui.wp-customizer .customize-changeset-locked-message a.button { 59 margin-right: 10px; 60 margin-top: 0; 61 } 62 63 #customize-controls .description { 64 color: #50575e; 65 } 66 67 #customize-save-button-wrapper { 68 float: right; 69 margin-top: 9px; 70 } 71 72 body:not(.ready) #customize-save-button-wrapper .save { 73 visibility: hidden; 74 } 75 #customize-save-button-wrapper .save { 76 float: left; 77 border-radius: 3px; 78 box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ 79 margin-top: 0; 80 } 81 82 #customize-save-button-wrapper .save:focus, #publish-settings:focus { 83 box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */ 84 } 85 86 #customize-save-button-wrapper .save.has-next-sibling { 87 border-radius: 3px 0 0 3px; 88 } 89 90 #customize-sidebar-outer-content { 91 position: absolute; 92 top: 0; 93 bottom: 0; 94 left: 0; 95 visibility: hidden; 96 overflow-x: hidden; 97 overflow-y: auto; 98 width: 100%; 99 margin: 0; 100 z-index: -1; 101 background: #f0f0f1; 102 transition: left .18s; 103 border-right: 1px solid #dcdcde; 104 border-left: 1px solid #dcdcde; 105 height: 100%; 106 } 107 108 #customize-theme-controls .control-section-outer { 109 display: none !important; 110 } 111 112 #customize-outer-theme-controls .accordion-section-content { 113 padding: 12px; 114 } 115 116 #customize-outer-theme-controls .accordion-section-content.open { 117 display: block; 118 } 119 120 .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { 121 visibility: visible; 122 left: 100%; 123 transition: left .18s; 124 } 125 126 .customize-outer-pane-parent { 127 margin: 0; 128 } 129 130 .outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main { 131 left: 300px; 132 opacity: 0.4; 133 } 134 135 .outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, 136 .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, 137 .adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, 138 .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, 139 .adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, 140 .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { 141 left: 64%; 142 } 143 144 #customize-outer-theme-controls li.notice { 145 padding-top: 8px; 146 padding-bottom: 8px; 147 margin-left: 0; 148 margin-bottom: 10px; 149 } 150 151 #publish-settings { 152 text-indent: 0; 153 border-radius: 0 3px 3px 0; 154 padding-left: 0; 155 padding-right: 0; 156 box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ 157 font-size: 14px; 158 width: 30px; 159 float: left; 160 transform: none; 161 margin-top: 0; 162 line-height: 2; 163 } 164 165 body:not(.ready) #publish-settings, 166 body.trashing #customize-save-button-wrapper .save, 167 body.trashing #publish-settings { 168 display: none; 169 } 170 171 #customize-header-actions .spinner { 172 margin-top: 13px; 173 margin-right: 4px; 174 } 175 176 .saving #customize-header-actions .spinner, 177 .trashing #customize-header-actions .spinner { 178 visibility: visible; 179 } 180 181 #customize-header-actions { 182 border-bottom: 1px solid #dcdcde; 183 } 184 185 #customize-controls .wp-full-overlay-sidebar-content { 186 overflow-y: auto; 187 overflow-x: hidden; 188 } 189 190 .outer-section-open #customize-controls .wp-full-overlay-sidebar-content { 191 background: #f0f0f1; 192 } 193 194 #customize-controls .customize-info { 195 border: none; 196 border-bottom: 1px solid #dcdcde; 197 margin-bottom: 15px; 198 } 199 200 #customize-control-changeset_status .customize-inside-control-row, 201 #customize-control-changeset_preview_link input { 202 background-color: #fff; 203 border-bottom: 1px solid #dcdcde; 204 box-sizing: content-box; 205 width: 100%; 206 margin-left: -12px; 207 padding-left: 12px; 208 padding-right: 12px; 209 } 210 211 #customize-control-trash_changeset { 212 margin-top: 20px; 213 } 214 #customize-control-trash_changeset .button-link { 215 position: relative; 216 padding-left: 24px; 217 display: inline-block; 218 } 219 #customize-control-trash_changeset .button-link:before { 220 content: "\f182"; 221 font: normal 22px dashicons; 222 text-decoration: none; 223 position: absolute; 224 left: 0; 225 top: -2px; 226 } 227 228 #customize-controls .date-input:invalid { 229 border-color: #d63638; 230 } 231 232 #customize-control-changeset_status .customize-inside-control-row { 233 padding-top: 10px; 234 padding-bottom: 10px; 235 font-weight: 500; 236 } 237 238 #customize-control-changeset_status .customize-inside-control-row:first-of-type { 239 border-top: 1px solid #dcdcde; 240 } 241 242 #customize-control-changeset_status .customize-control-title { 243 margin-bottom: 6px; 244 } 245 246 #customize-control-changeset_status input { 247 margin-left: 0; 248 } 249 250 #customize-control-changeset_preview_link { 251 position: relative; 252 display: block; 253 } 254 255 .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { 256 margin: 0; 257 position: absolute; 258 bottom: 9px; 259 right: 0; 260 } 261 262 .preview-link-wrapper { 263 position: relative; 264 } 265 266 .customize-copy-preview-link:before, 267 .customize-copy-preview-link:after { 268 content: ""; 269 height: 28px; 270 position: absolute; 271 background: #fff; 272 top: -1px; 273 } 274 275 .customize-copy-preview-link:before { 276 left: -10px; 277 width: 9px; 278 opacity: 0.75; 279 } 280 281 .customize-copy-preview-link:after { 282 left: -5px; 283 width: 4px; 284 opacity: 0.8; 285 } 286 287 #customize-control-changeset_preview_link input { 288 line-height: 2.85714286; /* 40px */ 289 border-top: 1px solid #dcdcde; 290 border-left: none; 291 border-right: none; 292 text-indent: -999px; 293 color: #fff; 294 /* Only necessary for IE11 */ 295 min-height: 40px; 296 } 297 298 #customize-control-changeset_preview_link label { 299 position: relative; 300 display: block; 301 } 302 303 #customize-control-changeset_preview_link a { 304 display: inline-block; 305 position: absolute; 306 white-space: nowrap; 307 overflow: hidden; 308 width: 90%; 309 bottom: 14px; 310 font-size: 14px; 311 text-decoration: none; 312 } 313 314 #customize-control-changeset_preview_link a.disabled, 315 #customize-control-changeset_preview_link a.disabled:active, 316 #customize-control-changeset_preview_link a.disabled:focus, 317 #customize-control-changeset_preview_link a.disabled:visited { 318 color: #000; 319 opacity: 0.4; 320 cursor: default; 321 outline: none; 322 box-shadow: none; 323 } 324 325 #sub-accordion-section-publish_settings .customize-section-description-container { 326 display: none; 327 } 328 329 #customize-controls .customize-info.section-meta { 330 margin-bottom: 15px; 331 } 332 333 .customize-control-date_time .customize-control-description + .date-time-fields.includes-time { 334 margin-top: 10px; 335 } 336 337 .customize-control.customize-control-date_time .date-time-fields .date-input.day { 338 margin-right: 0; 339 } 340 341 .date-time-fields .date-input.month { 342 width: auto; 343 margin: 0; 344 } 345 346 .date-time-fields .date-input.day, 347 .date-time-fields .date-input.hour, 348 .date-time-fields .date-input.minute { 349 width: 46px; 350 } 351 352 .date-time-fields .date-input.year { 353 width: 65px; 354 } 355 356 .date-time-fields .date-input.meridian { 357 width: auto; 358 margin: 0; 359 } 360 361 .date-time-fields .time-row { 362 margin-top: 12px; 363 } 364 365 #customize-control-changeset_preview_link { 366 margin-top: 6px; 367 } 368 369 #customize-control-changeset_status { 370 margin-bottom: 0; 371 padding-bottom: 0; 372 } 373 374 #customize-control-changeset_scheduled_date { 375 box-sizing: content-box; 376 width: 100%; 377 margin-left: -12px; 378 padding: 12px; 379 background: #fff; 380 border-bottom: 1px solid #dcdcde; 381 margin-bottom: 0; 382 } 383 384 #customize-control-changeset_scheduled_date .customize-control-description { 385 font-style: normal; 386 } 387 388 #customize-controls .customize-info.is-in-view, 389 #customize-controls .customize-section-title.is-in-view { 390 position: absolute; 391 z-index: 9; 392 width: 100%; 393 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 394 } 395 396 #customize-controls .customize-section-title.is-in-view { 397 margin-top: 0; 398 } 399 400 #customize-controls .customize-info.is-in-view + .accordion-section { 401 margin-top: 15px; 402 } 403 404 #customize-controls .customize-info.is-sticky, 405 #customize-controls .customize-section-title.is-sticky { 406 position: fixed; 407 top: 46px; 408 } 409 410 #customize-controls .customize-info .accordion-section-title { 411 background: #fff; 412 color: #50575e; 413 border-left: none; 414 border-right: none; 415 border-bottom: none; 416 cursor: default; 417 } 418 419 #customize-controls .customize-info.open .accordion-section-title:after, 420 #customize-controls .customize-info .accordion-section-title:hover:after, 421 #customize-controls .customize-info .accordion-section-title:focus:after { 422 color: #2c3338; 423 } 424 425 #customize-controls .customize-info .accordion-section-title:after { 426 display: none; 427 } 428 429 #customize-controls .customize-info .preview-notice { 430 font-size: 13px; 431 line-height: 1.9; 432 } 433 434 #customize-controls .customize-pane-child .customize-section-title h3, 435 #customize-controls .customize-pane-child h3.customize-section-title, 436 #customize-outer-theme-controls .customize-pane-child .customize-section-title h3, 437 #customize-outer-theme-controls .customize-pane-child h3.customize-section-title, 438 #customize-controls .customize-info .panel-title { 439 font-size: 20px; 440 font-weight: 200; 441 line-height: 26px; 442 display: block; 443 overflow: hidden; 444 white-space: nowrap; 445 text-overflow: ellipsis; 446 } 447 448 #customize-controls .customize-section-title span.customize-action { 449 overflow: hidden; 450 white-space: nowrap; 451 text-overflow: ellipsis; 452 } 453 454 #customize-controls .customize-info .customize-help-toggle { 455 position: absolute; 456 top: 4px; 457 right: 1px; 458 padding: 20px 20px 10px 10px; 459 width: 20px; 460 height: 20px; 461 cursor: pointer; 462 box-shadow: none; 463 -webkit-appearance: none; 464 background: transparent; 465 color: #50575e; 466 border: none; 467 } 468 469 #customize-controls .customize-info .customize-help-toggle:before { 470 position: absolute; 471 top: 5px; 472 left: 6px; 473 } 474 475 #customize-controls .customize-info.open .customize-help-toggle, 476 #customize-controls .customize-info .customize-help-toggle:focus, 477 #customize-controls .customize-info .customize-help-toggle:hover { 478 color: #2271b1; 479 } 480 481 #customize-controls .customize-info .customize-panel-description, 482 #customize-controls .customize-info .customize-section-description, 483 #customize-outer-theme-controls .customize-info .customize-section-description, 484 #customize-controls .no-widget-areas-rendered-notice { 485 color: #50575e; 486 display: none; 487 background: #fff; 488 padding: 12px 15px; 489 border-top: 1px solid #dcdcde; 490 } 491 492 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { 493 border-top: none; 494 } 495 .no-widget-areas-rendered-notice { 496 font-style: italic; 497 } 498 .no-widget-areas-rendered-notice p:first-child { 499 margin-top: 0; 500 } 501 .no-widget-areas-rendered-notice p:last-child { 502 margin-bottom: 0; 503 } 504 505 #customize-controls .customize-info .customize-section-description { 506 margin-bottom: 15px; 507 } 508 509 #customize-controls .customize-info .customize-panel-description p:first-child, 510 #customize-controls .customize-info .customize-section-description p:first-child { 511 margin-top: 0; 512 } 513 514 #customize-controls .customize-info .customize-panel-description p:last-child, 515 #customize-controls .customize-info .customize-section-description p:last-child { 516 margin-bottom: 0; 517 } 518 519 #customize-controls .current-panel .control-section > h3.accordion-section-title { 520 padding-right: 30px; 521 } 522 523 #customize-theme-controls .control-section, 524 #customize-outer-theme-controls .control-section { 525 border: none; 526 } 527 528 #customize-theme-controls .accordion-section-title, 529 #customize-outer-theme-controls .accordion-section-title { 530 color: #50575e; 531 background-color: #fff; 532 border-bottom: 1px solid #dcdcde; 533 border-left: 4px solid #fff; 534 transition: 535 .15s color ease-in-out, 536 .15s background-color ease-in-out, 537 .15s border-color ease-in-out; 538 } 539 540 #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title { 541 color: #50575e; 542 background-color: #fff; 543 border-left: 4px solid #fff; 544 } 545 546 #customize-theme-controls .accordion-section-title:after, 547 #customize-outer-theme-controls .accordion-section-title:after { 548 content: "\f345"; 549 color: #a7aaad; 550 } 551 552 #customize-theme-controls .accordion-section-content, 553 #customize-outer-theme-controls .accordion-section-content { 554 color: #50575e; 555 background: transparent; 556 } 557 558 #customize-controls .control-section:hover > .accordion-section-title, 559 #customize-controls .control-section .accordion-section-title:hover, 560 #customize-controls .control-section.open .accordion-section-title, 561 #customize-controls .control-section .accordion-section-title:focus { 562 color: #2271b1; 563 background: #f6f7f7; 564 border-left-color: #2271b1; 565 } 566 567 #accordion-section-themes + .control-section { 568 border-top: 1px solid #dcdcde; 569 } 570 571 .js .control-section:hover .accordion-section-title, 572 .js .control-section .accordion-section-title:hover, 573 .js .control-section.open .accordion-section-title, 574 .js .control-section .accordion-section-title:focus { 575 background: #f6f7f7; 576 } 577 578 #customize-theme-controls .control-section:hover > .accordion-section-title:after, 579 #customize-theme-controls .control-section .accordion-section-title:hover:after, 580 #customize-theme-controls .control-section.open .accordion-section-title:after, 581 #customize-theme-controls .control-section .accordion-section-title:focus:after, 582 #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, 583 #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, 584 #customize-outer-theme-controls .control-section.open .accordion-section-title:after, 585 #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { 586 color: #2271b1; 587 } 588 589 #customize-theme-controls .control-section.open { 590 border-bottom: 1px solid #f0f0f1; 591 } 592 593 #customize-theme-controls .control-section.open .accordion-section-title, 594 #customize-outer-theme-controls .control-section.open .accordion-section-title { 595 border-bottom-color: #f0f0f1 !important; 596 } 597 598 #customize-theme-controls .control-section:last-of-type.open, 599 #customize-theme-controls .control-section:last-of-type > .accordion-section-title { 600 border-bottom-color: #dcdcde; 601 } 602 603 #customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2), 604 #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu, 605 #customize-theme-controls .control-section-nav_menu_locations .accordion-section-title { 606 border-top: 1px solid #dcdcde; 607 } 608 609 #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu { 610 border-top: none; 611 } 612 613 #customize-theme-controls > ul { 614 margin: 0; 615 } 616 617 #customize-theme-controls .accordion-section-content { 618 position: absolute; 619 top: 0; 620 left: 100%; 621 width: 100%; 622 margin: 0; 623 padding: 12px; 624 box-sizing: border-box; 625 } 626 627 #customize-info, 628 #customize-theme-controls .customize-pane-parent, 629 #customize-theme-controls .customize-pane-child { 630 overflow: visible; 631 width: 100%; 632 margin: 0; 633 padding: 0; 634 box-sizing: border-box; 635 transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */ 636 } 637 638 #customize-theme-controls .customize-pane-child.skip-transition { 639 transition: none; 640 } 641 642 #customize-info, 643 #customize-theme-controls .customize-pane-parent { 644 position: relative; 645 visibility: visible; 646 height: auto; 647 max-height: none; 648 overflow: auto; 649 transform: none; 650 } 651 652 #customize-theme-controls .customize-pane-child { 653 position: absolute; 654 top: 0; 655 left: 0; 656 visibility: hidden; 657 height: 0; 658 max-height: none; 659 overflow: hidden; 660 transform: translateX(100%); 661 } 662 663 #customize-theme-controls .customize-pane-child.open, 664 #customize-theme-controls .customize-pane-child.current-panel { 665 transform: none; 666 } 667 668 .section-open #customize-theme-controls .customize-pane-parent, 669 .in-sub-panel #customize-theme-controls .customize-pane-parent, 670 .section-open #customize-info, 671 .in-sub-panel #customize-info, 672 .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel { 673 visibility: hidden; 674 height: 0; 675 overflow: hidden; 676 transform: translateX(-100%); 677 } 678 679 .section-open #customize-theme-controls .customize-pane-parent.busy, 680 .in-sub-panel #customize-theme-controls .customize-pane-parent.busy, 681 .section-open #customize-info.busy, 682 .in-sub-panel #customize-info.busy, 683 .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel, 684 #customize-theme-controls .customize-pane-child.open, 685 #customize-theme-controls .customize-pane-child.current-panel, 686 #customize-theme-controls .customize-pane-child.busy { 687 visibility: visible; 688 height: auto; 689 overflow: auto; 690 } 691 692 #customize-theme-controls .customize-pane-child.accordion-section-content, 693 #customize-theme-controls .customize-pane-child.accordion-sub-container { 694 display: block; 695 overflow-x: hidden; 696 } 697 698 #customize-theme-controls .customize-pane-child.accordion-section-content { 699 padding: 12px; 700 } 701 702 #customize-theme-controls .customize-pane-child.menu li { 703 position: static; 704 } 705 706 .customize-section-description-container, 707 .control-section-nav_menu .customize-section-description-container, 708 .control-section-new_menu .customize-section-description-container { 709 margin-bottom: 15px; 710 } 711 712 .control-section-nav_menu .customize-control, 713 .control-section-new_menu .customize-control { 714 /* Override default `margin-bottom` for `.customize-control` */ 715 margin-bottom: 0; 716 } 717 718 .customize-section-title { 719 margin: -12px -12px 0 -12px; 720 border-bottom: 1px solid #dcdcde; 721 background: #fff; 722 } 723 724 div.customize-section-description { 725 margin-top: 22px; 726 } 727 728 .customize-info div.customize-section-description { 729 margin-top: 0; 730 } 731 732 div.customize-section-description p:first-child { 733 margin-top: 0; 734 } 735 736 div.customize-section-description p:last-child { 737 margin-bottom: 0; 738 } 739 740 #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { 741 border-bottom: 1px solid #dcdcde; 742 padding: 12px 12px 12px 12px; 743 } 744 745 .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { 746 padding: 12px 12px 13px 12px; 747 } 748 749 .customize-section-title h3, 750 h3.customize-section-title { 751 padding: 10px 10px 12px 14px; 752 margin: 0; 753 line-height: 21px; 754 color: #50575e; 755 } 756 757 .accordion-sub-container.control-panel-content { 758 display: none; 759 position: absolute; 760 top: 0; 761 width: 100%; 762 } 763 764 .accordion-sub-container.control-panel-content.busy { 765 display: block; 766 } 767 768 .current-panel .accordion-sub-container.control-panel-content { 769 width: 100%; 770 } 771 772 .customize-controls-close { 773 display: block; 774 position: absolute; 775 top: 0; 776 left: 0; 777 width: 45px; 778 height: 41px; 779 padding: 0 2px 0 0; 780 background: #f0f0f1; 781 border: none; 782 border-top: 4px solid #f0f0f1; 783 border-right: 1px solid #dcdcde; 784 color: #3c434a; 785 text-align: left; 786 cursor: pointer; 787 transition: 788 color .15s ease-in-out, 789 border-color .15s ease-in-out, 790 background .15s ease-in-out; 791 box-sizing: content-box; 792 } 793 794 .customize-panel-back, 795 .customize-section-back { 796 display: block; 797 float: left; 798 width: 48px; 799 height: 71px; 800 padding: 0 24px 0 0; 801 margin: 0; 802 background: #fff; 803 border: none; 804 border-right: 1px solid #dcdcde; 805 border-left: 4px solid #fff; 806 box-shadow: none; 807 cursor: pointer; 808 transition: 809 color .15s ease-in-out, 810 border-color .15s ease-in-out, 811 background .15s ease-in-out; 812 } 813 814 .customize-section-back { 815 height: 74px; 816 } 817 818 .ios .customize-panel-back { 819 display: none; 820 } 821 822 .ios .expanded.in-sub-panel .customize-panel-back { 823 display: block; 824 } 825 826 #customize-controls .panel-meta.customize-info .accordion-section-title { 827 margin-left: 48px; 828 border-left: none; 829 } 830 831 #customize-controls .panel-meta.customize-info .accordion-section-title:hover, 832 #customize-controls .cannot-expand:hover .accordion-section-title { 833 background: #fff; 834 color: #50575e; 835 border-left-color: #fff; 836 } 837 838 .customize-controls-close:focus, 839 .customize-controls-close:hover, 840 .customize-controls-preview-toggle:focus, 841 .customize-controls-preview-toggle:hover { 842 background: #fff; 843 color: #2271b1; 844 border-top-color: #2271b1; 845 box-shadow: none; 846 /* Only visible in Windows High Contrast mode */ 847 outline: 1px solid transparent; 848 } 849 850 #customize-theme-controls .accordion-section-title:focus .customize-action { 851 /* Only visible in Windows High Contrast mode */ 852 outline: 1px solid transparent; 853 outline-offset: 1px; 854 } 855 856 .customize-panel-back:hover, 857 .customize-panel-back:focus, 858 .customize-section-back:hover, 859 .customize-section-back:focus { 860 color: #2271b1; 861 background: #f6f7f7; 862 border-left-color: #2271b1; 863 box-shadow: none; 864 /* Only visible in Windows High Contrast mode */ 865 outline: 2px solid transparent; 866 outline-offset: -2px; 867 } 868 869 .customize-controls-close:before { 870 font: normal 22px/45px dashicons; 871 content: "\f335"; 872 position: relative; 873 top: -3px; 874 left: 13px; 875 } 876 877 .customize-panel-back:before, 878 .customize-section-back:before { 879 font: normal 20px/72px dashicons; 880 content: "\f341"; 881 position: relative; 882 left: 9px; 883 } 884 885 .wp-full-overlay-sidebar .wp-full-overlay-header { 886 background-color: #f0f0f1; 887 transition: padding ease-in-out .18s; 888 } 889 890 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { 891 padding-left: 62px; 892 } 893 894 p.customize-section-description { 895 font-style: normal; 896 margin-top: 22px; 897 margin-bottom: 0; 898 } 899 900 .customize-section-description ul { 901 margin-left: 1em; 902 } 903 904 .customize-section-description ul > li { 905 list-style: disc; 906 } 907 908 .section-description-buttons { 909 text-align: right; 910 } 911 912 .customize-control { 913 width: 100%; 914 float: left; 915 clear: both; 916 margin-bottom: 12px; 917 } 918 919 .customize-control input[type="text"], 920 .customize-control input[type="password"], 921 .customize-control input[type="email"], 922 .customize-control input[type="number"], 923 .customize-control input[type="search"], 924 .customize-control input[type="tel"], 925 .customize-control input[type="url"] { 926 width: 100%; 927 margin: 0; 928 } 929 930 .customize-control-hidden { 931 margin: 0; 932 } 933 934 .customize-control-textarea textarea { 935 width: 100%; 936 resize: vertical; 937 } 938 939 .customize-control select { 940 width: 100%; 941 } 942 943 .customize-control select[multiple] { 944 height: auto; 945 } 946 947 .customize-control-title { 948 display: block; 949 font-size: 14px; 950 line-height: 1.75; 951 font-weight: 600; 952 margin-bottom: 4px; 953 } 954 955 .customize-control-description { 956 display: block; 957 font-style: italic; 958 line-height: 1.4; 959 margin-top: 0; 960 margin-bottom: 5px; 961 } 962 963 .customize-section-description a.external-link:after { 964 font: 16px/11px dashicons; 965 content: "\f310"; 966 top: 3px; 967 position: relative; 968 padding-left: 3px; 969 display: inline-block; 970 text-decoration: none; 971 } 972 973 .customize-control-color .color-picker, 974 .customize-control-upload div { 975 line-height: 28px; 976 } 977 978 .customize-control .customize-inside-control-row { 979 line-height: 1.6; 980 display: block; 981 margin-left: 24px; 982 padding-top: 6px; 983 padding-bottom: 6px; 984 } 985 986 .customize-control-radio input, 987 .customize-control-checkbox input, 988 .customize-control-nav_menu_auto_add input { 989 margin-right: 4px; 990 margin-left: -24px; 991 } 992 993 .customize-control-radio { 994 padding: 5px 0 10px; 995 } 996 997 .customize-control-radio .customize-control-title { 998 margin-bottom: 0; 999 line-height: 1.6; 1000 } 1001 1002 .customize-control-radio .customize-control-title + .customize-control-description { 1003 margin-top: 7px; 1004 } 1005 1006 .customize-control-radio label, 1007 .customize-control-checkbox label { 1008 vertical-align: top; 1009 } 1010 1011 .customize-control .attachment-thumb.type-icon { 1012 float: left; 1013 margin: 10px; 1014 width: auto; 1015 } 1016 1017 .customize-control .attachment-title { 1018 font-weight: 600; 1019 margin: 0; 1020 padding: 5px 10px; 1021 } 1022 1023 .customize-control .attachment-meta { 1024 white-space: nowrap; 1025 overflow: hidden; 1026 text-overflow: ellipsis; 1027 margin: 0; 1028 padding: 0 10px; 1029 } 1030 1031 .customize-control .attachment-meta-title { 1032 padding-top: 7px; 1033 } 1034 1035 /* Remove descender space. */ 1036 .customize-control .thumbnail-image, 1037 .customize-control-header .current, 1038 .customize-control .wp-media-wrapper.wp-video { 1039 line-height: 0; 1040 } 1041 1042 /* Remove descender space. */ 1043 .customize-control-site_icon .favicon-preview .browser-preview { 1044 vertical-align: top; 1045 } 1046 1047 .customize-control .thumbnail-image img { 1048 cursor: pointer; 1049 } 1050 1051 #customize-controls .thumbnail-audio .thumbnail { 1052 max-width: 64px; 1053 max-height: 64px; 1054 margin: 10px; 1055 float: left; 1056 } 1057 1058 #available-menu-items .accordion-section-content .new-content-item, 1059 .customize-control-dropdown-pages .new-content-item { 1060 width: calc(100% - 30px); 1061 padding: 8px 15px; 1062 position: absolute; 1063 bottom: 0; 1064 z-index: 10; 1065 background: #f0f0f1; 1066 display: flex; 1067 } 1068 1069 .customize-control-dropdown-pages .new-content-item { 1070 width: 100%; 1071 padding: 5px 0 5px 1px; 1072 position: relative; 1073 } 1074 1075 #available-menu-items .new-content-item .create-item-input, 1076 .customize-control-dropdown-pages .new-content-item .create-item-input { 1077 flex-grow: 10; 1078 } 1079 1080 #available-menu-items .new-content-item .add-content, 1081 .customize-control-dropdown-pages .new-content-item .add-content { 1082 margin: 2px 0 2px 6px; 1083 flex-grow: 1; 1084 } 1085 1086 .customize-control-dropdown-pages .new-content-item .create-item-input.invalid { 1087 border: 1px solid #d63638; 1088 } 1089 1090 .customize-control-dropdown-pages .add-new-toggle { 1091 margin-left: 1px; 1092 font-weight: 600; 1093 line-height: 2.2; 1094 } 1095 1096 #customize-preview iframe { 1097 width: 100%; 1098 height: 100%; 1099 position: absolute; 1100 } 1101 #customize-preview iframe + iframe { 1102 visibility: hidden; 1103 } 1104 1105 .wp-full-overlay-sidebar { 1106 background: #f0f0f1; 1107 border-right: 1px solid #dcdcde; 1108 } 1109 1110 1111 /** 1112 * Notifications 1113 */ 1114 1115 #customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */ 1116 margin: 4px 0 8px 0; 1117 padding: 0; 1118 cursor: default; 1119 } 1120 1121 #customize-controls .customize-control-widget_form.has-error .widget .widget-top, 1122 .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle { 1123 box-shadow: inset 0 0 0 2px #d63638; 1124 transition: .15s box-shadow linear; 1125 } 1126 1127 #customize-controls .customize-control-notifications-container li.notice { 1128 list-style: none; 1129 margin: 0 0 6px 0; 1130 padding: 9px 14px; 1131 overflow: hidden; 1132 } 1133 #customize-controls .customize-control-notifications-container .notice.is-dismissible { 1134 padding-right: 38px; 1135 } 1136 1137 .customize-control-notifications-container li.notice:last-child { 1138 margin-bottom: 0; 1139 } 1140 1141 #customize-controls .customize-control-nav_menu_item .customize-control-notifications-container { 1142 margin-top: 0; 1143 } 1144 1145 #customize-controls .customize-control-widget_form .customize-control-notifications-container { 1146 margin-top: 8px; 1147 } 1148 1149 .customize-control-text.has-error input { 1150 outline: 2px solid #d63638; 1151 } 1152 1153 #customize-controls #customize-notifications-area { 1154 position: absolute; 1155 top: 46px; 1156 width: 100%; 1157 border-bottom: 1px solid #dcdcde; 1158 display: block; 1159 padding: 0; 1160 margin: 0; 1161 } 1162 1163 .wp-full-overlay.collapsed #customize-controls #customize-notifications-area { 1164 display: none !important; 1165 } 1166 1167 #customize-controls #customize-notifications-area:not(.has-overlay-notifications), 1168 #customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications), 1169 #customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) { 1170 max-height: 210px; 1171 overflow-x: hidden; 1172 overflow-y: auto; 1173 } 1174 1175 #customize-controls #customize-notifications-area > ul, 1176 #customize-controls #customize-notifications-area .notice, 1177 #customize-controls .panel-meta > .customize-control-notifications-container, 1178 #customize-controls .panel-meta > .customize-control-notifications-container .notice, 1179 #customize-controls .customize-section-title > .customize-control-notifications-container, 1180 #customize-controls .customize-section-title > .customize-control-notifications-container .notice { 1181 margin: 0; 1182 } 1183 #customize-controls .panel-meta > .customize-control-notifications-container, 1184 #customize-controls .customize-section-title > .customize-control-notifications-container { 1185 border-top: 1px solid #dcdcde; 1186 } 1187 #customize-controls #customize-notifications-area .notice, 1188 #customize-controls .panel-meta > .customize-control-notifications-container .notice, 1189 #customize-controls .customize-section-title > .customize-control-notifications-container .notice { 1190 padding: 9px 14px; 1191 } 1192 #customize-controls #customize-notifications-area .notice.is-dismissible, 1193 #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible, 1194 #customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible { 1195 padding-right: 38px; 1196 } 1197 #customize-controls #customize-notifications-area .notice + .notice, 1198 #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice, 1199 #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice { 1200 margin-top: 1px; 1201 } 1202 1203 @keyframes customize-fade-in { 1204 0% { opacity: 0; } 1205 100% { opacity: 1; } 1206 } 1207 1208 #customize-controls .notice.notification-overlay, 1209 #customize-controls #customize-notifications-area .notice.notification-overlay { 1210 margin: 0; 1211 border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */ 1212 } 1213 1214 #customize-controls .customize-control-notifications-container.has-overlay-notifications { 1215 animation: customize-fade-in 0.5s; 1216 z-index: 30; 1217 } 1218 1219 /* Note: Styles for this are also defined in themes.css */ 1220 #customize-controls #customize-notifications-area .notice.notification-overlay .notification-message { 1221 clear: both; 1222 color: #1d2327; 1223 font-size: 18px; 1224 font-style: normal; 1225 margin: 0; 1226 padding: 2em 0; 1227 text-align: center; 1228 width: 100%; 1229 display: block; 1230 top: 50%; 1231 position: relative; 1232 } 1233 1234 /* Style for custom settings */ 1235 1236 /** 1237 * Static front page 1238 */ 1239 1240 #customize-control-show_on_front.has-error { 1241 margin-bottom: 0; 1242 } 1243 #customize-control-show_on_front.has-error .customize-control-notifications-container { 1244 margin-top: 12px; 1245 } 1246 1247 /** 1248 * Dropdowns 1249 */ 1250 1251 .accordion-section .dropdown { 1252 float: left; 1253 display: block; 1254 position: relative; 1255 cursor: pointer; 1256 } 1257 1258 .accordion-section .dropdown-content { 1259 overflow: hidden; 1260 float: left; 1261 min-width: 30px; 1262 height: 16px; 1263 line-height: 16px; 1264 margin-right: 16px; 1265 padding: 4px 5px; 1266 border: 2px solid #f0f0f1; 1267 -webkit-user-select: none; 1268 user-select: none; 1269 } 1270 1271 /* @todo maybe no more used? */ 1272 .customize-control .dropdown-arrow { 1273 position: absolute; 1274 top: 0; 1275 bottom: 0; 1276 right: 0; 1277 width: 20px; 1278 background: #f0f0f1; 1279 } 1280 1281 .customize-control .dropdown-arrow:after { 1282 content: "\f140"; 1283 font: normal 20px/1 dashicons; 1284 speak: never; 1285 display: block; 1286 padding: 0; 1287 text-indent: 0; 1288 text-align: center; 1289 position: relative; 1290 -webkit-font-smoothing: antialiased; 1291 -moz-osx-font-smoothing: grayscale; 1292 text-decoration: none !important; 1293 color: #2c3338; 1294 } 1295 1296 .customize-control .dropdown-status { 1297 color: #2c3338; 1298 background: #f0f0f1; 1299 display: none; 1300 max-width: 112px; 1301 } 1302 1303 .customize-control-color .dropdown { 1304 margin-right: 5px; 1305 margin-bottom: 5px; 1306 } 1307 1308 .customize-control-color .dropdown .dropdown-content { 1309 background-color: #50575e; 1310 border: 1px solid rgba(0, 0, 0, 0.15); 1311 } 1312 1313 .customize-control-color .dropdown:hover .dropdown-content { 1314 border-color: rgba(0, 0, 0, 0.25); 1315 } 1316 1317 /** 1318 * iOS can't scroll iframes, 1319 * instead it expands the iframe size to match the size of the content 1320 */ 1321 1322 .ios .wp-full-overlay { 1323 position: relative; 1324 } 1325 1326 .ios #customize-controls .wp-full-overlay-sidebar-content { 1327 -webkit-overflow-scrolling: touch; 1328 } 1329 1330 /* Media controls */ 1331 1332 .customize-control .actions .button { 1333 margin-top: 12px; 1334 } 1335 1336 .customize-control-header .actions, 1337 .customize-control-header .uploaded { 1338 margin-bottom: 18px; 1339 } 1340 1341 .customize-control-header .uploaded button:not(.random), 1342 .customize-control-header .default button:not(.random) { 1343 width: 100%; 1344 padding: 0; 1345 margin: 0; 1346 background: none; 1347 border: none; 1348 color: inherit; 1349 cursor: pointer; 1350 } 1351 1352 .customize-control-header button img { 1353 display: block; 1354 } 1355 1356 .customize-control .attachment-media-view .remove-button, 1357 .customize-control .attachment-media-view .default-button, 1358 .customize-control .attachment-media-view .upload-button, 1359 .customize-control-header button.new, 1360 .customize-control-header button.remove { 1361 width: auto; 1362 height: auto; 1363 white-space: normal; 1364 } 1365 1366 .customize-control .attachment-media-view .thumbnail, 1367 .customize-control-header .current .container { 1368 overflow: hidden; 1369 } 1370 1371 .customize-control .attachment-media-view .placeholder, 1372 .customize-control .attachment-media-view .button-add-media, 1373 .customize-control-header .placeholder { 1374 width: 100%; 1375 position: relative; 1376 text-align: center; 1377 cursor: default; 1378 border: 1px dashed #c3c4c7; 1379 box-sizing: border-box; 1380 padding: 9px 0; 1381 line-height: 1.6; 1382 } 1383 1384 .customize-control .attachment-media-view .button-add-media { 1385 cursor: pointer; 1386 background-color: #f0f0f1; 1387 color: #2c3338; 1388 } 1389 1390 .customize-control .attachment-media-view .button-add-media:hover { 1391 background-color: #fff; 1392 } 1393 1394 .customize-control .attachment-media-view .button-add-media:focus { 1395 background-color: #fff; 1396 border-color: #3582c4; 1397 border-style: solid; 1398 box-shadow: 0 0 0 1px #3582c4; 1399 /* Only visible in Windows High Contrast mode */ 1400 outline: 2px solid transparent; 1401 } 1402 1403 .customize-control-header .inner { 1404 display: none; 1405 position: absolute; 1406 width: 100%; 1407 color: #50575e; 1408 white-space: nowrap; 1409 text-overflow: ellipsis; 1410 overflow: hidden; 1411 } 1412 1413 .customize-control-header .inner, 1414 .customize-control-header .inner .dashicons { 1415 line-height: 20px; 1416 top: 8px; 1417 } 1418 1419 .customize-control-header .list .inner, 1420 .customize-control-header .list .inner .dashicons { 1421 top: 9px; 1422 } 1423 1424 .customize-control-header .header-view { 1425 position: relative; 1426 width: 100%; 1427 margin-bottom: 12px; 1428 } 1429 1430 .customize-control-header .header-view:last-child { 1431 margin-bottom: 0px; 1432 } 1433 1434 /* Convoluted, but 'outline' support isn't good enough yet */ 1435 .customize-control-header .header-view:after { 1436 border: 0; 1437 } 1438 1439 .customize-control-header .header-view.selected .choice:focus { 1440 outline: none; 1441 } 1442 1443 .customize-control-header .header-view.selected:after { 1444 content: ""; 1445 position: absolute; 1446 height: auto; 1447 top: 0; 1448 left: 0; 1449 bottom: 0; 1450 right: 0; 1451 border: 4px solid #72aee6; 1452 border-radius: 2px; 1453 } 1454 1455 .customize-control-header .header-view.button.selected { 1456 border: 0; 1457 } 1458 1459 /* Header control: overlay "close" button */ 1460 1461 .customize-control-header .uploaded .header-view .close { 1462 font-size: 20px; 1463 color: #fff; 1464 background: #50575e; 1465 background: rgba(0, 0, 0, 0.5); 1466 position: absolute; 1467 top: 10px; 1468 left: -999px; 1469 z-index: 1; 1470 width: 26px; 1471 height: 26px; 1472 cursor: pointer; 1473 } 1474 1475 .customize-control-header .header-view:hover .close, 1476 .customize-control-header .header-view .close:focus { 1477 left: auto; 1478 right: 10px; 1479 } 1480 1481 .customize-control-header .header-view .close:focus { 1482 outline: 1px solid #4f94d4; 1483 } 1484 1485 /* Header control: randomiz(s)er */ 1486 1487 .customize-control-header .random.placeholder { 1488 cursor: pointer; 1489 border-radius: 2px; 1490 height: 40px; 1491 } 1492 1493 .customize-control-header button.random { 1494 width: 100%; 1495 height: auto; 1496 min-height: 40px; 1497 white-space: normal; 1498 } 1499 1500 .customize-control-header button.random .dice { 1501 margin-top: 4px; 1502 } 1503 1504 .customize-control-header .placeholder:hover .dice, 1505 .customize-control-header .header-view:hover > button.random .dice { 1506 animation: dice-color-change 3s infinite; 1507 } 1508 1509 .button-see-me { 1510 animation: bounce .7s 1; 1511 transform-origin: center bottom; 1512 } 1513 1514 @keyframes bounce { 1515 from, 20%, 53%, 80%, to { 1516 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 1517 transform: translate3d(0,0,0); 1518 } 1519 1520 40%, 43% { 1521 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 1522 transform: translate3d(0, -12px, 0); 1523 } 1524 1525 70% { 1526 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 1527 transform: translate3d(0, -6px, 0); 1528 } 1529 1530 90% { 1531 transform: translate3d(0,-1px,0); 1532 } 1533 } 1534 1535 .customize-control-header .choice { 1536 position: relative; 1537 display: block; 1538 margin-bottom: 9px; 1539 } 1540 1541 .customize-control-header .choice:focus { 1542 outline: none; 1543 box-shadow: 1544 0 0 0 1px #4f94d4, 1545 0 0 3px 1px rgba(79, 148, 212, 0.8); 1546 } 1547 1548 .customize-control-header .uploaded div:last-child > .choice { 1549 margin-bottom: 0; 1550 } 1551 1552 .customize-control .attachment-media-view .thumbnail-image img, 1553 .customize-control-header img { 1554 max-width: 100%; 1555 } 1556 1557 .customize-control .attachment-media-view .remove-button, 1558 .customize-control .attachment-media-view .default-button, 1559 .customize-control-header .remove { 1560 margin-right: 8px; 1561 } 1562 1563 /* Background position control */ 1564 .customize-control-background_position .background-position-control .button-group { 1565 display: block; 1566 } 1567 1568 /** 1569 * Code Editor Control and Custom CSS Section 1570 * 1571 * Modifications to the Section Container to make the textarea full-width and 1572 * full-height, if the control is the only control in the section. 1573 */ 1574 1575 .customize-control-code_editor textarea { 1576 width: 100%; 1577 font-family: Consolas, Monaco, monospace; 1578 font-size: 12px; 1579 padding: 6px 8px; 1580 -moz-tab-size: 2; 1581 -o-tab-size: 2; 1582 tab-size: 2; 1583 } 1584 .customize-control-code_editor textarea, 1585 .customize-control-code_editor .CodeMirror { 1586 height: 14em; 1587 } 1588 1589 #customize-controls .customize-section-description-container.section-meta.customize-info { 1590 border-bottom: none; 1591 } 1592 1593 #sub-accordion-section-custom_css .customize-control-notifications-container { 1594 margin-bottom: 15px; 1595 } 1596 1597 #customize-control-custom_css textarea { 1598 display: block; 1599 height: 500px; 1600 } 1601 1602 .customize-section-description-container + #customize-control-custom_css .customize-control-title { 1603 margin-left: 12px; 1604 } 1605 1606 .customize-section-description-container + #customize-control-custom_css:last-child textarea { 1607 border-right: 0; 1608 border-left: 0; 1609 height: calc( 100vh - 185px ); 1610 resize: none; 1611 } 1612 1613 .customize-section-description-container + #customize-control-custom_css:last-child { 1614 margin-left: -12px; 1615 width: 299px; 1616 width: calc( 100% + 24px ); 1617 margin-bottom: -12px; 1618 } 1619 1620 .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror { 1621 height: calc( 100vh - 185px ); 1622 } 1623 1624 .CodeMirror-lint-tooltip, 1625 .CodeMirror-hints { 1626 z-index: 500000 !important; 1627 } 1628 1629 .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container { 1630 margin-left: 12px; 1631 margin-right: 12px; 1632 } 1633 1634 .theme-browser .theme.active .theme-actions, 1635 .wp-customizer .theme-browser .theme .theme-actions { 1636 padding: 9px 15px; 1637 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); 1638 } 1639 1640 @media screen and (max-width: 640px) { 1641 .customize-section-description-container + #customize-control-custom_css:last-child { 1642 margin-right: 0; 1643 } 1644 1645 .customize-section-description-container + #customize-control-custom_css:last-child textarea { 1646 height: calc( 100vh - 140px ); 1647 } 1648 } 1649 1650 /** 1651 * Themes 1652 */ 1653 1654 #customize-theme-controls .control-panel-themes { 1655 border-bottom: none; 1656 } 1657 1658 #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */ 1659 #customize-theme-controls .control-panel-themes > .accordion-section-title { 1660 cursor: default; 1661 background: #fff; 1662 color: #50575e; 1663 border-top: 1px solid #dcdcde; 1664 border-bottom: 1px solid #dcdcde; 1665 border-left: none; 1666 border-right: none; 1667 margin: 0 0 15px 0; 1668 padding-right: 100px; /* Space for the button */ 1669 } 1670 1671 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */ 1672 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child { 1673 border-top: 0; 1674 } 1675 1676 #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ 1677 #customize-theme-controls .control-section-themes > .accordion-section-title { 1678 margin: 0 0 15px; 1679 } 1680 1681 #customize-controls .customize-themes-panel .accordion-section-title:hover, 1682 #customize-controls .customize-themes-panel .accordion-section-title { 1683 margin: 15px -8px; 1684 } 1685 1686 #customize-controls .control-section-themes .accordion-section-title, 1687 #customize-controls .customize-themes-panel .accordion-section-title { 1688 padding-right: 100px; /* Space for the button */ 1689 } 1690 1691 .control-panel-themes .accordion-section-title span.customize-action, 1692 #customize-controls .customize-section-title span.customize-action, 1693 #customize-controls .control-section-themes .accordion-section-title span.customize-action, 1694 #customize-controls .customize-section-title span.customize-action { 1695 font-size: 13px; 1696 display: block; 1697 font-weight: 400; 1698 } 1699 1700 #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme { 1701 position: absolute; 1702 right: 10px; 1703 top: 50%; 1704 margin-top: -14px; 1705 font-weight: 400; 1706 } 1707 1708 #customize-theme-controls .control-panel-themes > .accordion-section-title:after { 1709 display: none; 1710 } 1711 1712 .control-panel-themes .customize-themes-full-container { 1713 position: fixed; 1714 top: 0; 1715 left: 0; 1716 transition: .18s left ease-in-out; 1717 margin: 0 0 0 300px; 1718 padding: 71px 0 25px; 1719 overflow-y: scroll; 1720 width: calc(100% - 300px); 1721 height: calc(100% - 96px); 1722 background: #f0f0f1; 1723 z-index: 20; 1724 } 1725 1726 @media screen and (min-width: 1670px) { 1727 .control-panel-themes .customize-themes-full-container { 1728 width: 82%; 1729 right: 0; 1730 left: initial; 1731 } 1732 } 1733 1734 .modal-open .control-panel-themes .customize-themes-full-container { 1735 overflow-y: visible; 1736 } 1737 1738 /* Animations for opening the themes panel */ 1739 #customize-save-button-wrapper, 1740 #customize-header-actions .spinner, 1741 #customize-header-actions .customize-controls-preview-toggle { 1742 transition: .18s margin ease-in-out; 1743 } 1744 1745 #customize-footer-actions, 1746 #customize-footer-actions .collapse-sidebar { 1747 bottom: 0; 1748 transition: .18s bottom ease-in-out; 1749 } 1750 1751 .in-themes-panel:not(.animating) #customize-header-actions .spinner, 1752 .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle, 1753 .in-themes-panel:not(.animating) #customize-preview, 1754 .in-themes-panel:not(.animating) #customize-footer-actions { 1755 visibility: hidden; 1756 } 1757 1758 .wp-full-overlay.in-themes-panel { 1759 background: #f0f0f1; /* Prevents a black flash when fading in the panel */ 1760 } 1761 1762 .in-themes-panel #customize-save-button-wrapper, 1763 .in-themes-panel #customize-header-actions .spinner, 1764 .in-themes-panel #customize-header-actions .customize-controls-preview-toggle { 1765 margin-top: -46px; /* Height of header actions bar */ 1766 } 1767 1768 .in-themes-panel #customize-footer-actions, 1769 .in-themes-panel #customize-footer-actions .collapse-sidebar { 1770 bottom: -45px; 1771 } 1772 1773 /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */ 1774 .in-themes-panel.animating .control-panel-themes .filter-themes-count { 1775 display: none; 1776 } 1777 1778 .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content { 1779 bottom: 0; 1780 } 1781 1782 .themes-filter-bar .feature-filter-toggle { 1783 float: right; 1784 margin: 3px 0 3px 25px; 1785 } 1786 1787 .themes-filter-bar .feature-filter-toggle:before { 1788 content: "\f111"; 1789 margin: 0 5px 0 0; 1790 font: normal 16px/1 dashicons; 1791 vertical-align: text-bottom; 1792 -webkit-font-smoothing: antialiased; 1793 -moz-osx-font-smoothing: grayscale; 1794 } 1795 1796 .themes-filter-bar .feature-filter-toggle.open { 1797 background: #f0f0f1; 1798 border-color: #8c8f94; 1799 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); 1800 } 1801 1802 .themes-filter-bar .feature-filter-toggle .filter-count-filters { 1803 display: none; 1804 } 1805 1806 .filter-drawer { 1807 box-sizing: border-box; 1808 width: 100%; 1809 position: absolute; 1810 top: 46px; 1811 left: 0; 1812 padding: 25px 0 25px 25px; 1813 border-top: 0; 1814 margin: 0; 1815 background: #f0f0f1; 1816 border-bottom: 1px solid #dcdcde; 1817 } 1818 1819 .filter-drawer .filter-group { 1820 margin: 0 25px 0 0; 1821 width: calc( (100% - 75px) / 3); 1822 min-width: 200px; 1823 max-width: 320px; 1824 } 1825 1826 /* Adds a delay before fading in to avoid it "jumping" */ 1827 @keyframes themes-fade-in { 1828 0% { 1829 opacity: 0; 1830 } 1831 50% { 1832 opacity: 0; 1833 } 1834 100% { 1835 opacity: 1; 1836 } 1837 } 1838 1839 .control-panel-themes .customize-themes-full-container.animate { 1840 animation: .6s themes-fade-in 1; 1841 } 1842 1843 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count { 1844 animation: .6s themes-fade-in 1; 1845 } 1846 1847 .control-panel-themes .filter-themes-count { 1848 position: relative; 1849 float: right; 1850 line-height: 2.6; 1851 } 1852 1853 .control-panel-themes .filter-themes-count .themes-displayed { 1854 font-weight: 600; 1855 color: #50575e; 1856 } 1857 1858 .customize-themes-notifications { 1859 margin: 0; 1860 } 1861 1862 .control-panel-themes .customize-themes-notifications .notice { 1863 margin: 0 0 25px 0; 1864 } 1865 1866 .customize-themes-full-container .customize-themes-section { 1867 display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ 1868 overflow: hidden; 1869 } 1870 1871 .customize-themes-full-container .customize-themes-section.current-section { 1872 display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ 1873 } 1874 1875 .control-section .customize-section-text-before { 1876 padding: 0 0 8px 15px; 1877 margin: 15px 0 0 0; 1878 line-height: 16px; 1879 border-bottom: 1px solid #dcdcde; 1880 color: #50575e; 1881 } 1882 1883 .control-panel-themes .customize-themes-section-title { 1884 width: 100%; 1885 background: #fff; 1886 box-shadow: none; 1887 outline: none; 1888 border-top: none; 1889 border-bottom: 1px solid #dcdcde; 1890 border-left: 4px solid #fff; 1891 border-right: none; 1892 cursor: pointer; 1893 padding: 10px 15px; 1894 position: relative; 1895 text-align: left; 1896 font-size: 14px; 1897 font-weight: 600; 1898 color: #50575e; 1899 text-shadow: none; 1900 } 1901 1902 .control-panel-themes #accordion-section-installed_themes { 1903 border-top: 1px solid #dcdcde; 1904 } 1905 1906 .control-panel-themes .theme-section { 1907 margin: 0; 1908 position: relative; 1909 } 1910 1911 .control-panel-themes .customize-themes-section-title:focus, 1912 .control-panel-themes .customize-themes-section-title:hover { 1913 border-left-color: #2271b1; 1914 color: #2271b1; 1915 background: #f6f7f7; 1916 } 1917 1918 .customize-themes-section-title:not(.selected):after { 1919 content: ""; 1920 display: block; 1921 position: absolute; 1922 top: 9px; 1923 right: 15px; 1924 width: 18px; 1925 height: 18px; 1926 border-radius: 100%; 1927 border: 1px solid #c3c4c7; 1928 background: #fff; 1929 } 1930 1931 .control-panel-themes .theme-section .customize-themes-section-title.selected:after { 1932 content: "\f147"; 1933 font: 16px/1 dashicons; 1934 box-sizing: border-box; 1935 width: 20px; 1936 height: 20px; 1937 padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */ 1938 border-radius: 100%; 1939 position: absolute; 1940 top: 9px; 1941 right: 15px; 1942 background: #2271b1; 1943 color: #fff; 1944 } 1945 1946 .control-panel-themes .customize-themes-section-title.selected { 1947 color: #2271b1; 1948 } 1949 1950 #customize-theme-controls .themes.accordion-section-content { 1951 position: relative; 1952 left: 0; 1953 padding: 0; 1954 width: 100%; 1955 } 1956 1957 .loading .customize-themes-section .spinner { 1958 display: block; 1959 visibility: visible; 1960 position: relative; 1961 clear: both; 1962 width: 20px; 1963 height: 20px; 1964 left: calc(50% - 10px); 1965 float: none; 1966 margin-top: 50px; 1967 } 1968 1969 .customize-themes-section .no-themes, 1970 .customize-themes-section .no-themes-local { 1971 display: none; 1972 } 1973 1974 .themes-section-installed_themes .theme .notice-success:not(.updated-message) { 1975 display: none; /* Hide "installed" notice on installed themes tab. */ 1976 } 1977 1978 .customize-control-theme .theme { 1979 width: 100%; 1980 margin: 0; 1981 border: 1px solid #dcdcde; 1982 background: #fff; 1983 } 1984 1985 .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions { 1986 background: #fff; 1987 border: none; 1988 } 1989 1990 .customize-control.customize-control-theme { /* override most properties on .customize-control */ 1991 box-sizing: border-box; 1992 width: 25%; 1993 max-width: 600px; /* Max. screenshot size / 2 */ 1994 margin: 0 25px 25px 0; 1995 padding: 0; 1996 clear: none; 1997 } 1998 1999 /* 5 columns above 2100px */ 2000 @media screen and (min-width: 2101px) { 2001 .customize-control.customize-control-theme { 2002 width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */ 2003 } 2004 } 2005 2006 /* 4 columns up to 2100px */ 2007 @media screen and (min-width: 1601px) and (max-width: 2100px) { 2008 .customize-control.customize-control-theme { 2009 width: calc( ( 100% - 100px ) / 4 - 1px ); 2010 } 2011 } 2012 2013 /* 3 columns up to 1600px */ 2014 @media screen and (min-width: 1201px) and (max-width: 1600px) { 2015 .customize-control.customize-control-theme { 2016 width: calc( ( 100% - 75px ) / 3 - 1px ); 2017 } 2018 } 2019 2020 /* 2 columns up to 1200px */ 2021 @media screen and (min-width: 851px) and (max-width: 1200px) { 2022 .customize-control.customize-control-theme { 2023 width: calc( ( 100% - 50px ) / 2 - 1px ); 2024 2025 } 2026 } 2027 2028 /* 1 column up to 850 px */ 2029 @media screen and (max-width: 850px) { 2030 .customize-control.customize-control-theme { 2031 width: 100%; 2032 } 2033 } 2034 2035 .wp-customizer .theme-browser .themes { 2036 padding: 0 0 25px 25px; 2037 transition: .18s margin-top linear; 2038 } 2039 2040 .wp-customizer .theme-browser .theme .theme-actions { 2041 opacity: 1; 2042 } 2043 2044 #customize-controls h3.theme-name { 2045 font-size: 15px; 2046 } 2047 2048 #customize-controls .theme-overlay .theme-name { 2049 font-size: 32px; 2050 } 2051 2052 .customize-preview-header.themes-filter-bar { 2053 position: fixed; 2054 top: 0; 2055 left: 300px; 2056 width: calc(100% - 300px); 2057 height: 46px; 2058 background: #f0f0f1; 2059 z-index: 10; 2060 padding: 6px 25px; 2061 box-sizing: border-box; 2062 border-bottom: 1px solid #dcdcde; 2063 } 2064 2065 @media screen and (min-width: 1670px) { 2066 .customize-preview-header.themes-filter-bar { 2067 width: 82%; 2068 right: 0; 2069 left: initial; 2070 } 2071 } 2072 2073 .themes-filter-bar .themes-filter-container { 2074 margin: 0; 2075 padding: 0; 2076 } 2077 2078 .themes-filter-bar .wp-filter-search { 2079 line-height: 1.8; 2080 padding: 6px 10px 6px 30px; 2081 max-width: 100%; 2082 width: 40%; 2083 min-width: 300px; 2084 position: absolute; 2085 top: 6px; 2086 left: 25px; 2087 height: 32px; 2088 margin: 1px 0; 2089 } 2090 2091 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the 2092 current length of .org feature filters assuming translations do not wrap lines. */ 2093 @media screen and (max-height: 540px), screen and (max-width: 1018px) { 2094 .customize-preview-header.themes-filter-bar { 2095 position: relative; 2096 left: 0; 2097 width: 100%; 2098 margin: 0 0 25px 0; 2099 } 2100 .filter-drawer { 2101 top: 46px; 2102 } 2103 .wp-customizer .theme-browser .themes { 2104 padding: 0 0 25px 25px; 2105 overflow: hidden; 2106 } 2107 2108 .control-panel-themes .customize-themes-full-container { 2109 margin-top: 0; 2110 padding: 0; 2111 height: 100%; 2112 width: calc(100% - 300px); 2113 } 2114 } 2115 2116 @media screen and (max-width: 1018px) { 2117 .filter-drawer .filter-group { 2118 width: calc( (100% - 50px) / 2); 2119 } 2120 } 2121 2122 @media screen and (max-width: 900px) { 2123 .customize-preview-header.themes-filter-bar { 2124 height: 86px; 2125 padding-top: 46px; 2126 } 2127 2128 .themes-filter-bar .wp-filter-search { 2129 width: calc(100% - 50px); 2130 margin: 0; 2131 min-width: 200px; 2132 } 2133 2134 .filter-drawer { 2135 top: 86px; 2136 } 2137 2138 .control-panel-themes .filter-themes-count { 2139 float: left; 2140 } 2141 } 2142 2143 @media screen and (max-width: 792px) { 2144 .filter-drawer .filter-group { 2145 width: calc( 100% - 25px); 2146 } 2147 } 2148 2149 .control-panel-themes .customize-themes-mobile-back { 2150 display: none; 2151 } 2152 2153 /* Mobile - toggle between themes and filters */ 2154 @media screen and (max-width: 600px) { 2155 2156 .filter-drawer { 2157 top: 132px; 2158 } 2159 2160 .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes { 2161 display: block; 2162 float: right; 2163 } 2164 2165 .control-panel-themes .customize-themes-full-container { 2166 width: 100%; 2167 margin: 0; 2168 padding-top: 46px; 2169 height: calc(100% - 46px); 2170 z-index: 1; 2171 display: none; 2172 } 2173 2174 .showing-themes .control-panel-themes .customize-themes-full-container { 2175 display: block; 2176 } 2177 2178 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back { 2179 display: block; 2180 position: fixed; 2181 top: 0; 2182 left: 0; 2183 background: #f0f0f1; 2184 color: #3c434a; 2185 border-radius: 0; 2186 box-shadow: none; 2187 border: none; 2188 height: 46px; 2189 width: 100%; 2190 z-index: 10; 2191 text-align: left; 2192 text-shadow: none; 2193 border-bottom: 1px solid #dcdcde; 2194 border-left: 4px solid transparent; 2195 margin: 0; 2196 padding: 0; 2197 font-size: 0; 2198 overflow: hidden; 2199 } 2200 2201 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before { 2202 left: 0; 2203 top: 0; 2204 height: 46px; 2205 width: 26px; 2206 display: block; 2207 line-height: 2.3; 2208 padding: 0 8px 0 8px; 2209 border-right: 1px solid #dcdcde; 2210 } 2211 2212 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover, 2213 .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus { 2214 color: #2271b1; 2215 background: #f6f7f7; 2216 border-left-color: #2271b1; 2217 box-shadow: none; 2218 /* Only visible in Windows High Contrast mode */ 2219 outline: 2px solid transparent; 2220 outline-offset: -2px; 2221 } 2222 2223 .showing-themes #customize-header-actions { 2224 display: none; 2225 } 2226 2227 #customize-controls { 2228 width: 100%; 2229 } 2230 } 2231 2232 /* Details View */ 2233 .wp-customizer .theme-overlay { 2234 display: none; 2235 } 2236 2237 .wp-customizer.modal-open .theme-overlay { 2238 position: fixed; 2239 left: 0; 2240 top: 0; 2241 right: 0; 2242 bottom: 0; 2243 z-index: 109; 2244 } 2245 2246 /* Avoid a z-index war by resetting elements that should be under the overlay. 2247 This is likely required because of the way that sections and panels are positioned. */ 2248 .wp-customizer.modal-open #customize-header-actions, 2249 .wp-customizer.modal-open .control-panel-themes .filter-themes-count, 2250 .wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after { 2251 z-index: -1; 2252 } 2253 2254 .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content { 2255 overflow: visible; 2256 } 2257 2258 .wp-customizer .theme-overlay .theme-backdrop { 2259 background: rgba(240, 240, 241, 0.75); 2260 position: fixed; 2261 z-index: 110; 2262 } 2263 2264 .wp-customizer .theme-overlay .star-rating { 2265 float: left; 2266 margin-right: 8px; 2267 } 2268 2269 .wp-customizer .theme-rating .num-ratings { 2270 line-height: 20px; 2271 } 2272 2273 .wp-customizer .theme-overlay .theme-wrap { 2274 left: 90px; 2275 right: 90px; 2276 top: 45px; 2277 bottom: 45px; 2278 z-index: 120; 2279 } 2280 2281 .wp-customizer .theme-overlay .theme-actions { 2282 text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */ 2283 padding: 10px 25px; 2284 background: #f0f0f1; 2285 border-top: 1px solid #dcdcde; 2286 } 2287 2288 .wp-customizer .theme-overlay .theme-actions .theme-install.preview { 2289 margin-left: 8px; 2290 } 2291 2292 .control-panel-themes .theme-actions .delete-theme { 2293 left: 15px; /* these override themes.css on mobile */ 2294 right: auto; 2295 bottom: auto; 2296 position: absolute; 2297 } 2298 2299 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { 2300 overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ 2301 } 2302 2303 .wp-customizer .theme-header { 2304 background: #f0f0f1; 2305 } 2306 2307 .wp-customizer .theme-overlay .theme-header button, 2308 .wp-customizer .theme-overlay .theme-header .close:before { 2309 color: #3c434a; 2310 } 2311 2312 .wp-customizer .theme-overlay .theme-header .close:focus, 2313 .wp-customizer .theme-overlay .theme-header .close:hover, 2314 .wp-customizer .theme-overlay .theme-header .right:focus, 2315 .wp-customizer .theme-overlay .theme-header .right:hover, 2316 .wp-customizer .theme-overlay .theme-header .left:focus, 2317 .wp-customizer .theme-overlay .theme-header .left:hover { 2318 background: #fff; 2319 border-bottom: 4px solid #2271b1; 2320 color: #2271b1; 2321 } 2322 2323 .wp-customizer .theme-overlay .theme-header .close:focus:before, 2324 .wp-customizer .theme-overlay .theme-header .close:hover:before { 2325 color: #2271b1; 2326 } 2327 2328 .wp-customizer .theme-overlay .theme-header button.disabled, 2329 .wp-customizer .theme-overlay .theme-header button.disabled:hover, 2330 .wp-customizer .theme-overlay .theme-header button.disabled:focus { 2331 border-bottom: none; 2332 background: transparent; 2333 color: #c3c4c7; 2334 } 2335 2336 /* Small Screens */ 2337 @media (max-width: 850px), (max-height: 472px) { 2338 .wp-customizer .theme-overlay .theme-wrap { 2339 left: 0; 2340 right: 0; 2341 top: 0; 2342 bottom: 0; 2343 } 2344 2345 .wp-customizer .theme-browser .themes { 2346 padding-right: 25px; 2347 } 2348 } 2349 2350 /* Handle cheaters. */ 2351 body.cheatin { 2352 font-size: medium; 2353 height: auto; 2354 background: #fff; 2355 border: 1px solid #c3c4c7; 2356 margin: 50px auto 2em; 2357 padding: 1em 2em; 2358 max-width: 700px; 2359 min-width: 0; 2360 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); 2361 } 2362 2363 body.cheatin h1 { 2364 border-bottom: 1px solid #dcdcde; 2365 clear: both; 2366 color: #50575e; 2367 font-size: 24px; 2368 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2369 margin: 30px 0 0 0; 2370 padding: 0 0 7px; 2371 } 2372 2373 body.cheatin p { 2374 font-size: 14px; 2375 line-height: 1.5; 2376 margin: 25px 0 20px; 2377 } 2378 2379 /** 2380 * Widgets and Menus common styles 2381 */ 2382 2383 /* higher specificity than .wp-core-ui .button */ 2384 #customize-theme-controls .add-new-widget, 2385 #customize-theme-controls .add-new-menu-item { 2386 cursor: pointer; 2387 float: right; 2388 margin: 0 0 0 10px; 2389 transition: all 0.2s; 2390 -webkit-user-select: none; 2391 user-select: none; 2392 outline: none; 2393 } 2394 2395 .reordering .add-new-widget, 2396 .reordering .add-new-menu-item { 2397 opacity: 0.2; 2398 pointer-events: none; 2399 cursor: not-allowed; /* doesn't work in conjunction with pointer-events */ 2400 } 2401 2402 .add-new-widget:before, 2403 .add-new-menu-item:before, 2404 #available-menu-items .new-content-item .add-content:before { 2405 content: "\f132"; 2406 display: inline-block; 2407 position: relative; 2408 left: -2px; 2409 top: 0; 2410 font: normal 20px/1 dashicons; 2411 vertical-align: middle; 2412 transition: all 0.2s; 2413 -webkit-font-smoothing: antialiased; 2414 -moz-osx-font-smoothing: grayscale; 2415 } 2416 2417 /* Reordering */ 2418 .reorder-toggle { 2419 float: right; 2420 padding: 5px 8px; 2421 text-decoration: none; 2422 cursor: pointer; 2423 outline: none; 2424 } 2425 2426 .reorder, 2427 .reordering .reorder-done { 2428 display: block; 2429 padding: 5px 8px; 2430 } 2431 2432 .reorder-done, 2433 .reordering .reorder { 2434 display: none; 2435 } 2436 2437 .widget-reorder-nav span, 2438 .menu-item-reorder-nav button { 2439 position: relative; 2440 overflow: hidden; 2441 float: left; 2442 display: block; 2443 width: 33px; /* was 42px for mobile */ 2444 height: 43px; 2445 color: #8c8f94; 2446 text-indent: -9999px; 2447 cursor: pointer; 2448 outline: none; 2449 } 2450 2451 .menu-item-reorder-nav button { 2452 width: 30px; 2453 height: 40px; 2454 background: transparent; 2455 border: none; 2456 box-shadow: none; 2457 } 2458 2459 .widget-reorder-nav span:before, 2460 .menu-item-reorder-nav button:before { 2461 display: inline-block; 2462 position: absolute; 2463 top: 0; 2464 right: 0; 2465 width: 100%; 2466 height: 100%; 2467 font: normal 20px/43px dashicons; 2468 text-align: center; 2469 text-indent: 0; 2470 -webkit-font-smoothing: antialiased; 2471 -moz-osx-font-smoothing: grayscale; 2472 } 2473 2474 .widget-reorder-nav span:hover, 2475 .widget-reorder-nav span:focus, 2476 .menu-item-reorder-nav button:hover, 2477 .menu-item-reorder-nav button:focus { 2478 color: #1d2327; 2479 background: #f0f0f1; 2480 } 2481 2482 .move-widget-down:before, 2483 .menus-move-down:before { 2484 content: "\f347"; 2485 } 2486 2487 .move-widget-up:before, 2488 .menus-move-up:before { 2489 content: "\f343"; 2490 } 2491 2492 #customize-theme-controls .first-widget .move-widget-up, 2493 #customize-theme-controls .last-widget .move-widget-down, 2494 .move-up-disabled .menus-move-up, 2495 .move-down-disabled .menus-move-down, 2496 .move-right-disabled .menus-move-right, 2497 .move-left-disabled .menus-move-left { 2498 color: #dcdcde; 2499 background-color: #fff; 2500 cursor: default; 2501 pointer-events: none; 2502 } 2503 2504 /** 2505 * New widget and Add-menu-items modes and panels 2506 */ 2507 2508 .wp-full-overlay-main { 2509 right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ 2510 width: 100%; 2511 } 2512 2513 body.adding-widget .add-new-widget, 2514 body.adding-widget .add-new-widget:hover, 2515 .adding-menu-items .add-new-menu-item, 2516 .adding-menu-items .add-new-menu-item:hover, 2517 .add-menu-toggle.open, 2518 .add-menu-toggle.open:hover { 2519 background: #f0f0f1; 2520 border-color: #8c8f94; 2521 color: #2c3338; 2522 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); 2523 } 2524 2525 body.adding-widget .add-new-widget:before, 2526 .adding-menu-items .add-new-menu-item:before, 2527 #accordion-section-add_menu .add-new-menu-item.open:before { 2528 transform: rotate(45deg); 2529 } 2530 2531 #available-widgets, 2532 #available-menu-items { 2533 position: absolute; 2534 top: 0; 2535 bottom: 0; 2536 left: -301px; 2537 visibility: hidden; 2538 overflow-x: hidden; 2539 overflow-y: auto; 2540 width: 300px; 2541 margin: 0; 2542 z-index: 4; 2543 background: #f0f0f1; 2544 transition: left .18s; 2545 border-right: 1px solid #dcdcde; 2546 } 2547 2548 #available-widgets .customize-section-title, 2549 #available-menu-items .customize-section-title { 2550 display: none; 2551 } 2552 2553 #available-widgets-list { 2554 top: 60px; 2555 position: absolute; 2556 overflow: auto; 2557 bottom: 0; 2558 width: 100%; 2559 border-top: 1px solid #dcdcde; 2560 } 2561 2562 .no-widgets-found #available-widgets-list { 2563 border-top: none; 2564 } 2565 2566 #available-widgets-filter { 2567 position: fixed; 2568 top: 0; 2569 z-index: 1; 2570 width: 300px; 2571 background: #f0f0f1; 2572 } 2573 2574 /* search field container */ 2575 #available-widgets-filter, 2576 #available-menu-items-search .accordion-section-title { 2577 padding: 13px 15px; 2578 box-sizing: border-box; 2579 } 2580 2581 #available-widgets-filter input, 2582 #available-menu-items-search input { 2583 width: 100%; 2584 min-height: 32px; 2585 margin: 1px 0; 2586 padding: 0 30px; 2587 } 2588 2589 #available-widgets-filter input::-ms-clear, 2590 #available-menu-items-search input::-ms-clear { 2591 display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */ 2592 } 2593 2594 #available-menu-items-search .search-icon, 2595 #available-widgets-filter .search-icon { 2596 display: block; 2597 position: absolute; 2598 top: 15px; /* 13 container padding +1 input margin +1 input border */ 2599 left: 16px; 2600 width: 30px; 2601 height: 30px; 2602 line-height: 2.1; 2603 text-align: center; 2604 color: #646970; 2605 } 2606 2607 #available-widgets-filter .clear-results, 2608 #available-menu-items-search .clear-results { 2609 position: absolute; 2610 top: 15px; /* 13 container padding +1 input margin +1 input border */ 2611 right: 16px; 2612 width: 30px; 2613 height: 30px; 2614 padding: 0; 2615 border: 0; 2616 cursor: pointer; 2617 background: none; 2618 color: #d63638; 2619 text-decoration: none; 2620 outline: 0; 2621 } 2622 2623 #available-widgets-filter .clear-results, 2624 #available-menu-items-search .clear-results, 2625 #available-menu-items-search.loading .clear-results.is-visible { 2626 display: none; 2627 } 2628 2629 #available-widgets-filter .clear-results.is-visible, 2630 #available-menu-items-search .clear-results.is-visible { 2631 display: block; 2632 } 2633 2634 #available-widgets-filter .clear-results:before, 2635 #available-menu-items-search .clear-results:before { 2636 content: "\f335"; 2637 font: normal 20px/1 dashicons; 2638 vertical-align: middle; 2639 -webkit-font-smoothing: antialiased; 2640 -moz-osx-font-smoothing: grayscale; 2641 } 2642 2643 #available-widgets-filter .clear-results:hover, 2644 #available-widgets-filter .clear-results:focus, 2645 #available-menu-items-search .clear-results:hover, 2646 #available-menu-items-search .clear-results:focus { 2647 color: #d63638; 2648 } 2649 2650 #available-widgets-filter .clear-results:focus, 2651 #available-menu-items-search .clear-results:focus { 2652 box-shadow: 2653 0 0 0 1px #4f94d4, 2654 0 0 2px 1px rgba(79, 148, 212, 0.8); 2655 } 2656 2657 #available-menu-items-search .search-icon:after, 2658 #available-widgets-filter .search-icon:after, 2659 .themes-filter-bar .search-icon:after { 2660 content: "\f179"; 2661 font: normal 20px/1 dashicons; 2662 vertical-align: middle; 2663 -webkit-font-smoothing: antialiased; 2664 -moz-osx-font-smoothing: grayscale; 2665 } 2666 2667 .themes-filter-bar .search-icon { 2668 position: absolute; 2669 top: 7px; 2670 left: 26px; 2671 z-index: 1; 2672 color: #646970; 2673 height: 30px; 2674 width: 30px; 2675 line-height: 2; 2676 text-align: center; 2677 } 2678 2679 .no-widgets-found-message { 2680 display: none; 2681 margin: 0; 2682 padding: 0 15px; 2683 line-height: inherit; 2684 } 2685 2686 .no-widgets-found .no-widgets-found-message { 2687 display: block; 2688 } 2689 2690 #available-widgets .widget-top, 2691 #available-widgets .widget-top:hover, 2692 #available-menu-items .item-top, 2693 #available-menu-items .item-top:hover { 2694 border: none; 2695 background: transparent; 2696 box-shadow: none; 2697 } 2698 2699 #available-widgets .widget-tpl, 2700 #available-menu-items .item-tpl { 2701 position: relative; 2702 padding: 15px 15px 15px 60px; 2703 background: #fff; 2704 border-bottom: 1px solid #dcdcde; 2705 border-left: 4px solid #fff; 2706 transition: 2707 .15s color ease-in-out, 2708 .15s background-color ease-in-out, 2709 .15s border-color ease-in-out; 2710 cursor: pointer; 2711 display: none; 2712 } 2713 2714 #available-widgets .widget, 2715 #available-menu-items .item { 2716 position: static; 2717 } 2718 2719 2720 /* Responsive */ 2721 .customize-controls-preview-toggle { 2722 display: none; 2723 } 2724 2725 @media only screen and (max-width: 782px) { 2726 .wp-customizer .theme:not(.active):hover .theme-actions, 2727 .wp-customizer .theme:not(.active):focus .theme-actions { 2728 display: block; 2729 } 2730 2731 .wp-customizer .theme-browser .theme.active .theme-name span { 2732 display: inline; 2733 } 2734 2735 .customize-control-header button.random .dice { 2736 margin-top: 0; 2737 } 2738 2739 .customize-control-radio .customize-inside-control-row, 2740 .customize-control-checkbox .customize-inside-control-row, 2741 .customize-control-nav_menu_auto_add .customize-inside-control-row { 2742 margin-left: 32px; 2743 } 2744 2745 .customize-control-radio input, 2746 .customize-control-checkbox input, 2747 .customize-control-nav_menu_auto_add input { 2748 margin-left: -32px; 2749 } 2750 2751 .customize-control input[type="radio"] + label + br, 2752 .customize-control input[type="checkbox"] + label + br { 2753 line-height: 2.5; /* For widgets checkboxes */ 2754 } 2755 2756 .customize-control .date-time-fields select { 2757 height: 39px; 2758 } 2759 2760 .date-time-fields .date-input.month { 2761 width: 79px; 2762 } 2763 2764 .date-time-fields .date-input.day, 2765 .date-time-fields .date-input.hour, 2766 .date-time-fields .date-input.minute { 2767 width: 55px; 2768 } 2769 2770 .date-time-fields .date-input.year { 2771 width: 80px; 2772 } 2773 2774 #customize-control-changeset_preview_link a { 2775 bottom: 16px; 2776 } 2777 2778 .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { 2779 bottom: 10px; 2780 } 2781 2782 .media-widget-control .media-widget-buttons .button.edit-media, 2783 .media-widget-control .media-widget-buttons .button.change-media, 2784 .media-widget-control .media-widget-buttons .button.select-media { 2785 margin-top: 12px; 2786 } 2787 2788 .wp-core-ui .themes-filter-bar .feature-filter-toggle { 2789 margin: 3px 0 3px 25px; 2790 } 2791 } 2792 2793 @media screen and (max-width: 1200px) { 2794 .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, 2795 .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, 2796 .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { 2797 left: 67%; 2798 } 2799 } 2800 2801 @media screen and (max-width: 640px) { 2802 2803 /* when the sidebar is collapsed and switching to responsive view, 2804 bring it back see ticket #35220 */ 2805 .wp-full-overlay.collapsed #customize-controls { 2806 margin-left: 0; 2807 } 2808 2809 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { 2810 bottom: 0; 2811 } 2812 2813 .customize-controls-preview-toggle { 2814 display: block; 2815 position: absolute; 2816 top: 0; 2817 left: 48px; 2818 line-height: 2.6; 2819 font-size: 14px; 2820 padding: 0 12px 4px; 2821 margin: 0; 2822 height: 45px; 2823 background: #f0f0f1; 2824 border: 0; 2825 border-right: 1px solid #dcdcde; 2826 border-top: 4px solid #f0f0f1; 2827 color: #50575e; 2828 cursor: pointer; 2829 transition: color .1s ease-in-out, background .1s ease-in-out; 2830 } 2831 2832 #customize-footer-actions, 2833 /*#customize-preview,*/ 2834 .customize-controls-preview-toggle .controls, 2835 .preview-only .wp-full-overlay-sidebar-content, 2836 .preview-only .customize-controls-preview-toggle .preview { 2837 display: none; 2838 } 2839 2840 .preview-only #customize-save-button-wrapper { 2841 margin-top: -46px; 2842 } 2843 2844 .customize-controls-preview-toggle .preview:before, 2845 .customize-controls-preview-toggle .controls:before { 2846 font: normal 20px/1 dashicons; 2847 content: "\f177"; 2848 position: relative; 2849 top: 4px; 2850 margin-right: 6px; 2851 } 2852 2853 .customize-controls-preview-toggle .controls:before { 2854 content: "\f540"; 2855 } 2856 2857 .preview-only #customize-controls { 2858 height: 45px; 2859 } 2860 2861 .preview-only #customize-preview, 2862 .preview-only .customize-controls-preview-toggle .controls { 2863 display: block; 2864 } 2865 2866 .wp-core-ui.wp-customizer .button { 2867 min-height: 30px; 2868 padding: 0 14px; 2869 line-height: 2; 2870 font-size: 14px; 2871 vertical-align: middle; 2872 } 2873 2874 #customize-control-changeset_status .customize-inside-control-row { 2875 padding-top: 15px; 2876 } 2877 2878 body.adding-widget div#available-widgets, 2879 body.adding-menu-items div#available-menu-items, 2880 body.outer-section-open div#customize-sidebar-outer-content { 2881 width: 100%; 2882 } 2883 2884 #available-widgets .customize-section-title, 2885 #available-menu-items .customize-section-title { 2886 display: block; 2887 margin: 0; 2888 } 2889 2890 #available-widgets .customize-section-back, 2891 #available-menu-items .customize-section-back { 2892 height: 69px; 2893 } 2894 2895 #available-widgets .customize-section-title h3, 2896 #available-menu-items .customize-section-title h3 { 2897 font-size: 20px; 2898 font-weight: 200; 2899 padding: 9px 10px 12px 14px; 2900 margin: 0; 2901 line-height: 24px; 2902 color: #50575e; 2903 display: block; 2904 overflow: hidden; 2905 white-space: nowrap; 2906 text-overflow: ellipsis; 2907 } 2908 2909 #available-widgets .customize-section-title .customize-action, 2910 #available-menu-items .customize-section-title .customize-action { 2911 font-size: 13px; 2912 display: block; 2913 font-weight: 400; 2914 overflow: hidden; 2915 white-space: nowrap; 2916 text-overflow: ellipsis; 2917 } 2918 2919 #available-widgets-filter { 2920 position: relative; 2921 width: 100%; 2922 height: auto; 2923 } 2924 2925 #available-widgets-list { 2926 top: 130px; 2927 } 2928 2929 #available-menu-items-search .clear-results, 2930 #available-menu-items-search .search-icon { 2931 top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */ 2932 } 2933 2934 .reorder, 2935 .reordering .reorder-done { 2936 padding: 8px; 2937 } 2938 2939 .wp-core-ui .themes-filter-bar .feature-filter-toggle { 2940 margin: 0; 2941 } 2942 } 2943 2944 @media screen and (max-width: 600px) { 2945 .wp-full-overlay.expanded { 2946 margin-left: 0; 2947 } 2948 2949 body.adding-widget div#available-widgets, 2950 body.adding-menu-items div#available-menu-items, 2951 body.outer-section-open div#customize-sidebar-outer-content { 2952 top: 46px; 2953 z-index: 10; 2954 } 2955 2956 body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content { 2957 left: -100%; 2958 } 2959 2960 body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { 2961 left: 0; 2962 } 2963 }