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