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