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