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