wp-admin/css/themes.css

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