wp-admin/css/themes-rtl.css

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