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