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