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