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 .themes-php div.notice {
  44         margin: 0 0 20px 0;
  45         clear: both;
  46 }
  47
  48 .themes-php div.updated a {
  49         text-decoration: underline;
  50 }
  51
  52 /**
  53  * Main theme element
  54  * (has flexible margins)
  55  */
  56 .theme-browser .theme {
  57         cursor: pointer;
  58         float: left;
  59         margin: 0 4% 4% 0;
  60         position: relative;
  61         width: 30.6%;
  62         border: 1px solid #dedede;
  63         -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
  64         box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
  65         -webkit-box-sizing: border-box;
  66         -moz-box-sizing: border-box;
  67         box-sizing: border-box;
  68 }
  69
  70 .ie8 .theme-browser .theme {
  71         width: 30%;
  72         margin: 0 3% 4% 0;
  73 }
  74
  75 .theme-browser .theme:nth-child(3n) {
  76         margin-right: 0;
  77 }
  78
  79 .theme-browser .theme:hover,
  80 .theme-browser .theme:focus {
  81         cursor: pointer;
  82 }
  83
  84 .theme-browser .theme .theme-name {
  85         font-size: 15px;
  86         font-weight: 600;
  87         height: 18px;
  88         margin: 0;
  89         padding: 15px;
  90         -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  91         box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  92         overflow: hidden;
  93         white-space: nowrap;
  94         text-overflow: ellipsis;
  95         background: #fff;
  96         background: rgba(255,255,255,0.65);
  97 }
  98
  99 /* Activate and Customize buttons, shown on hover and focus */
 100 .theme-browser .theme .theme-actions {
 101         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 102         opacity: 0;
 103         -webkit-transition: opacity 0.1s ease-in-out;
 104         transition: opacity 0.1s ease-in-out;
 105         position: absolute;
 106         bottom: 0;
 107         right: 0;
 108         height: 38px;
 109         padding: 9px 10px 0 10px;
 110         background: rgba(244, 244, 244, 0.7);
 111         border-left: 1px solid rgba(0,0,0,0.05);
 112 }
 113
 114 .theme-browser .theme:hover .theme-actions,
 115 .theme-browser .theme.focus .theme-actions,
 116 .theme-browser .theme:focus .theme-actions {
 117         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 118         opacity: 1;
 119 }
 120
 121 .theme-browser .theme .theme-actions .button-primary {
 122         margin-right: 3px;
 123 }
 124
 125 .theme-browser .theme .theme-actions .button-secondary {
 126         float: none;
 127         margin-left: 3px;
 128 }
 129
 130 /**
 131  * Theme Screenshot
 132  *
 133  * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
 134  * It is also responsive.
 135  */
 136 .theme-browser .theme .theme-screenshot {
 137         display: block;
 138         overflow: hidden;
 139         position: relative;
 140         -webkit-transition: opacity 0.2s ease-in-out;
 141         transition: opacity 0.2s ease-in-out;
 142 }
 143
 144 .theme-browser .theme .theme-screenshot:after {
 145         content: '';
 146         display: block;
 147         padding-top: 66.66666%; /* using a 3/2 aspect ratio */
 148 }
 149
 150 .theme-browser .theme .theme-screenshot img {
 151         height: auto;
 152         position: absolute;
 153         left: 0;
 154         top: 0;
 155         width: 100%;
 156         -webkit-transition: opacity 0.2s ease-in-out;
 157         transition: opacity 0.2s ease-in-out;
 158 }
 159
 160 .theme-browser .theme:hover .theme-screenshot,
 161 .theme-browser .theme:focus .theme-screenshot {
 162         background: #fff;
 163 }
 164
 165 .theme-browser.rendered .theme:hover .theme-screenshot img,
 166 .theme-browser.rendered .theme:focus .theme-screenshot img {
 167         opacity: 0.4;
 168 }
 169
 170 .theme-browser .theme .more-details {
 171         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 172         opacity: 0;
 173         position: absolute;
 174         top: 35%;
 175         right: 25%;
 176         left: 25%;
 177         background: #23282d;
 178         background: rgba(0,0,0,0.7);
 179         color: #fff;
 180         font-size: 15px;
 181         text-shadow: 0 1px 0 rgba(0,0,0,0.6);
 182         -webkit-font-smoothing: antialiased;
 183         font-weight: 600;
 184         padding: 15px 12px;
 185         text-align: center;
 186         -webkit-border-radius: 3px;
 187         border-radius: 3px;
 188         -webkit-transition: opacity 0.1s ease-in-out;
 189         transition: opacity 0.1s ease-in-out;
 190 }
 191
 192 .theme-browser .theme:focus {
 193         border-color: #5b9dd9;
 194         -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 195         box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 196 }
 197
 198 .theme-browser .theme:focus .more-details {
 199         opacity: 1;
 200 }
 201
 202 /* Current theme needs to have its action always on view */
 203 .theme-browser .theme.active:focus .theme-actions {
 204         display: block;
 205 }
 206
 207 .theme-browser.rendered .theme:hover .more-details,
 208 .theme-browser.rendered .theme:focus .more-details {
 209         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 210         opacity: 1;
 211 }
 212
 213 /**
 214  * Displays a theme update notice
 215  * when an update is available.
 216  */
 217 .theme-browser .theme .theme-update,
 218 .theme-browser .theme .theme-installed {
 219         background: #d54e21;
 220         background: rgba(213, 78, 33, 0.95);
 221         color: #fff;
 222         display: block;
 223         font-size: 13px;
 224         font-weight: 400;
 225         height: 48px;
 226         line-height: 48px;
 227         padding: 0 10px;
 228         position: absolute;
 229         top: 0;
 230         right: 0;
 231         left: 0;
 232         border-bottom: 1px solid rgba(0,0,0,0.25);
 233         overflow: hidden;
 234 }
 235
 236 .theme-browser .theme .theme-update:before,
 237 .theme-browser .theme .theme-installed:before {
 238         content: '\f463';
 239         display: inline-block;
 240         font: normal 20px/1 'dashicons';
 241         margin: 0 6px 0 0;
 242         opacity: 0.8;
 243         position: relative;
 244         top: 5px;
 245         speak: none;
 246         -webkit-font-smoothing: antialiased;
 247 }
 248
 249
 250 /**
 251  * The currently active theme
 252  */
 253 .theme-browser .theme.active .theme-name {
 254         background: #2f2f2f;
 255         color: #fff;
 256         padding-right: 110px;
 257         font-weight: 300;
 258         -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
 259         box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
 260 }
 261
 262 .theme-browser .customize-control .theme.active .theme-name {
 263         padding-right: 15px;
 264 }
 265
 266 .theme-browser .theme.active .theme-name span {
 267         font-weight: 600;
 268 }
 269
 270 .theme-browser .theme.active .theme-actions {
 271         background: rgba(49,49,49,0.7);
 272         border-left: none;
 273         opacity: 1;
 274 }
 275
 276 .theme-browser .theme.active .theme-actions .button-primary {
 277         margin-right: 0;
 278 }
 279
 280 .theme-browser .theme .theme-author {
 281         background: #23282d;
 282         color: #eee;
 283         display: none;
 284         font-size: 14px;
 285         margin: 0 10px;
 286         padding: 5px 10px;
 287         position: absolute;
 288         bottom: 56px;
 289 }
 290
 291 .theme-browser .theme.display-author .theme-author {
 292         display: block;
 293 }
 294
 295 .theme-browser .theme.display-author .theme-author a {
 296         color: inherit;
 297         text-decoration: none;
 298 }
 299
 300 /**
 301  * Add new theme
 302  */
 303 .theme-browser .theme.add-new-theme {
 304         border: none;
 305         -webkit-box-shadow: none;
 306         box-shadow: none;
 307 }
 308
 309 .theme-browser .theme.add-new-theme a {
 310         color: #999;
 311         text-decoration: none;
 312         display: block;
 313         position: relative;
 314         z-index: 1;
 315 }
 316
 317 .theme-browser .theme.add-new-theme a:after {
 318         display: block;
 319         content: '';
 320         background: transparent;
 321         background: rgba(0, 0, 0, 0);
 322         position: absolute;
 323         top: 0;
 324         left: 0;
 325         right: 0;
 326         bottom: 0;
 327         padding: 0;
 328         text-shadow: none;
 329         border: 5px dashed #d5d2ca;
 330         border: 5px dashed rgba(0, 0, 0, 0.1);
 331         -webkit-box-sizing: border-box;
 332         -moz-box-sizing: border-box;
 333         box-sizing: border-box;
 334 }
 335
 336 .theme-browser .theme.add-new-theme span:after {
 337         background: #e5e5e5;
 338         background: rgba(153, 153, 153, 0.1);
 339         -webkit-border-radius: 50%;
 340         border-radius: 50%;
 341         display: inline-block;
 342         content: '\f132';
 343         -webkit-font-smoothing: antialiased;
 344         font: normal 74px/115px 'dashicons';
 345         width: 100px;
 346         height: 100px;
 347         vertical-align: middle;
 348         text-align: center;
 349         color: rgb(153, 153, 153);
 350         position: absolute;
 351         top: 30%;
 352         left: 50%;
 353         margin-left: -50px;
 354         text-indent: -4px;
 355         padding: 0;
 356         text-shadow: none;
 357         z-index:4;
 358 }
 359
 360 .rtl .theme-browser .theme.add-new-theme span:after {
 361         text-indent: 4px;
 362 }
 363
 364 .theme-browser .theme.add-new-theme a:hover .theme-screenshot,
 365 .theme-browser .theme.add-new-theme a:focus .theme-screenshot {
 366         background: none;
 367 }
 368
 369 .theme-browser .theme.add-new-theme a:hover span:after,
 370 .theme-browser .theme.add-new-theme a:focus span:after {
 371         background: #fff;
 372         color: #0073aa;
 373 }
 374
 375 .theme-browser .theme.add-new-theme a:hover:after,
 376 .theme-browser .theme.add-new-theme a:focus:after {
 377         border-color: transparent;
 378         color: #fff;
 379         background: #0073aa;
 380         content: '';
 381 }
 382
 383 .theme-browser .theme.add-new-theme .theme-name {
 384         background: none;
 385         text-align: center;
 386         -webkit-box-shadow: none;
 387         box-shadow: none;
 388         font-weight: 400;
 389         position: relative;
 390         top: 0;
 391         margin-top: -18px;
 392         padding-top: 0;
 393         padding-bottom: 48px;
 394 }
 395
 396 .theme-browser .theme.add-new-theme a:hover .theme-name,
 397 .theme-browser .theme.add-new-theme a:focus .theme-name {
 398         color: #fff;
 399         z-index: 2;
 400 }
 401
 402 /**
 403  * Theme Overlay
 404  * Shown when clicking a theme
 405  */
 406 .theme-overlay .theme-backdrop {
 407         position: absolute;
 408         left: -20px;
 409         right: 0;
 410         top: 0;
 411         bottom: 0;
 412         background: #f1f1f1;
 413         background: rgba( 238, 238, 238, 0.9 );
 414         z-index: 10;
 415 }
 416
 417 .theme-overlay .theme-header {
 418         position: absolute;
 419         top: 0;
 420         left: 0;
 421         right: 0;
 422         height: 48px;
 423         border-bottom: 1px solid #ddd;
 424 }
 425
 426 .theme-overlay .theme-header button {
 427         padding: 0;
 428 }
 429
 430 .theme-overlay .theme-header .close {
 431         cursor: pointer;
 432         height: 48px;
 433         width: 50px;
 434         text-align: center;
 435         float: right;
 436         border: 0;
 437         border-left: 1px solid #ddd;
 438         background-color: transparent;
 439         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 440         transition: color .1s ease-in-out, background .1s ease-in-out;
 441 }
 442
 443 .theme-overlay .theme-header .close:before {
 444         font: normal 22px/50px 'dashicons' !important;
 445         color: #777;
 446         display: inline-block;
 447         content: '\f335';
 448         font-weight: 300;
 449 }
 450
 451 /* Left and right navigation */
 452 .theme-overlay .theme-header .right,
 453 .theme-overlay .theme-header .left {
 454         cursor: pointer;
 455         color: #777;
 456         background-color: transparent;
 457         height: 48px;
 458         width: 54px;
 459         float: left;
 460         text-align: center;
 461         border: 0;
 462         border-right: 1px solid #ddd;
 463         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 464         transition: color .1s ease-in-out, background .1s ease-in-out;
 465 }
 466
 467 .theme-overlay .theme-header .close:focus,
 468 .theme-overlay .theme-header .close:hover,
 469 .theme-overlay .theme-header .right:focus,
 470 .theme-overlay .theme-header .right:hover,
 471 .theme-overlay .theme-header .left:focus,
 472 .theme-overlay .theme-header .left:hover {
 473         background: #ddd;
 474         border-color: #ccc;
 475         color: #000;
 476 }
 477
 478 .theme-overlay .theme-header .close:focus:before,
 479 .theme-overlay .theme-header .close:hover:before {
 480         color: #000;
 481 }
 482
 483 .theme-overlay .theme-header .close:focus,
 484 .theme-overlay .theme-header .right:focus,
 485 .theme-overlay .theme-header .left:focus {
 486     -webkit-box-shadow: none;
 487     box-shadow: none;
 488     outline: none;
 489 }
 490
 491 .theme-overlay .theme-header .left.disabled,
 492 .theme-overlay .theme-header .right.disabled,
 493 .theme-overlay .theme-header .left.disabled:hover,
 494 .theme-overlay .theme-header .right.disabled:hover {
 495         color: #ccc;
 496         background: inherit;
 497         cursor: inherit;
 498 }
 499
 500 .theme-overlay .theme-header .right:before,
 501 .theme-overlay .theme-header .left:before {
 502         font: normal 20px/50px 'dashicons' !important;
 503         display: inline;
 504         font-weight: 300;
 505 }
 506
 507 .theme-overlay .theme-header .left:before {
 508         content: "\f341";
 509 }
 510
 511 .theme-overlay .theme-header .right:before {
 512         content: "\f345";
 513 }
 514
 515
 516
 517 .theme-overlay .theme-wrap {
 518         clear: both;
 519         position: fixed;
 520         top: 9%;
 521         left: 190px;
 522         right: 30px;
 523         bottom: 3%;
 524         background: #fff;
 525         -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
 526         box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
 527         z-index: 20;
 528         -webkit-box-sizing: border-box;
 529         -moz-box-sizing: border-box;
 530         box-sizing: border-box;
 531         -webkit-overflow-scrolling: touch;
 532 }
 533
 534 .theme-overlay .theme-wrap:after {
 535         content: ".";
 536         display: block;
 537         height: 0;
 538         clear: both;
 539         visibility: hidden;
 540 }
 541
 542 body.folded .theme-overlay .theme-wrap {
 543         left: 70px;
 544 }
 545
 546 .theme-overlay .theme-about {
 547         position: absolute;
 548         top: 49px;
 549         bottom: 57px;
 550         left: 0;
 551         right: 0;
 552         overflow: auto;
 553         padding: 2% 4%;
 554 }
 555 .theme-overlay .theme-about:after {
 556         content: ".";
 557         display: block;
 558         height: 0;
 559         clear: both;
 560         visibility: hidden;
 561 }
 562
 563 .theme-overlay .theme-actions {
 564         position: absolute;
 565         text-align: center;
 566         bottom: 0;
 567         left: 0;
 568         right: 0;
 569         padding: 10px 25px 5px;
 570         background: #f3f3f3;
 571         z-index: 30;
 572         -webkit-box-sizing: border-box;
 573         -moz-box-sizing: border-box;
 574         box-sizing: border-box;
 575         border-top: 1px solid #eee;
 576 }
 577
 578 .ie8 .theme-overlay .theme-actions {
 579         border: 1px solid #eee;
 580 }
 581
 582 .theme-overlay .theme-actions a {
 583         margin-right: 5px;
 584         margin-bottom: 5px;
 585 }
 586
 587 /* Hide-if-customize for items we can't add classes to */
 588 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"],
 589 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] {
 590         display: none;
 591 }
 592
 593 .broken-themes a.delete-theme,
 594 .theme-overlay .theme-actions .delete-theme {
 595         color: #a00;
 596         text-decoration: none;
 597         border-color: transparent;
 598         -webkit-box-shadow: none;
 599         box-shadow: none;
 600         background: transparent;
 601 }
 602
 603 .theme-overlay .theme-actions .delete-theme {
 604         position: absolute;
 605         right: 10px;
 606         bottom: 5px;
 607 }
 608
 609 .broken-themes a.delete-theme:hover,
 610 .broken-themes a.delete-theme:focus,
 611 .theme-overlay .theme-actions .delete-theme:hover,
 612 .theme-overlay .theme-actions .delete-theme:focus {
 613         background: #d54e21;
 614         color: #fff;
 615         border-color: #d54e21;
 616 }
 617
 618 .theme-overlay .theme-actions .active-theme,
 619 .theme-overlay.active .theme-actions .inactive-theme {
 620         display: none;
 621 }
 622
 623 .theme-overlay .theme-actions .inactive-theme,
 624 .theme-overlay.active .theme-actions .active-theme {
 625         display: block;
 626 }
 627
 628 /**
 629  * Theme Screenshots gallery
 630  */
 631 .theme-overlay .theme-screenshots {
 632         float: left;
 633         margin: 0 30px 0 0;
 634         width: 55%;
 635         max-width: 880px;
 636         text-align: center;
 637 }
 638
 639 /* First screenshot, shown big */
 640 .theme-overlay .screenshot {
 641         border: 1px solid #fff;
 642         -webkit-box-sizing: border-box;
 643         -moz-box-sizing: border-box;
 644         box-sizing: border-box;
 645         overflow: hidden;
 646         position: relative;
 647         -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
 648         box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
 649 }
 650
 651 .theme-overlay .screenshot:after {
 652         content: '';
 653         display: block;
 654         padding-top: 75%; /* using a 4/3 aspect ratio */
 655 }
 656
 657 .theme-overlay .screenshot img {
 658         height: auto;
 659         position: absolute;
 660         left: 0;
 661         top: 0;
 662         width: 100%;
 663 }
 664 /* Handles old 300px screenshots */
 665 .theme-overlay.small-screenshot .theme-screenshots {
 666         position: absolute;
 667         width: 302px;
 668 }
 669 .theme-overlay.small-screenshot .theme-info {
 670         margin-left: 350px;
 671         width: auto;
 672 }
 673
 674 /* Other screenshots, shown small and square */
 675 .theme-overlay .screenshot.thumb {
 676         background: #ccc;
 677         border: 1px solid #eee;
 678         float: none;
 679         display: inline-block;
 680         margin: 10px 5px 0;
 681         width: 140px;
 682         height: 80px;
 683         cursor: pointer;
 684 }
 685
 686 .theme-overlay .screenshot.thumb:after {
 687         content: '';
 688         display: block;
 689         padding-top: 100%; /* using a 1/1 aspect ratio */
 690 }
 691
 692 .theme-overlay .screenshot.thumb img {
 693         cursor: pointer;
 694         height: auto;
 695         position: absolute;
 696         left: 0;
 697         top: 0;
 698         width: 100%;
 699         height: auto;
 700 }
 701
 702 .theme-overlay .screenshot.selected {
 703         background: transparent;
 704         border: 2px solid #00a0d2;
 705 }
 706
 707 .theme-overlay .screenshot.selected img {
 708         opacity: 0.8;
 709 }
 710
 711 /* No screenshot placeholder */
 712 .theme-browser .theme .theme-screenshot.blank,
 713 .theme-overlay .screenshot.blank {
 714         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
 715 }
 716
 717 /**
 718  * Theme heading information
 719  */
 720 .theme-overlay .theme-info {
 721         width: 40%;
 722         float: left;
 723 }
 724
 725 .theme-overlay .current-label {
 726         background: #32373c;
 727         color: #fff;
 728         font-size: 11px;
 729         display: inline-block;
 730         padding: 2px 8px;
 731         -webkit-border-radius: 2px;
 732         border-radius: 2px;
 733         margin: 0 0 -10px;
 734         -webkit-user-select: none;
 735         -moz-user-select: none;
 736         -ms-user-select: none;
 737         user-select: none;
 738 }
 739
 740 .theme-overlay .theme-name {
 741         color: #23282d;
 742         font-size: 32px;
 743         font-weight: 100;
 744         margin: 10px 0 0;
 745         line-height: 1.3;
 746 }
 747
 748 .theme-overlay .theme-version {
 749         color: #999;
 750         font-size: 13px;
 751         font-weight: 400;
 752         float: none;
 753         display: inline-block;
 754         margin-left: 10px;
 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: #82878c;
 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: #23282d;
 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 #00a0d2;
 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: 100000; /* should overlap #wpadminbar. */
 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: #0073aa;
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         clear: both;
1145         color: #666;
1146         font-size: 18px;
1147         font-style: normal;
1148         margin: 0;
1149         padding: 0;
1150         text-align: center;
1151         display: none;
1152 }
1153 body.no-results p.no-themes {
1154         display: block;
1155 }
1156 body.show-upload-theme p.no-themes {
1157         display: none !important;
1158 }
1159
1160 .theme-install-php .add-new-theme {
1161         display: none !important;
1162 }
1163
1164 @media only screen and (max-width: 1120px) {
1165         .upload-theme .wp-upload-form {
1166                 margin: 20px 0;
1167                 max-width: 100%;
1168         }
1169         .upload-theme .install-help {
1170                 font-size: 15px;
1171                 padding: 20px 0 0;
1172                 text-align: left;
1173         }
1174 }
1175
1176 .rating {
1177         margin: 15px 0 0;
1178 }
1179 .rating span:before {
1180         color: #e6b800;
1181         content: "\f154";
1182         display: inline-block;
1183         -webkit-font-smoothing: antialiased;
1184         font: normal 20px/1 'dashicons';
1185         vertical-align: top;
1186 }
1187 /* Half stars */
1188 .rating-10 span.one:before,
1189 .rating-30 span.two:before,
1190 .rating-50 span.three:before,
1191 .rating-70 span.four:before,
1192 .rating-90 span.five:before {
1193         content: "\f459";
1194 }
1195 /* Full stars */
1196 .rating-20 span.one:before {
1197         content: "\f155";
1198 }
1199 .rating-30 span.one:before,
1200 .rating-40 span.one:before,
1201 .rating-40 span.two:before {
1202         content: "\f155";
1203 }
1204 .rating-50 span.one:before,
1205 .rating-50 span.two:before,
1206 .rating-60 span.one:before,
1207 .rating-60 span.two:before,
1208 .rating-60 span.three:before {
1209         content: "\f155";
1210 }
1211 .rating-70 span.one:before,
1212 .rating-70 span.two:before,
1213 .rating-70 span.three:before,
1214 .rating-80 span.one:before,
1215 .rating-80 span.two:before,
1216 .rating-80 span.three:before,
1217 .rating-80 span.four:before {
1218         content: "\f155";
1219 }
1220 .rating-90 span.one:before,
1221 .rating-90 span.two:before,
1222 .rating-90 span.three:before,
1223 .rating-90 span.four:before,
1224 .rating-100 span.one:before,
1225 .rating-100 span.two:before,
1226 .rating-100 span.three:before,
1227 .rating-100 span.four:before,
1228 .rating-100 span.five:before {
1229         content: "\f155";
1230 }
1231 .rating .ratings {
1232         display: block;
1233         line-height: 20px;
1234         color: #999;
1235 }
1236
1237 /*------------------------------------------------------------------------------
1238   16.3 - Custom Header Screen
1239 ------------------------------------------------------------------------------*/
1240
1241 .appearance_page_custom-header #headimg {
1242         border: 1px solid #DFDFDF;
1243         overflow: hidden;
1244         width: 100%;
1245 }
1246
1247 .appearance_page_custom-header #upload-form p label {
1248         font-size: 12px;
1249 }
1250
1251 .appearance_page_custom-header .available-headers .default-header {
1252         float: left;
1253         margin: 0 20px 20px 0;
1254 }
1255
1256 .appearance_page_custom-header .random-header {
1257         clear: both;
1258         margin: 0 20px 20px 0;
1259         vertical-align: middle;
1260 }
1261
1262 .appearance_page_custom-header .available-headers label input,
1263 .appearance_page_custom-header .random-header label input {
1264         margin-right: 10px;
1265 }
1266
1267 .appearance_page_custom-header .available-headers label img {
1268         vertical-align: middle;
1269 }
1270
1271
1272 /*------------------------------------------------------------------------------
1273   16.4 - Custom Background Screen
1274 ------------------------------------------------------------------------------*/
1275
1276 div#custom-background-image {
1277         min-height: 100px;
1278         border: 1px solid #dfdfdf;
1279 }
1280
1281 div#custom-background-image img {
1282         max-width: 400px;
1283         max-height: 300px;
1284 }
1285
1286 /*------------------------------------------------------------------------------
1287   23.0 - Full Overlay w/ Sidebar
1288 ------------------------------------------------------------------------------*/
1289
1290 body.full-overlay-active {
1291         overflow: hidden;
1292 }
1293
1294 .wp-full-overlay {
1295         background: transparent;
1296         z-index: 500000;
1297         position: fixed;
1298         overflow: visible;
1299         top: 0;
1300         bottom: 0;
1301         left: 0;
1302         right: 0;
1303         height: 100%;
1304         min-width: 0;
1305 }
1306
1307 .wp-full-overlay-sidebar {
1308         -webkit-box-sizing: border-box;
1309         -moz-box-sizing: border-box;
1310         box-sizing: border-box;
1311         position: fixed;
1312         width: 300px;
1313         height: 100%;
1314         top: 0;
1315         bottom: 0;
1316         left: 0;
1317         padding: 0;
1318         margin: 0;
1319         z-index: 10;
1320         background: #eee;
1321         border-right: none;
1322 }
1323
1324 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1325         overflow: visible;
1326 }
1327
1328 .wp-full-overlay.collapsed,
1329 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1330         margin-left: 0 !important;
1331 }
1332
1333 .wp-full-overlay.expanded {
1334         margin-left: 300px;
1335 }
1336
1337 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1338         margin-left: -300px;
1339 }
1340
1341 .wp-full-overlay-sidebar:after {
1342         content: '';
1343         display: block;
1344         position: absolute;
1345         top: 0;
1346         bottom: 0;
1347         right: 0;
1348         width: 3px;
1349         z-index: 1000;
1350 }
1351
1352 .wp-full-overlay-main {
1353         position: absolute;
1354         left: 0;
1355         right: 0;
1356         top: 0;
1357         bottom: 0;
1358         height: 100%;
1359 }
1360
1361 #customize-preview.wp-full-overlay-main {
1362         background: url(../images/spinner.gif) no-repeat center center;
1363         -webkit-background-size: 20px 20px;
1364         background-size: 20px 20px;
1365 }
1366
1367 #customize-preview.wp-full-overlay-main.iframe-ready {
1368         background: none;
1369 }
1370
1371 .wp-full-overlay-sidebar .wp-full-overlay-header {
1372         position: absolute;
1373         left: 0;
1374         right: 0;
1375         height: 45px;
1376         padding: 0 15px;
1377         line-height: 45px;
1378         z-index: 10;
1379         margin: 0;
1380         border-top: none;
1381         -webkit-box-shadow: none;
1382         box-shadow: none;
1383 }
1384
1385 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1386         margin-top: 9px;
1387 }
1388
1389 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1390         bottom: 0;
1391         border-bottom: none;
1392         border-top: none;
1393         -webkit-box-shadow: none;
1394         box-shadow: none;
1395 }
1396
1397 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1398         position: absolute;
1399         top: 45px;
1400         bottom: 45px;
1401         left: 0;
1402         right: 0;
1403         overflow: auto;
1404 }
1405
1406 /* Close & Navigation Links */
1407 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1408         padding: 0;
1409 }
1410
1411 .theme-install-overlay .close-full-overlay,
1412 .theme-install-overlay .previous-theme,
1413 .theme-install-overlay .next-theme {
1414         display: block;
1415         position: relative;
1416         float: left;
1417         width: 45px;
1418         height: 45px;
1419         padding-right: 2px;
1420         background: #eee;
1421         border-right: 1px solid #ddd;
1422         color: #444;
1423         cursor: pointer;
1424         text-decoration: none;
1425         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1426         transition: color .1s ease-in-out, background .1s ease-in-out;
1427 }
1428
1429 .theme-install-overlay .close-full-overlay:hover,
1430 .theme-install-overlay .close-full-overlay:focus,
1431 .theme-install-overlay .previous-theme:hover,
1432 .theme-install-overlay .previous-theme:focus,
1433 .theme-install-overlay .next-theme:hover,
1434 .theme-install-overlay .next-theme:focus {
1435         background: #ddd;
1436         border-color: #ccc;
1437         color: #000;
1438         outline: none;
1439         -webkit-box-shadow: none;
1440         box-shadow: none;
1441 }
1442
1443 .theme-install-overlay .close-full-overlay:before {
1444         font: normal 22px/1 dashicons;
1445         content: "\f335";
1446         position: relative;
1447         top: 7px;
1448         left: 13px;
1449 }
1450
1451 .theme-install-overlay .previous-theme:before {
1452         font: normal 20px/1 dashicons;
1453         content: "\f341";
1454         position: relative;
1455         top: 6px;
1456         left: 14px;
1457 }
1458
1459 .theme-install-overlay .next-theme:before {
1460         font: normal 20px/1 dashicons;
1461         content: "\f345";
1462         position: relative;
1463         top: 6px;
1464         left: 13px;
1465 }
1466
1467 .theme-install-overlay .previous-theme.disabled,
1468 .theme-install-overlay .next-theme.disabled,
1469 .theme-install-overlay .previous-theme.disabled:hover,
1470 .theme-install-overlay .previous-theme.disabled:focus,
1471 .theme-install-overlay .next-theme.disabled:hover,
1472 .theme-install-overlay .next-theme.disabled:focus {
1473         color: #b4b9be;
1474         background: #eee;
1475         cursor: default;
1476         pointer-events: none;
1477 }
1478
1479 /* Collapse Button */
1480 .wp-full-overlay a.collapse-sidebar {
1481         position: absolute;
1482         bottom: 12px;
1483         left: 0;
1484         z-index: 50;
1485         display: block;
1486         width: 19px;
1487         height: 19px;
1488         margin-left: 15px;
1489         padding: 0;
1490         -webkit-border-radius: 50%;
1491         border-radius: 50%;
1492         color: #777;
1493         text-decoration: none;
1494 }
1495
1496 .wp-full-overlay a.collapse-sidebar:hover {
1497         color: #0073aa;
1498 }
1499
1500 .wp-full-overlay.collapsed .collapse-sidebar {
1501         position: absolute;
1502         left: 100%;
1503 }
1504
1505 .wp-full-overlay .collapse-sidebar-arrow {
1506         position: static;
1507         margin-top: 0;
1508         margin-left: 0;
1509         display: block;
1510         width: auto;
1511         height: auto;
1512         background: none;
1513 }
1514
1515 .wp-full-overlay .collapse-sidebar-arrow:before {
1516         -webkit-border-radius: 50%;
1517         border-radius: 50%;
1518         float: left;
1519         content: "\f148";
1520         background: #eee;
1521         font: normal 20px/1 'dashicons';
1522         speak: none;
1523         display: block;
1524         padding: 0;
1525         text-indent: 0;
1526         text-align: center;
1527         position: relative;
1528         -webkit-font-smoothing: antialiased;
1529         -moz-osx-font-smoothing: grayscale;
1530         text-decoration: none !important;
1531 }
1532
1533 /* rtl:ignore */
1534 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1535 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1536         -webkit-transform: rotate(180deg);
1537         -ms-transform: rotate(180deg);
1538         transform: rotate(180deg);
1539 }
1540
1541 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1542         -webkit-transform: none;
1543         -ms-transform: none;
1544         transform: none;
1545 }
1546
1547 .wp-full-overlay.collapsed .collapse-sidebar-arrow {
1548         background-position: -1px -109px;
1549 }
1550
1551 .wp-full-overlay .collapse-sidebar-label {
1552         position: absolute;
1553         left: 100%;
1554         line-height: 20px;
1555         margin-left: 10px;
1556 }
1557
1558 .wp-full-overlay.collapsed .collapse-sidebar-label {
1559         display: none;
1560 }
1561
1562 /* Animations */
1563 .wp-full-overlay,
1564 .wp-full-overlay-sidebar,
1565 .wp-full-overlay .collapse-sidebar,
1566 .wp-full-overlay-main {
1567         -webkit-transition-property: left, right, top, bottom, width, margin;
1568         transition-property: left, right, top, bottom, width, margin;
1569         -webkit-transition-duration: 0.2s;
1570         transition-duration: 0.2s;
1571 }
1572
1573 /*------------------------------------------------------------------------------
1574   24.0 - Customize Loader
1575 ------------------------------------------------------------------------------*/
1576
1577 .no-customize-support .hide-if-no-customize,
1578 .customize-support .hide-if-customize,
1579 .no-customize-support.wp-core-ui .hide-if-no-customize,
1580 .no-customize-support .wp-core-ui .hide-if-no-customize,
1581 .customize-support.wp-core-ui .hide-if-customize,
1582 .customize-support .wp-core-ui .hide-if-customize {
1583         display: none;
1584 }
1585
1586 #customize-container {
1587         display: none;
1588         background: #fff;
1589         z-index: 500000;
1590         position: fixed;
1591         overflow: visible;
1592         top: 0;
1593         bottom: 0;
1594         left: 0;
1595         right: 0;
1596         height: 100%;
1597 }
1598
1599 .customize-active #customize-container {
1600         display: block;
1601 }
1602
1603 .customize-loading #customize-container iframe {
1604         opacity: 0;
1605 }
1606
1607 .customize-loading #customize-container {
1608         background: #fff url(../images/spinner.gif) no-repeat fixed center center;
1609         -webkit-background-size: 20px 20px;
1610         background-size: 20px 20px;
1611 }
1612
1613 #customize-container iframe,
1614 .theme-install-overlay iframe {
1615         height: 100%;
1616         width: 100%;
1617         z-index: 20;
1618         -webkit-transition: opacity 0.3s;
1619         transition: opacity 0.3s;
1620 }
1621
1622 #customize-container .collapse-sidebar {
1623         bottom: 16px;
1624 }
1625
1626 #customize-controls {
1627         margin-top: 0;
1628 }
1629
1630 .theme-install-overlay {
1631         display: none;
1632 }
1633
1634 .theme-install-overlay.single-theme {
1635         display: block;
1636 }
1637
1638 .install-theme-info {
1639         display: none;
1640         padding: 10px 20px 60px;
1641 }
1642
1643 .single-theme .install-theme-info {
1644         padding-top: 15px;
1645 }
1646
1647 .theme-install-overlay .install-theme-info {
1648         display: block;
1649 }
1650
1651 .install-theme-info .theme-install {
1652         float: right;
1653         margin-top: 18px;
1654 }
1655
1656 .install-theme-info .theme-name {
1657         font-size: 16px;
1658         line-height: 24px;
1659         margin-bottom: 0;
1660         margin-top: 0;
1661 }
1662
1663 .install-theme-info .theme-screenshot {
1664         margin-top: 15px;
1665         width: 258px;
1666         border: 1px solid #ccc;
1667 }
1668
1669 .install-theme-info .theme-details {
1670         overflow: hidden;
1671 }
1672
1673 .theme-details .theme-version {
1674         margin: 15px 0;
1675         float: left;
1676 }
1677
1678 .theme-details .star-rating {
1679         margin: 7px 0;
1680         float: right;
1681 }
1682
1683 .theme-details .theme-description {
1684         float: left;
1685         color: #777;
1686         line-height: 20px;
1687         max-width: 100%;
1688 }
1689
1690 .theme-install-overlay .wp-full-overlay-header .theme-install {
1691         float: right;
1692         margin: 8px 10px 0 0;
1693         /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1694         line-height: 26px;
1695 }
1696
1697 .theme-install-overlay .wp-full-overlay-sidebar {
1698         background: #eee;
1699         border-right: 1px solid #ddd;
1700 }
1701
1702 .theme-install-overlay .wp-full-overlay-sidebar-content {
1703         background: #fff;
1704         border-top: 1px solid #ddd;
1705         border-bottom: 1px solid #ddd;
1706 }
1707
1708 .theme-install-overlay .wp-full-overlay-main {
1709         background: #fff url(../images/spinner.gif) no-repeat center center;
1710         -webkit-background-size: 20px 20px;
1711         background-size: 20px 20px;
1712 }
1713
1714 /* =Media Queries
1715 -------------------------------------------------------------- */
1716
1717 /**
1718  * HiDPI Displays
1719  */
1720 @media print,
1721   (-webkit-min-device-pixel-ratio: 1.25),
1722   (min-resolution: 120dpi) {
1723         .wp-full-overlay .collapse-sidebar-arrow {
1724                 background-image: url(../images/arrows-2x.png);
1725                 -webkit-background-size: 15px 123px;
1726                 background-size: 15px 123px;
1727         }
1728
1729         #customize-preview.wp-full-overlay-main,
1730         .customize-loading #customize-container,
1731         .theme-install-overlay .wp-full-overlay-main {
1732                 background-image: url(../images/spinner-2x.gif);
1733         }
1734
1735         .theme-install-overlay .wp-full-overlay-header .theme-install {
1736                 margin-top: 2px;
1737         }
1738 }
1739
1740 @media screen and ( max-width: 782px ) {
1741         .available-theme .action-links .delete-theme {
1742                 float: none;
1743                 margin: 0;
1744                 padding: 0;
1745                 clear: both;
1746         }
1747
1748         .available-theme .action-links .delete-theme a {
1749                 padding: 0;
1750         }
1751
1752         .broken-themes table {
1753                 width: 100%;
1754         }
1755
1756         .theme-install-overlay .wp-full-overlay-header .theme-install {
1757                 margin-top: 6px;
1758                 line-height: normal;
1759         }
1760 }