themes.css (41178B)
1 /*------------------------------------------------------------------------------ 2 16.0 - Themes 3 ------------------------------------------------------------------------------*/ 4 5 6 /*------------------------------------------------------------------------------ 7 16.1 - Manage Themes 8 ------------------------------------------------------------------------------*/ 9 10 body.js .theme-browser.search-loading { 11 display: none; 12 } 13 14 .theme-browser .themes { 15 clear: both; 16 } 17 18 .themes-php:not(.network-admin) .wrap h1 { 19 margin-bottom: 15px; 20 } 21 22 .themes-php .wrap h1 .button { 23 margin-left: 20px; 24 } 25 26 /* Search form */ 27 .themes-php .search-form { 28 display: inline; 29 } 30 31 .themes-php .wp-filter-search { 32 position: relative; 33 top: -2px; 34 left: 20px; 35 margin: 0; 36 width: 280px; 37 } 38 39 /* Position admin messages */ 40 .theme .notice, 41 .theme .notice.is-dismissible { 42 left: 0; 43 margin: 0; 44 position: absolute; 45 right: 0; 46 top: 0; 47 } 48 49 /** 50 * Main theme element 51 * (has flexible margins) 52 */ 53 .theme-browser .theme { 54 cursor: pointer; 55 float: left; 56 margin: 0 4% 4% 0; 57 position: relative; 58 width: 30.6%; 59 border: 1px solid #dcdcde; 60 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); 61 box-sizing: border-box; 62 } 63 64 .theme-browser .theme:nth-child(3n) { 65 margin-right: 0; 66 } 67 68 .theme-browser .theme:hover, 69 .theme-browser .theme.focus { 70 cursor: pointer; 71 } 72 73 .theme-browser .theme .theme-name { 74 font-size: 15px; 75 font-weight: 600; 76 height: 18px; 77 margin: 0; 78 padding: 15px; 79 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); 80 overflow: hidden; 81 white-space: nowrap; 82 text-overflow: ellipsis; 83 background: #fff; 84 background: rgba(255, 255, 255, 0.65); 85 } 86 87 /* Activate and Customize buttons, shown on hover and focus */ 88 .theme-browser .theme .theme-actions { 89 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 90 opacity: 0; 91 transition: opacity 0.1s ease-in-out; 92 height: auto; 93 background: rgba(246, 247, 247, 0.7); 94 border-left: 1px solid rgba(0, 0, 0, 0.05); 95 } 96 97 .theme-browser .theme:hover .theme-actions, 98 .theme-browser .theme.focus .theme-actions { 99 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 100 opacity: 1; 101 } 102 103 .theme-browser .theme .theme-actions .button-primary { 104 margin-right: 3px; 105 } 106 107 .theme-browser .theme .theme-actions .button { 108 float: none; 109 margin-left: 3px; 110 } 111 112 /** 113 * Theme Screenshot 114 * 115 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size 116 * It is also responsive. 117 */ 118 .theme-browser .theme .theme-screenshot { 119 display: block; 120 overflow: hidden; 121 position: relative; 122 -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ 123 transition: opacity 0.2s ease-in-out; 124 } 125 126 .theme-browser .theme .theme-screenshot:after { 127 content: ""; 128 display: block; 129 padding-top: 66.66666%; /* using a 3/2 aspect ratio */ 130 } 131 132 .theme-browser .theme .theme-screenshot img { 133 height: auto; 134 position: absolute; 135 left: 0; 136 top: 0; 137 width: 100%; 138 transition: opacity 0.2s ease-in-out; 139 } 140 141 .theme-browser .theme:hover .theme-screenshot, 142 .theme-browser .theme.focus .theme-screenshot { 143 background: #fff; 144 } 145 146 .theme-browser.rendered .theme:hover .theme-screenshot img, 147 .theme-browser.rendered .theme.focus .theme-screenshot img { 148 opacity: 0.4; 149 } 150 151 .theme-browser .theme .more-details { 152 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 153 opacity: 0; 154 position: absolute; 155 top: 35%; 156 right: 20%; 157 left: 20%; 158 width: 60%; 159 background: #1d2327; 160 background: rgba(0, 0, 0, 0.7); 161 color: #fff; 162 font-size: 15px; 163 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); 164 -webkit-font-smoothing: antialiased; 165 font-weight: 600; 166 padding: 15px 12px; 167 text-align: center; 168 border-radius: 3px; 169 border: none; 170 transition: opacity 0.1s ease-in-out; 171 } 172 173 .theme-browser .theme .more-details:focus { 174 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1; 175 } 176 177 .theme-browser .theme.focus { 178 border-color: #4f94d4; 179 box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); 180 } 181 182 .theme-browser .theme.focus .more-details { 183 opacity: 1; 184 } 185 186 /* Current theme needs to have its action always on view */ 187 .theme-browser .theme.active.focus .theme-actions { 188 display: block; 189 } 190 191 .theme-browser.rendered .theme:hover .more-details, 192 .theme-browser.rendered .theme.focus .more-details { 193 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 194 opacity: 1; 195 } 196 197 /** 198 * The currently active theme 199 */ 200 .theme-browser .theme.active .theme-name { 201 background: #1d2327; 202 color: #fff; 203 padding-right: 110px; 204 font-weight: 300; 205 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); 206 } 207 208 .theme-browser .customize-control .theme.active .theme-name { 209 padding-right: 15px; 210 } 211 212 .theme-browser .theme.active .theme-name span { 213 font-weight: 600; 214 } 215 216 .theme-browser .theme.active .theme-actions { 217 background: rgba(44, 51, 56, 0.7); 218 border-left: none; 219 opacity: 1; 220 } 221 222 .theme-id-container { 223 position: relative; 224 } 225 226 .theme-browser .theme.active .theme-actions, 227 .theme-browser .theme .theme-actions { 228 position: absolute; 229 top: 50%; 230 transform: translateY(-50%); 231 right: 0; 232 padding: 9px 15px; 233 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); 234 } 235 236 .theme-browser .theme.active .theme-actions .button-primary { 237 margin-right: 0; 238 } 239 240 .theme-browser .theme .theme-author { 241 background: #1d2327; 242 color: #f0f0f1; 243 display: none; 244 font-size: 14px; 245 margin: 0 10px; 246 padding: 5px 10px; 247 position: absolute; 248 bottom: 56px; 249 } 250 251 .theme-browser .theme.display-author .theme-author { 252 display: block; 253 } 254 255 .theme-browser .theme.display-author .theme-author a { 256 color: inherit; 257 } 258 259 /** 260 * Add new theme 261 */ 262 .theme-browser .theme.add-new-theme { 263 border: none; 264 box-shadow: none; 265 } 266 267 .theme-browser .theme.add-new-theme a { 268 text-decoration: none; 269 display: block; 270 position: relative; 271 z-index: 1; 272 } 273 274 .theme-browser .theme.add-new-theme a:after { 275 display: block; 276 content: ""; 277 background: transparent; 278 background: rgba(0, 0, 0, 0); 279 position: absolute; 280 top: 0; 281 left: 0; 282 right: 0; 283 bottom: 0; 284 padding: 0; 285 text-shadow: none; 286 border: 5px dashed #dcdcde; 287 border: 5px dashed rgba(0, 0, 0, 0.1); 288 box-sizing: border-box; 289 } 290 291 .theme-browser .theme.add-new-theme span:after { 292 background: #dcdcde; 293 background: rgba(140, 143, 148, 0.1); 294 border-radius: 50%; 295 display: inline-block; 296 content: "\f132"; 297 -webkit-font-smoothing: antialiased; 298 font: normal 74px/115px dashicons; 299 width: 100px; 300 height: 100px; 301 vertical-align: middle; 302 text-align: center; 303 color: #8c8f94; 304 position: absolute; 305 top: 30%; 306 left: 50%; 307 margin-left: -50px; 308 text-indent: -4px; 309 padding: 0; 310 text-shadow: none; 311 z-index: 4; 312 } 313 314 .rtl .theme-browser .theme.add-new-theme span:after { 315 text-indent: 4px; 316 } 317 318 .theme-browser .theme.add-new-theme a:hover .theme-screenshot, 319 .theme-browser .theme.add-new-theme a:focus .theme-screenshot { 320 background: none; 321 } 322 323 .theme-browser .theme.add-new-theme a:hover span:after, 324 .theme-browser .theme.add-new-theme a:focus span:after { 325 background: #fff; 326 color: #2271b1; 327 } 328 329 .theme-browser .theme.add-new-theme a:hover:after, 330 .theme-browser .theme.add-new-theme a:focus:after { 331 border-color: transparent; 332 color: #fff; 333 background: #2271b1; 334 content: ""; 335 } 336 337 .theme-browser .theme.add-new-theme .theme-name { 338 background: none; 339 text-align: center; 340 box-shadow: none; 341 font-weight: 400; 342 position: relative; 343 top: 0; 344 margin-top: -18px; 345 padding-top: 0; 346 padding-bottom: 48px; 347 } 348 349 .theme-browser .theme.add-new-theme a:hover .theme-name, 350 .theme-browser .theme.add-new-theme a:focus .theme-name { 351 color: #fff; 352 z-index: 2; 353 } 354 355 /** 356 * Theme Overlay 357 * Shown when clicking a theme 358 */ 359 .theme-overlay .theme-backdrop { 360 position: absolute; 361 left: -20px; 362 right: 0; 363 top: 0; 364 bottom: 0; 365 background: #f0f0f1; 366 background: rgba(240, 240, 241, 0.9); 367 z-index: 10000; /* Over WP Pointers. */ 368 } 369 370 .theme-overlay .theme-header { 371 position: absolute; 372 top: 0; 373 left: 0; 374 right: 0; 375 height: 48px; 376 border-bottom: 1px solid #dcdcde; 377 } 378 379 .theme-overlay .theme-header button { 380 padding: 0; 381 } 382 383 .theme-overlay .theme-header .close { 384 cursor: pointer; 385 height: 48px; 386 width: 50px; 387 text-align: center; 388 float: right; 389 border: 0; 390 border-left: 1px solid #dcdcde; 391 background-color: transparent; 392 transition: color .1s ease-in-out, background .1s ease-in-out; 393 } 394 395 .theme-overlay .theme-header .close:before { 396 font: normal 22px/50px dashicons !important; 397 color: #787c82; 398 display: inline-block; 399 content: "\f335"; 400 font-weight: 300; 401 } 402 403 /* Left and right navigation */ 404 .theme-overlay .theme-header .right, 405 .theme-overlay .theme-header .left { 406 cursor: pointer; 407 color: #787c82; 408 background-color: transparent; 409 height: 48px; 410 width: 54px; 411 float: left; 412 text-align: center; 413 border: 0; 414 border-right: 1px solid #dcdcde; 415 transition: color .1s ease-in-out, background .1s ease-in-out; 416 } 417 418 .theme-overlay .theme-header .close:focus, 419 .theme-overlay .theme-header .close:hover, 420 .theme-overlay .theme-header .right:focus, 421 .theme-overlay .theme-header .right:hover, 422 .theme-overlay .theme-header .left:focus, 423 .theme-overlay .theme-header .left:hover { 424 background: #dcdcde; 425 border-color: #c3c4c7; 426 color: #000; 427 } 428 429 .theme-overlay .theme-header .close:focus:before, 430 .theme-overlay .theme-header .close:hover:before { 431 color: #000; 432 } 433 434 .theme-overlay .theme-header .close:focus, 435 .theme-overlay .theme-header .right:focus, 436 .theme-overlay .theme-header .left:focus { 437 box-shadow: none; 438 outline: none; 439 } 440 441 .theme-overlay .theme-header .left.disabled, 442 .theme-overlay .theme-header .right.disabled, 443 .theme-overlay .theme-header .left.disabled:hover, 444 .theme-overlay .theme-header .right.disabled:hover { 445 color: #c3c4c7; 446 background: inherit; 447 cursor: inherit; 448 } 449 450 .theme-overlay .theme-header .right:before, 451 .theme-overlay .theme-header .left:before { 452 font: normal 20px/50px dashicons !important; 453 display: inline; 454 font-weight: 300; 455 } 456 457 .theme-overlay .theme-header .left:before { 458 content: "\f341"; 459 } 460 461 .theme-overlay .theme-header .right:before { 462 content: "\f345"; 463 } 464 465 .theme-overlay .theme-wrap { 466 clear: both; 467 position: fixed; 468 top: 9%; 469 left: 190px; 470 right: 30px; 471 bottom: 3%; 472 background: #fff; 473 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); 474 z-index: 10000; /* Over WP Pointers. */ 475 box-sizing: border-box; 476 -webkit-overflow-scrolling: touch; 477 } 478 479 body.folded .theme-browser ~ .theme-overlay .theme-wrap { 480 left: 70px; 481 } 482 483 .theme-overlay .theme-about { 484 position: absolute; 485 top: 49px; 486 bottom: 57px; 487 left: 0; 488 right: 0; 489 overflow: auto; 490 padding: 2% 4%; 491 } 492 493 .theme-overlay .theme-actions { 494 position: absolute; 495 text-align: center; 496 bottom: 0; 497 left: 0; 498 right: 0; 499 padding: 10px 25px 5px; 500 background: #f6f7f7; 501 z-index: 30; 502 box-sizing: border-box; 503 border-top: 1px solid #f0f0f1; 504 } 505 506 .theme-overlay .theme-actions a { 507 margin-right: 5px; 508 margin-bottom: 5px; 509 } 510 511 /* Hide-if-customize for items we can't add classes to */ 512 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], 513 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { 514 display: none; 515 } 516 517 .broken-themes a.delete-theme, 518 .theme-overlay .theme-actions .delete-theme { 519 color: #d63638; 520 text-decoration: none; 521 border-color: transparent; 522 box-shadow: none; 523 background: transparent; 524 } 525 526 .theme-overlay .theme-actions .delete-theme { 527 position: absolute; 528 right: 10px; 529 bottom: 5px; 530 } 531 532 .broken-themes a.delete-theme:hover, 533 .broken-themes a.delete-theme:focus, 534 .theme-overlay .theme-actions .delete-theme:hover, 535 .theme-overlay .theme-actions .delete-theme:focus { 536 background: #d63638; 537 color: #fff; 538 border-color: #d63638; 539 } 540 541 .theme-overlay .theme-actions .active-theme, 542 .theme-overlay.active .theme-actions .inactive-theme { 543 display: none; 544 } 545 546 .theme-overlay .theme-actions .inactive-theme, 547 .theme-overlay.active .theme-actions .active-theme { 548 display: block; 549 } 550 551 /** 552 * Theme Screenshots gallery 553 */ 554 .theme-overlay .theme-screenshots { 555 float: left; 556 margin: 0 30px 0 0; 557 width: 55%; 558 max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */ 559 text-align: center; 560 } 561 562 /* First screenshot, shown big */ 563 .theme-overlay .screenshot { 564 border: 1px solid #fff; 565 box-sizing: border-box; 566 overflow: hidden; 567 position: relative; 568 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); 569 } 570 571 .theme-overlay .screenshot:after { 572 content: ""; 573 display: block; 574 padding-top: 75%; /* using a 4/3 aspect ratio */ 575 } 576 577 .theme-overlay .screenshot img { 578 height: auto; 579 position: absolute; 580 left: 0; 581 top: 0; 582 width: 100%; 583 } 584 /* Handles old 300px screenshots */ 585 .theme-overlay.small-screenshot .theme-screenshots { 586 position: absolute; 587 width: 302px; 588 } 589 .theme-overlay.small-screenshot .theme-info { 590 margin-left: 350px; 591 width: auto; 592 } 593 594 /* Other screenshots, shown small and square */ 595 .theme-overlay .screenshot.thumb { 596 background: #c3c4c7; 597 border: 1px solid #f0f0f1; 598 float: none; 599 display: inline-block; 600 margin: 10px 5px 0; 601 width: 140px; 602 height: 80px; 603 cursor: pointer; 604 } 605 606 .theme-overlay .screenshot.thumb:after { 607 content: ""; 608 display: block; 609 padding-top: 100%; /* using a 1/1 aspect ratio */ 610 } 611 612 .theme-overlay .screenshot.thumb img { 613 cursor: pointer; 614 height: auto; 615 position: absolute; 616 left: 0; 617 top: 0; 618 width: 100%; 619 height: auto; 620 } 621 622 .theme-overlay .screenshot.selected { 623 background: transparent; 624 border: 2px solid #72aee6; 625 } 626 627 .theme-overlay .screenshot.selected img { 628 opacity: 0.8; 629 } 630 631 /* No screenshot placeholder */ 632 .theme-browser .theme .theme-screenshot.blank, 633 .theme-overlay .screenshot.blank { 634 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); 635 } 636 637 /** 638 * Theme heading information 639 */ 640 .theme-overlay .theme-info { 641 width: 40%; 642 float: left; 643 } 644 645 .theme-overlay .current-label { 646 background: #2c3338; 647 color: #fff; 648 font-size: 11px; 649 display: inline-block; 650 padding: 2px 8px; 651 border-radius: 2px; 652 margin: 0 0 -10px; 653 -webkit-user-select: none; 654 user-select: none; 655 } 656 657 .theme-overlay .theme-name { 658 color: #1d2327; 659 font-size: 32px; 660 font-weight: 100; 661 margin: 10px 0 0; 662 line-height: 1.3; 663 word-wrap: break-word; 664 overflow-wrap: break-word; 665 } 666 667 .theme-overlay .theme-version { 668 color: #646970; 669 font-size: 13px; 670 font-weight: 400; 671 float: none; 672 display: inline-block; 673 margin-left: 10px; 674 } 675 676 .theme-overlay .theme-author { 677 margin: 15px 0 25px; 678 color: #646970; 679 font-size: 16px; 680 font-weight: 400; 681 line-height: inherit; 682 } 683 684 .theme-overlay .toggle-auto-update { 685 /* Better align spin icon and text. */ 686 display: inline-flex; 687 align-items: center; 688 /* Prevents content after the auto-update toggler from jumping down and up. */ 689 min-height: 20px; /* Same height as the spinning dashicon. */ 690 vertical-align: top; 691 } 692 693 .theme-overlay .theme-autoupdate .toggle-auto-update { 694 text-decoration: none; 695 } 696 697 .theme-overlay .theme-autoupdate .toggle-auto-update .label { 698 text-decoration: underline; 699 } 700 701 .theme-overlay .theme-description { 702 color: #50575e; 703 font-size: 15px; 704 font-weight: 400; 705 line-height: 1.5; 706 margin: 30px 0 0 0; 707 } 708 709 .theme-overlay .theme-tags { 710 border-top: 3px solid #f0f0f1; 711 color: #646970; 712 font-size: 13px; 713 font-weight: 400; 714 margin: 30px 0 0 0; 715 padding-top: 20px; 716 } 717 718 .theme-overlay .theme-tags span { 719 color: #3c434a; 720 font-weight: 600; 721 margin-right: 5px; 722 } 723 724 .theme-overlay .parent-theme { 725 background: #fff; 726 border: 1px solid #f0f0f1; 727 border-left: 4px solid #72aee6; 728 font-size: 14px; 729 font-weight: 400; 730 margin-top: 30px; 731 padding: 10px 10px 10px 20px; 732 } 733 734 .theme-overlay .parent-theme strong { 735 font-weight: 600; 736 } 737 738 /** 739 * Single Theme Mode 740 * Displays detailed view inline when a user has no switch capabilities 741 */ 742 .single-theme .theme-overlay .theme-backdrop, 743 .single-theme .theme-overlay .theme-header, 744 .single-theme .theme { 745 display: none; 746 } 747 748 .single-theme .theme-overlay .theme-wrap { 749 clear: both; 750 min-height: 330px; 751 position: relative; 752 left: auto; 753 right: auto; 754 top: auto; 755 bottom: auto; 756 z-index: 10; 757 } 758 759 .single-theme .theme-overlay .theme-about { 760 padding: 30px 30px 70px; 761 position: static; 762 } 763 764 .single-theme .theme-overlay .theme-actions { 765 position: absolute; 766 } 767 768 /** 769 * Basic Responsive structure... 770 * 771 * Shuffles theme columns around based on screen width 772 */ 773 774 @media only screen and (min-width: 2000px) { 775 #wpwrap .theme-browser .theme { 776 width: 17.6%; 777 margin: 0 3% 3% 0; 778 } 779 780 #wpwrap .theme-browser .theme:nth-child(3n), 781 #wpwrap .theme-browser .theme:nth-child(4n) { 782 margin-right: 3%; 783 } 784 785 #wpwrap .theme-browser .theme:nth-child(5n) { 786 margin-right: 0; 787 } 788 } 789 790 @media only screen and (min-width: 1680px) { 791 .theme-overlay .theme-wrap { 792 width: 1450px; 793 margin: 0 auto; 794 } 795 } 796 797 /* Maximum screenshot width reaches 440px */ 798 @media only screen and (min-width: 1640px) { 799 .theme-browser .theme { 800 width: 22.7%; 801 margin: 0 3% 3% 0; 802 } 803 .theme-browser .theme .theme-screenshot:after { 804 padding-top: 75%; /* using a 4/3 aspect ratio */ 805 } 806 807 .theme-browser .theme:nth-child(3n) { 808 margin-right: 3%; 809 } 810 811 .theme-browser .theme:nth-child(4n) { 812 margin-right: 0; 813 } 814 } 815 /* Maximum screenshot width reaches 440px */ 816 @media only screen and (max-width: 1120px) { 817 .theme-browser .theme { 818 width: 47.5%; 819 margin-right: 0; 820 } 821 822 .theme-browser .theme:nth-child(even) { 823 margin-right: 0; 824 } 825 826 .theme-browser .theme:nth-child(odd) { 827 margin-right: 5%; 828 } 829 } 830 831 /* Admin menu is folded */ 832 @media only screen and (max-width: 960px) { 833 .theme-overlay .theme-wrap { 834 left: 65px; 835 } 836 } 837 838 @media only screen and (max-width: 780px) { 839 body.folded .theme-overlay .theme-wrap, 840 .theme-overlay .theme-wrap { 841 top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ 842 right: 0; 843 bottom: 0; 844 left: 0; 845 padding: 70px 20px 20px; 846 border: none; 847 z-index: 100000; /* should overlap #wpadminbar. */ 848 position: fixed; 849 } 850 851 .theme-browser .theme.active .theme-name span { 852 /* Hide the "Active: " label on smaller screens. */ 853 display: none; 854 } 855 856 .theme-overlay .theme-screenshots { 857 width: 40%; 858 } 859 860 .theme-overlay .theme-info { 861 width: 50%; 862 } 863 .single-theme .theme-wrap { 864 padding: 10px; 865 } 866 867 .theme-browser .theme .theme-actions { 868 padding: 5px 10px 4px 10px; 869 } 870 871 .theme-overlay.small-screenshot .theme-screenshots { 872 position: static; 873 float: none; 874 max-width: 302px; 875 } 876 877 .theme-overlay.small-screenshot .theme-info { 878 margin-left: 0; 879 width: auto; 880 } 881 882 .theme:not(.active):hover .theme-actions, 883 .theme:not(.active):focus .theme-actions, 884 .theme:hover .more-details, 885 .theme.focus .more-details { 886 display: none; 887 } 888 889 .theme-browser.rendered .theme:hover .theme-screenshot img, 890 .theme-browser.rendered .theme.focus .theme-screenshot img { 891 opacity: 1.0; 892 } 893 } 894 895 @media only screen and (max-width: 480px) { 896 .theme-browser .theme { 897 width: 100%; 898 margin-right: 0; 899 } 900 901 .theme-browser .theme:nth-child(2n), 902 .theme-browser .theme:nth-child(3n) { 903 margin-right: 0; 904 } 905 906 .theme-overlay .theme-about { 907 bottom: 105px; 908 } 909 910 .theme-overlay .theme-actions { 911 padding-left: 4%; 912 padding-right: 4%; 913 } 914 } 915 916 @media only screen and (max-width: 650px) { 917 .theme-overlay .theme-description { 918 margin-left: 0; 919 } 920 921 .theme-overlay .theme-actions .delete-theme { 922 position: relative; 923 right: auto; 924 bottom: auto; 925 } 926 927 .theme-overlay .theme-actions .inactive-theme { 928 display: inline; 929 } 930 931 .theme-overlay .theme-screenshots { 932 width: 100%; 933 float: none; 934 } 935 936 .theme-overlay .theme-info { 937 width: 100%; 938 } 939 940 .theme-overlay .theme-author { 941 margin: 5px 0 15px 0; 942 } 943 944 .theme-overlay .current-label { 945 margin-top: 10px; 946 font-size: 13px; 947 } 948 949 .themes-php .wp-filter-search { 950 float: none; 951 clear: both; 952 left: 0; 953 right: 0; 954 margin: -5px 0 20px 0; 955 width: 100%; 956 max-width: 280px; 957 } 958 959 .theme-browser .theme.add-new-theme span:after { 960 font: normal 60px/90px dashicons; 961 width: 80px; 962 height: 80px; 963 top: 30%; 964 left: 50%; 965 text-indent: 0; 966 margin-left: -40px; 967 } 968 969 .single-theme .theme-wrap { 970 margin: 0 -12px 0 -10px; 971 padding: 10px; 972 } 973 .single-theme .theme-overlay .theme-about { 974 padding: 10px; 975 overflow: visible; 976 } 977 .single-theme .current-label { 978 display: none; 979 } 980 .single-theme .theme-overlay .theme-actions { 981 position: static; 982 } 983 } 984 985 .broken-themes { 986 clear: both; 987 } 988 989 .broken-themes table { 990 text-align: left; 991 width: 50%; 992 border-spacing: 3px; 993 padding: 3px; 994 } 995 996 997 /*------------------------------------------------------------------------------ 998 16.2 - Install Themes 999 ------------------------------------------------------------------------------*/ 1000 1001 .update-php .wrap { 1002 max-width: 40rem; 1003 } 1004 1005 /* Already installed theme */ 1006 .theme-browser .theme .theme-installed { 1007 background: #2271b1; 1008 } 1009 1010 .theme-browser .theme .notice-success p:before { 1011 color: #68de7c; 1012 content: "\f147"; 1013 display: inline-block; 1014 font: normal 20px/1 'dashicons'; 1015 -webkit-font-smoothing: antialiased; 1016 -moz-osx-font-smoothing: grayscale; 1017 vertical-align: top; 1018 } 1019 1020 .theme-install.updated-message:before { 1021 content: ""; 1022 } 1023 1024 .theme-install-php .wp-filter { 1025 padding-left: 20px; 1026 } 1027 1028 .theme-install-php a.upload, 1029 .theme-install-php a.browse-themes { 1030 cursor: pointer; 1031 } 1032 1033 .upload-view-toggle .browse, 1034 .plugin-install-tab-upload .upload-view-toggle .upload { 1035 display: none; 1036 } 1037 1038 .plugin-install-tab-upload .upload-view-toggle .browse { 1039 display: inline; 1040 } 1041 1042 .upload-theme, 1043 .upload-plugin { 1044 box-sizing: border-box; 1045 display: none; 1046 margin: 0; 1047 padding: 50px 0; 1048 width: 100%; 1049 overflow: hidden; 1050 position: relative; 1051 top: 10px; 1052 text-align: center; 1053 } 1054 1055 .show-upload-view .upload-theme, 1056 .show-upload-view .upload-plugin, 1057 .show-upload-view .upload-plugin-wrap, 1058 .plugin-install-tab-upload .upload-plugin { 1059 display: block; 1060 } 1061 1062 .upload-theme .wp-upload-form, 1063 .upload-plugin .wp-upload-form { 1064 background: #f6f7f7; 1065 border: 1px solid #c3c4c7; 1066 padding: 30px; 1067 margin: 30px auto; 1068 display: inline-flex; 1069 justify-content: space-between; 1070 align-items: center; 1071 } 1072 1073 .upload-theme .wp-upload-form input[type="file"], 1074 .upload-plugin .wp-upload-form input[type="file"] { 1075 margin-right: 10px; 1076 } 1077 1078 .upload-theme .install-help, 1079 .upload-plugin .install-help { 1080 color: #50575e; /* #f1f1f1 background */ 1081 font-size: 18px; 1082 font-style: normal; 1083 margin: 0; 1084 padding: 0; 1085 text-align: center; 1086 } 1087 1088 p.no-themes, 1089 p.no-themes-local { 1090 clear: both; 1091 color: #646970; 1092 font-size: 18px; 1093 font-style: normal; 1094 margin: 0; 1095 padding: 100px 0; 1096 text-align: center; 1097 display: none; 1098 } 1099 1100 .no-results p.no-themes { 1101 display: block; 1102 } 1103 1104 .theme-install-php .add-new-theme { 1105 display: none !important; 1106 } 1107 1108 @media only screen and (max-width: 1120px) { 1109 .upload-theme .wp-upload-form { 1110 margin: 20px 0; 1111 max-width: 100%; 1112 } 1113 .upload-theme .install-help { 1114 font-size: 15px; 1115 padding: 20px 0 0; 1116 } 1117 } 1118 1119 .theme-details .theme-rating { 1120 line-height: 1.9; 1121 } 1122 1123 .theme-details .star-rating { 1124 display: inline; 1125 } 1126 1127 .theme-details .num-ratings, 1128 .theme-details .no-rating { 1129 font-size: 11px; 1130 color: #646970; 1131 } 1132 1133 .theme-details .no-rating { 1134 display: block; 1135 line-height: 1.9; 1136 } 1137 1138 .update-from-upload-comparison { 1139 border-top: 1px solid #dcdcde; 1140 border-bottom: 1px solid #dcdcde; 1141 text-align: left; 1142 margin: 1rem 0 1.4rem; 1143 border-collapse: collapse; 1144 width: 100%; 1145 } 1146 1147 .update-from-upload-comparison tr:last-child td { 1148 height: 1.4rem; 1149 vertical-align: top; 1150 } 1151 1152 .update-from-upload-comparison tr:first-child th { 1153 font-weight: bold; 1154 height: 1.4rem; 1155 vertical-align: bottom; 1156 } 1157 1158 .update-from-upload-comparison td.name-label { 1159 text-align: right; 1160 } 1161 1162 .update-from-upload-comparison td, 1163 .update-from-upload-comparison th { 1164 padding: 0.4rem 1.4rem; 1165 } 1166 1167 .update-from-upload-comparison td.warning { 1168 color: #d63638; 1169 } 1170 1171 .update-from-upload-actions { 1172 margin-top: 1.4rem; 1173 } 1174 1175 /*------------------------------------------------------------------------------ 1176 16.3 - Custom Header Screen 1177 ------------------------------------------------------------------------------*/ 1178 1179 .appearance_page_custom-header #headimg { 1180 border: 1px solid #dcdcde; 1181 overflow: hidden; 1182 width: 100%; 1183 } 1184 1185 .appearance_page_custom-header #upload-form p label { 1186 font-size: 12px; 1187 } 1188 1189 .appearance_page_custom-header .available-headers .default-header { 1190 float: left; 1191 margin: 0 20px 20px 0; 1192 } 1193 1194 .appearance_page_custom-header .random-header { 1195 clear: both; 1196 margin: 0 20px 20px 0; 1197 vertical-align: middle; 1198 } 1199 1200 .appearance_page_custom-header .available-headers label input, 1201 .appearance_page_custom-header .random-header label input { 1202 margin-right: 10px; 1203 } 1204 1205 .appearance_page_custom-header .available-headers label img { 1206 vertical-align: middle; 1207 } 1208 1209 1210 /*------------------------------------------------------------------------------ 1211 16.4 - Custom Background Screen 1212 ------------------------------------------------------------------------------*/ 1213 1214 div#custom-background-image { 1215 min-height: 100px; 1216 border: 1px solid #dcdcde; 1217 } 1218 1219 div#custom-background-image img { 1220 max-width: 400px; 1221 max-height: 300px; 1222 } 1223 1224 .background-position-control input[type="radio"]:checked ~ .button { 1225 background: #f0f0f1; 1226 border-color: #8c8f94; 1227 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); 1228 z-index: 1; 1229 } 1230 1231 .background-position-control input[type="radio"]:focus ~ .button { 1232 border-color: #4f94d4; 1233 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(34, 113, 177, 0.8); 1234 color: #1d2327; 1235 } 1236 1237 .background-position-control .background-position-center-icon, 1238 .background-position-control .background-position-center-icon:before { 1239 display: inline-block; 1240 line-height: 1; 1241 text-align: center; 1242 transition: background-color .1s ease-in; 1243 } 1244 1245 .background-position-control .background-position-center-icon { 1246 height: 20px; 1247 margin-top: 13px; 1248 vertical-align: top; 1249 width: 20px; 1250 } 1251 1252 .background-position-control .background-position-center-icon:before { 1253 background-color: #50575e; 1254 border-radius: 50%; 1255 content: ""; 1256 height: 12px; 1257 width: 12px; 1258 } 1259 1260 .background-position-control .button:hover .background-position-center-icon:before, 1261 .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { 1262 background-color: #1d2327; 1263 } 1264 1265 .background-position-control .button-group { 1266 display: block; 1267 } 1268 1269 .background-position-control .button-group .button { 1270 border-radius: 0; 1271 box-shadow: none; 1272 /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ 1273 height: 40px !important; 1274 line-height: 2.9 !important; 1275 margin: 0 -1px 0 0 !important; 1276 padding: 0 10px 1px !important; 1277 position: relative; 1278 } 1279 1280 .background-position-control .button-group .button:active, 1281 .background-position-control .button-group .button:hover, 1282 .background-position-control .button-group .button:focus { 1283 z-index: 1; 1284 } 1285 1286 .background-position-control .button-group:last-child .button { 1287 box-shadow: 0 1px 0 #c3c4c7; 1288 } 1289 1290 .background-position-control .button-group > label { 1291 margin: 0 !important; 1292 } 1293 1294 .background-position-control .button-group:first-child > label:first-child .button { 1295 border-radius: 3px 0 0; 1296 } 1297 1298 .background-position-control .button-group:first-child > label:first-child .dashicons { 1299 transform: rotate( 45deg ); 1300 } 1301 1302 .background-position-control .button-group:first-child > label:last-child .button { 1303 border-radius: 0 3px 0 0; 1304 } 1305 1306 .background-position-control .button-group:first-child > label:last-child .dashicons { 1307 transform: rotate( -45deg ); 1308 } 1309 1310 .background-position-control .button-group:last-child > label:first-child .button { 1311 border-radius: 0 0 0 3px; 1312 } 1313 1314 .background-position-control .button-group:last-child > label:first-child .dashicons { 1315 transform: rotate( -45deg ); 1316 } 1317 1318 .background-position-control .button-group:last-child > label:last-child .button { 1319 border-radius: 0 0 3px 0; 1320 } 1321 1322 .background-position-control .button-group:last-child > label:last-child .dashicons { 1323 transform: rotate( 45deg ); 1324 } 1325 1326 .background-position-control .button-group .dashicons { 1327 margin-top: 9px; 1328 } 1329 1330 .background-position-control .button-group + .button-group { 1331 margin-top: -1px; 1332 } 1333 1334 /*------------------------------------------------------------------------------ 1335 23.0 - Full Overlay w/ Sidebar 1336 ------------------------------------------------------------------------------*/ 1337 1338 body.full-overlay-active { 1339 overflow: hidden; 1340 /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */ 1341 visibility: hidden; 1342 } 1343 1344 .wp-full-overlay { 1345 background: transparent; 1346 z-index: 500000; 1347 position: fixed; 1348 overflow: visible; 1349 top: 0; 1350 bottom: 0; 1351 left: 0; 1352 right: 0; 1353 height: 100%; 1354 min-width: 0; 1355 } 1356 1357 .wp-full-overlay-sidebar { 1358 box-sizing: border-box; 1359 position: fixed; 1360 min-width: 300px; 1361 max-width: 600px; 1362 width: 18%; 1363 height: 100%; 1364 top: 0; 1365 bottom: 0; 1366 left: 0; 1367 padding: 0; 1368 margin: 0; 1369 z-index: 10; 1370 background: #f0f0f1; 1371 border-right: none; 1372 } 1373 1374 .wp-full-overlay.collapsed .wp-full-overlay-sidebar { 1375 overflow: visible; 1376 } 1377 1378 .wp-full-overlay.collapsed, 1379 .wp-full-overlay.expanded .wp-full-overlay-sidebar { 1380 margin-left: 0 !important; 1381 } 1382 1383 .wp-full-overlay.expanded { 1384 margin-left: 300px; 1385 } 1386 1387 .wp-full-overlay.collapsed .wp-full-overlay-sidebar { 1388 margin-left: -300px; 1389 } 1390 1391 @media screen and (min-width: 1667px) { 1392 .wp-full-overlay.expanded { 1393 margin-left: 18%; 1394 } 1395 1396 .wp-full-overlay.collapsed .wp-full-overlay-sidebar { 1397 margin-left: -18%; 1398 } 1399 } 1400 1401 @media screen and (min-width: 3333px) { 1402 .wp-full-overlay.expanded { 1403 margin-left: 600px; 1404 } 1405 1406 .wp-full-overlay.collapsed .wp-full-overlay-sidebar { 1407 margin-left: -600px; 1408 } 1409 } 1410 1411 .wp-full-overlay-sidebar:after { 1412 content: ""; 1413 display: block; 1414 position: absolute; 1415 top: 0; 1416 bottom: 0; 1417 right: 0; 1418 width: 3px; 1419 z-index: 1000; 1420 } 1421 1422 .wp-full-overlay-main { 1423 position: absolute; 1424 left: 0; 1425 right: 0; 1426 top: 0; 1427 bottom: 0; 1428 height: 100%; 1429 } 1430 1431 .wp-full-overlay-sidebar .wp-full-overlay-header { 1432 position: absolute; 1433 left: 0; 1434 right: 0; 1435 height: 45px; 1436 padding: 0 15px; 1437 line-height: 3.2; 1438 z-index: 10; 1439 margin: 0; 1440 border-top: none; 1441 box-shadow: none; 1442 } 1443 1444 .wp-full-overlay-sidebar .wp-full-overlay-header a.back { 1445 margin-top: 9px; 1446 } 1447 1448 .wp-full-overlay-sidebar .wp-full-overlay-footer { 1449 bottom: 0; 1450 border-bottom: none; 1451 border-top: none; 1452 box-shadow: none; 1453 } 1454 1455 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { 1456 position: absolute; 1457 top: 45px; 1458 bottom: 45px; 1459 left: 0; 1460 right: 0; 1461 overflow: auto; 1462 } 1463 1464 /* Close & Navigation Links */ 1465 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header { 1466 padding: 0; 1467 } 1468 1469 .theme-install-overlay .close-full-overlay, 1470 .theme-install-overlay .previous-theme, 1471 .theme-install-overlay .next-theme { 1472 display: block; 1473 position: relative; 1474 float: left; 1475 width: 45px; 1476 height: 45px; 1477 background: #f0f0f1; 1478 border-right: 1px solid #dcdcde; 1479 color: #3c434a; 1480 cursor: pointer; 1481 text-decoration: none; 1482 transition: color .1s ease-in-out, background .1s ease-in-out; 1483 } 1484 1485 .theme-install-overlay .close-full-overlay:hover, 1486 .theme-install-overlay .close-full-overlay:focus, 1487 .theme-install-overlay .previous-theme:hover, 1488 .theme-install-overlay .previous-theme:focus, 1489 .theme-install-overlay .next-theme:hover, 1490 .theme-install-overlay .next-theme:focus { 1491 background: #dcdcde; 1492 border-color: #c3c4c7; 1493 color: #000; 1494 outline: none; 1495 box-shadow: none; 1496 } 1497 1498 .theme-install-overlay .close-full-overlay:before { 1499 font: normal 22px/1 dashicons; 1500 content: "\f335"; 1501 position: relative; 1502 top: 7px; 1503 left: 13px; 1504 } 1505 1506 .theme-install-overlay .previous-theme:before { 1507 font: normal 20px/1 dashicons; 1508 content: "\f341"; 1509 position: relative; 1510 top: 6px; 1511 left: 14px; 1512 } 1513 1514 .theme-install-overlay .next-theme:before { 1515 font: normal 20px/1 dashicons; 1516 content: "\f345"; 1517 position: relative; 1518 top: 6px; 1519 left: 13px; 1520 } 1521 1522 .theme-install-overlay .previous-theme.disabled, 1523 .theme-install-overlay .next-theme.disabled, 1524 .theme-install-overlay .previous-theme.disabled:hover, 1525 .theme-install-overlay .previous-theme.disabled:focus, 1526 .theme-install-overlay .next-theme.disabled:hover, 1527 .theme-install-overlay .next-theme.disabled:focus { 1528 color: #c3c4c7; 1529 background: #f0f0f1; 1530 cursor: default; 1531 pointer-events: none; 1532 } 1533 1534 .theme-install-overlay .close-full-overlay, 1535 .theme-install-overlay .previous-theme, 1536 .theme-install-overlay .next-theme { 1537 border-left: 0; 1538 border-top: 0; 1539 border-bottom: 0; 1540 } 1541 1542 .theme-install-overlay .close-full-overlay:before, 1543 .theme-install-overlay .previous-theme:before, 1544 .theme-install-overlay .next-theme:before { 1545 top: 2px; 1546 left: 0; 1547 } 1548 1549 /* Collapse Button */ 1550 .wp-core-ui .wp-full-overlay .collapse-sidebar { 1551 position: fixed; 1552 bottom: 0; 1553 left: 0; 1554 padding: 9px 0 9px 10px; 1555 height: 45px; 1556 color: #646970; 1557 outline: 0; 1558 line-height: 1; 1559 background-color: transparent !important; 1560 border: none !important; 1561 box-shadow: none !important; 1562 border-radius: 0 !important; 1563 } 1564 1565 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover, 1566 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus { 1567 color: #2271b1; 1568 } 1569 1570 .wp-full-overlay .collapse-sidebar-arrow, 1571 .wp-full-overlay .collapse-sidebar-label { 1572 display: inline-block; 1573 vertical-align: middle; 1574 line-height: 1.6; 1575 } 1576 1577 .wp-full-overlay .collapse-sidebar-arrow { 1578 width: 20px; 1579 height: 20px; 1580 margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ 1581 border-radius: 50%; 1582 overflow: hidden; 1583 } 1584 1585 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, 1586 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { 1587 box-shadow: 1588 0 0 0 1px #4f94d4, 1589 0 0 2px 1px rgba(79, 148, 212, 0.8); 1590 } 1591 1592 .wp-full-overlay .collapse-sidebar-label { 1593 margin-left: 3px; 1594 } 1595 1596 .wp-full-overlay.collapsed .collapse-sidebar-label { 1597 display: none; 1598 } 1599 1600 .wp-full-overlay .collapse-sidebar-arrow:before { 1601 display: block; 1602 content: "\f148"; 1603 background: #f0f0f1; 1604 font: normal 20px/1 dashicons; 1605 speak: never; 1606 padding: 0; 1607 -webkit-font-smoothing: antialiased; 1608 -moz-osx-font-smoothing: grayscale; 1609 } 1610 1611 .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar { 1612 padding: 9px 10px; 1613 } 1614 1615 /* rtl:ignore */ 1616 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, 1617 .rtl .wp-full-overlay .collapse-sidebar-arrow:before { 1618 transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ 1619 } 1620 1621 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { 1622 transform: none; 1623 } 1624 1625 /* Animations */ 1626 .wp-full-overlay, 1627 .wp-full-overlay-sidebar, 1628 .wp-full-overlay .collapse-sidebar, 1629 .wp-full-overlay-main { 1630 transition-property: left, right, top, bottom, width, margin; 1631 transition-duration: 0.2s; 1632 } 1633 1634 /* Device/preview size toggles */ 1635 1636 .wp-full-overlay { 1637 background: #1d2327; 1638 } 1639 1640 .wp-full-overlay-main { 1641 background-color: #f0f0f1; 1642 } 1643 1644 .expanded .wp-full-overlay-footer { 1645 position: fixed; 1646 bottom: 0; 1647 left: 0; 1648 min-width: 299px; 1649 max-width: 599px; 1650 width: 18%; 1651 width: calc( 18% - 1px ); 1652 height: 45px; 1653 border-top: 1px solid #dcdcde; 1654 background: #f0f0f1; 1655 } 1656 1657 .wp-full-overlay-footer .devices-wrapper { 1658 float: right; 1659 } 1660 1661 .wp-full-overlay-footer .devices { 1662 position: relative; 1663 background: #f0f0f1; 1664 box-shadow: -20px 0 10px -5px #f0f0f1; 1665 } 1666 1667 .wp-full-overlay-footer .devices button { 1668 cursor: pointer; 1669 background: transparent; 1670 border: none; 1671 height: 45px; 1672 padding: 0 3px; 1673 margin: 0 0 0 -4px; 1674 box-shadow: none; 1675 border-top: 1px solid transparent; 1676 border-bottom: 4px solid transparent; 1677 transition: 1678 .15s color ease-in-out, 1679 .15s background-color ease-in-out, 1680 .15s border-color ease-in-out; 1681 } 1682 1683 .wp-full-overlay-footer .devices button:focus { 1684 box-shadow: none; 1685 outline: none; 1686 } 1687 1688 .wp-full-overlay-footer .devices button:before { 1689 display: inline-block; 1690 -webkit-font-smoothing: antialiased; 1691 font: normal 20px/30px "dashicons"; 1692 vertical-align: top; 1693 margin: 3px 0; 1694 padding: 4px 8px; 1695 color: #646970; 1696 } 1697 1698 .wp-full-overlay-footer .devices button.active { 1699 border-bottom-color: #1d2327; 1700 } 1701 1702 .wp-full-overlay-footer .devices button:hover, 1703 .wp-full-overlay-footer .devices button:focus { 1704 background-color: #fff; 1705 } 1706 1707 .wp-full-overlay-footer .devices button:focus, 1708 .wp-full-overlay-footer .devices button.active:hover { 1709 border-bottom-color: #2271b1; 1710 } 1711 1712 .wp-full-overlay-footer .devices button.active:before { 1713 color: #1d2327; 1714 } 1715 1716 .wp-full-overlay-footer .devices button:hover:before, 1717 .wp-full-overlay-footer .devices button:focus:before { 1718 color: #2271b1; 1719 } 1720 1721 .wp-full-overlay-footer .devices .preview-desktop:before { 1722 content: "\f472"; 1723 } 1724 1725 .wp-full-overlay-footer .devices .preview-tablet:before { 1726 content: "\f471"; 1727 } 1728 1729 .wp-full-overlay-footer .devices .preview-mobile:before { 1730 content: "\f470"; 1731 } 1732 1733 @media screen and (max-width: 1024px) { 1734 .wp-full-overlay-footer .devices { 1735 display: none; 1736 } 1737 } 1738 1739 .collapsed .wp-full-overlay-footer .devices button:before { 1740 display: none; 1741 } 1742 1743 .preview-mobile .wp-full-overlay-main { 1744 margin: auto 0 auto -160px; 1745 width: 320px; 1746 height: 480px; 1747 max-height: 100%; 1748 max-width: 100%; 1749 left: 50%; 1750 } 1751 1752 .preview-tablet .wp-full-overlay-main { 1753 margin: auto 0 auto -360px; 1754 width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */ 1755 height: 1080px; 1756 max-height: 100%; 1757 max-width: 100%; 1758 left: 50%; 1759 } 1760 1761 1762 /*------------------------------------------------------------------------------ 1763 24.0 - Customize Loader 1764 ------------------------------------------------------------------------------*/ 1765 1766 .no-customize-support .hide-if-no-customize, 1767 .customize-support .hide-if-customize, 1768 .no-customize-support.wp-core-ui .hide-if-no-customize, 1769 .no-customize-support .wp-core-ui .hide-if-no-customize, 1770 .customize-support.wp-core-ui .hide-if-customize, 1771 .customize-support .wp-core-ui .hide-if-customize { 1772 display: none; 1773 } 1774 1775 #customize-container, 1776 #customize-controls .notice.notification-overlay { 1777 background: #f0f0f1; 1778 z-index: 500000; 1779 position: fixed; 1780 overflow: visible; 1781 top: 0; 1782 bottom: 0; 1783 left: 0; 1784 right: 0; 1785 height: 100%; 1786 } 1787 #customize-container { 1788 display: none; 1789 } 1790 1791 /* Make the Customizer and Theme installer overlays the only available content. */ 1792 #customize-container, 1793 .theme-install-overlay { 1794 visibility: visible; 1795 } 1796 1797 .customize-loading #customize-container iframe { 1798 opacity: 0; 1799 } 1800 1801 #customize-container iframe, 1802 .theme-install-overlay iframe { 1803 height: 100%; 1804 width: 100%; 1805 z-index: 20; 1806 transition: opacity 0.3s; 1807 } 1808 1809 #customize-controls { 1810 margin-top: 0; 1811 } 1812 1813 .theme-install-overlay { 1814 display: none; 1815 } 1816 1817 .theme-install-overlay.single-theme { 1818 display: block; 1819 } 1820 1821 .install-theme-info { 1822 display: none; 1823 padding: 10px 20px 60px; 1824 } 1825 1826 .single-theme .install-theme-info { 1827 padding-top: 15px; 1828 } 1829 1830 .theme-install-overlay .install-theme-info { 1831 display: block; 1832 } 1833 1834 .install-theme-info .theme-install { 1835 float: right; 1836 margin-top: 18px; 1837 } 1838 1839 .install-theme-info .theme-name { 1840 font-size: 16px; 1841 line-height: 1.5; 1842 margin-bottom: 0; 1843 margin-top: 0; 1844 } 1845 1846 .install-theme-info .theme-screenshot { 1847 margin: 15px 0; 1848 width: 258px; 1849 border: 1px solid #c3c4c7; 1850 } 1851 1852 .install-theme-info .theme-details { 1853 overflow: hidden; 1854 } 1855 1856 .theme-details .theme-version { 1857 margin: 15px 0; 1858 } 1859 1860 .theme-details .theme-description { 1861 float: left; 1862 color: #646970; 1863 line-height: 1.6; 1864 max-width: 100%; 1865 } 1866 1867 .theme-install-overlay .wp-full-overlay-header .button { 1868 float: right; 1869 margin: 8px 10px 0 0; 1870 } 1871 1872 .theme-install-overlay .wp-full-overlay-sidebar { 1873 background: #f0f0f1; 1874 border-right: 1px solid #dcdcde; 1875 } 1876 1877 .theme-install-overlay .wp-full-overlay-sidebar-content { 1878 background: #fff; 1879 border-top: 1px solid #dcdcde; 1880 border-bottom: 1px solid #dcdcde; 1881 } 1882 1883 .theme-install-overlay .wp-full-overlay-main { 1884 position: absolute; 1885 z-index: 0; 1886 background-color: #f0f0f1; 1887 } 1888 1889 .customize-loading #customize-container { 1890 background-color: #f0f0f1; 1891 } 1892 1893 #customize-preview.wp-full-overlay-main:before, 1894 .customize-loading #customize-container:before, 1895 #customize-controls .notice.notification-overlay.notification-loading:before, 1896 .theme-install-overlay .wp-full-overlay-main:before { 1897 content: ""; 1898 display: block; 1899 width: 20px; 1900 height: 20px; 1901 position: absolute; 1902 left: 50%; 1903 top: 50%; 1904 z-index: -1; 1905 margin: -10px 0 0 -10px; 1906 transform: translateZ(0); 1907 background: transparent url(../images/spinner.gif) no-repeat center center; 1908 background-size: 20px 20px; 1909 } 1910 1911 #customize-preview.wp-full-overlay-main.iframe-ready:before, 1912 .theme-install-overlay.iframe-ready .wp-full-overlay-main:before { 1913 background-image: none; 1914 } 1915 1916 /* =Media Queries 1917 -------------------------------------------------------------- */ 1918 1919 /** 1920 * HiDPI Displays 1921 */ 1922 @media print, 1923 (-webkit-min-device-pixel-ratio: 1.25), 1924 (min-resolution: 120dpi) { 1925 .wp-full-overlay .collapse-sidebar-arrow { 1926 background-image: url(../images/arrows-2x.png); 1927 background-size: 15px 123px; 1928 } 1929 1930 #customize-preview.wp-full-overlay-main:before, 1931 .customize-loading #customize-container:before, 1932 #customize-controls .notice.notification-overlay.notification-loading:before, 1933 .theme-install-overlay .wp-full-overlay-main:before { 1934 background-image: url(../images/spinner-2x.gif); 1935 } 1936 } 1937 1938 @media screen and (max-width: 782px) { 1939 .available-theme .action-links .delete-theme { 1940 float: none; 1941 margin: 0; 1942 padding: 0; 1943 clear: both; 1944 } 1945 1946 .available-theme .action-links .delete-theme a { 1947 padding: 0; 1948 } 1949 1950 .broken-themes table { 1951 width: 100%; 1952 } 1953 1954 .theme-install-overlay .wp-full-overlay-header .button { 1955 font-size: 13px; 1956 line-height: 2.15384615; 1957 min-height: 30px; 1958 } 1959 1960 .theme-browser .theme .theme-actions .button { 1961 margin-bottom: 0; 1962 } 1963 1964 .theme-browser .theme.active .theme-actions, 1965 .theme-browser .theme .theme-actions { 1966 padding-top: 4px; 1967 padding-bottom: 4px; 1968 } 1969 1970 .upload-theme .wp-upload-form, 1971 .upload-plugin .wp-upload-form { 1972 display: block; 1973 } 1974 } 1975 1976 @media aural { 1977 .theme .notice:before, 1978 .theme-info .updating-message:before, 1979 .theme-info .updated-message:before, 1980 .theme-install.updating-message:before { 1981 speak: never; 1982 } 1983 }