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