wp-admin/css/themes.css

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