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 {
 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-right: 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 .background-position-control input[type="radio"]:checked ~ .button {
1180         background: #eee;
1181         border-color: #999;
1182         -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
1183         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
1184         z-index: 1;
1185 }
1186
1187 .background-position-control input[type="radio"]:focus ~ .button {
1188         border-color: #5b9dd9;
1189         -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
1190         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
1191         color: #23282d;
1192 }
1193
1194 .background-position-control .background-position-center-icon,
1195 .background-position-control .background-position-center-icon:before {
1196         display: inline-block;
1197         line-height: 1;
1198         text-align: center;
1199         -webkit-transition: background-color .1s ease-in 0;
1200         transition: background-color .1s ease-in 0;
1201 }
1202
1203 .background-position-control .background-position-center-icon {
1204         height: 20px;
1205         margin-top: 13px;
1206         vertical-align: top;
1207         width: 20px;
1208 }
1209
1210 .background-position-control .background-position-center-icon:before {
1211         background-color: #555;
1212         -webkit-border-radius: 50%;
1213         border-radius: 50%;
1214         content: "";
1215         height: 12px;
1216         width: 12px;
1217 }
1218
1219 .background-position-control .button:hover .background-position-center-icon:before,
1220 .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
1221         background-color: #23282d;
1222 }
1223
1224 .background-position-control .button-group {
1225         display: block;
1226 }
1227
1228 .background-position-control .button-group .button {
1229         -webkit-border-radius: 0;
1230         border-radius: 0;
1231         -webkit-box-shadow: none;
1232         box-shadow: none;
1233         /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
1234         height: 40px !important;
1235         line-height: 37px !important;
1236         margin: 0 0 0 -1px !important;
1237         padding: 0 10px 1px !important;
1238         position: relative;
1239 }
1240
1241 .background-position-control .button-group .button:active,
1242 .background-position-control .button-group .button:hover,
1243 .background-position-control .button-group .button:focus {
1244         z-index: 1;
1245 }
1246
1247 .background-position-control .button-group:last-child .button {
1248         -webkit-box-shadow: 0 1px 0 #ccc;
1249         box-shadow: 0 1px 0 #ccc;
1250 }
1251
1252 .background-position-control .button-group > label {
1253         margin: 0 !important;
1254 }
1255
1256 .background-position-control .button-group:first-child > label:first-child .button {
1257         -webkit-border-radius: 0 3px 0 0;
1258         border-radius: 0 3px 0 0;
1259 }
1260
1261 .background-position-control .button-group:first-child > label:first-child .dashicons {
1262         -webkit-transform: rotate( -45deg );
1263         -ms-transform: rotate( -45deg );
1264         transform: rotate( -45deg );
1265 }
1266
1267 .background-position-control .button-group:first-child > label:last-child .button {
1268         -webkit-border-radius: 3px 0 0 0;
1269         border-radius: 3px 0 0 0;
1270 }
1271
1272 .background-position-control .button-group:first-child > label:last-child .dashicons {
1273         -webkit-transform: rotate( 45deg );
1274         -ms-transform: rotate( 45deg );
1275         transform: rotate( 45deg );
1276 }
1277
1278 .background-position-control .button-group:last-child > label:first-child .button {
1279         -webkit-border-radius: 0 0 3px 0;
1280         border-radius: 0 0 3px 0;
1281 }
1282
1283 .background-position-control .button-group:last-child > label:first-child .dashicons {
1284         -webkit-transform: rotate( 45deg );
1285         -ms-transform: rotate( 45deg );
1286         transform: rotate( 45deg );
1287 }
1288
1289 .background-position-control .button-group:last-child > label:last-child .button {
1290         -webkit-border-radius: 0 0 0 3px;
1291         border-radius: 0 0 0 3px;
1292 }
1293
1294 .background-position-control .button-group:last-child > label:last-child .dashicons {
1295         -webkit-transform: rotate( -45deg );
1296         -ms-transform: rotate( -45deg );
1297         transform: rotate( -45deg );
1298 }
1299
1300 .background-position-control .button-group .dashicons {
1301         margin-top: 9px;
1302 }
1303
1304 .background-position-control .button-group + .button-group {
1305         margin-top: -1px;
1306 }
1307
1308 /*------------------------------------------------------------------------------
1309   23.0 - Full Overlay w/ Sidebar
1310 ------------------------------------------------------------------------------*/
1311
1312 body.full-overlay-active {
1313         overflow: hidden;
1314         /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */
1315         visibility: hidden;
1316 }
1317
1318 .wp-full-overlay {
1319         background: transparent;
1320         z-index: 500000;
1321         position: fixed;
1322         overflow: visible;
1323         top: 0;
1324         bottom: 0;
1325         right: 0;
1326         left: 0;
1327         height: 100%;
1328         min-width: 0;
1329 }
1330
1331 .wp-full-overlay-sidebar {
1332         -webkit-box-sizing: border-box;
1333         -moz-box-sizing: border-box;
1334         box-sizing: border-box;
1335         position: fixed;
1336         width: 300px;
1337         height: 100%;
1338         top: 0;
1339         bottom: 0;
1340         right: 0;
1341         padding: 0;
1342         margin: 0;
1343         z-index: 10;
1344         background: #eee;
1345         border-left: none;
1346 }
1347
1348 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1349         overflow: visible;
1350 }
1351
1352 .wp-full-overlay.collapsed,
1353 .wp-full-overlay.expanded .wp-full-overlay-sidebar {
1354         margin-right: 0 !important;
1355 }
1356
1357 .wp-full-overlay.expanded {
1358         margin-right: 300px;
1359 }
1360
1361 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
1362         margin-right: -300px;
1363 }
1364
1365 .wp-full-overlay-sidebar:after {
1366         content: "";
1367         display: block;
1368         position: absolute;
1369         top: 0;
1370         bottom: 0;
1371         left: 0;
1372         width: 3px;
1373         z-index: 1000;
1374 }
1375
1376 .wp-full-overlay-main {
1377         position: absolute;
1378         right: 0;
1379         left: 0;
1380         top: 0;
1381         bottom: 0;
1382         height: 100%;
1383 }
1384
1385 .wp-full-overlay-sidebar .wp-full-overlay-header {
1386         position: absolute;
1387         right: 0;
1388         left: 0;
1389         height: 45px;
1390         padding: 0 15px;
1391         line-height: 45px;
1392         z-index: 10;
1393         margin: 0;
1394         border-top: none;
1395         -webkit-box-shadow: none;
1396         box-shadow: none;
1397 }
1398
1399 .wp-full-overlay-sidebar .wp-full-overlay-header a.back {
1400         margin-top: 9px;
1401 }
1402
1403 .wp-full-overlay-sidebar .wp-full-overlay-footer {
1404         bottom: 0;
1405         border-bottom: none;
1406         border-top: none;
1407         -webkit-box-shadow: none;
1408         box-shadow: none;
1409 }
1410
1411 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
1412         position: absolute;
1413         top: 45px;
1414         bottom: 45px;
1415         right: 0;
1416         left: 0;
1417         overflow: auto;
1418 }
1419
1420 /* Close & Navigation Links */
1421 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
1422         padding: 0;
1423 }
1424
1425 .theme-install-overlay .close-full-overlay,
1426 .theme-install-overlay .previous-theme,
1427 .theme-install-overlay .next-theme {
1428         display: block;
1429         position: relative;
1430         float: right;
1431         width: 45px;
1432         height: 45px;
1433         padding-left: 2px;
1434         background: #eee;
1435         border-left: 1px solid #ddd;
1436         color: #444;
1437         cursor: pointer;
1438         text-decoration: none;
1439         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
1440         transition: color .1s ease-in-out, background .1s ease-in-out;
1441 }
1442
1443 .theme-install-overlay .close-full-overlay:hover,
1444 .theme-install-overlay .close-full-overlay:focus,
1445 .theme-install-overlay .previous-theme:hover,
1446 .theme-install-overlay .previous-theme:focus,
1447 .theme-install-overlay .next-theme:hover,
1448 .theme-install-overlay .next-theme:focus {
1449         background: #ddd;
1450         border-color: #ccc;
1451         color: #000;
1452         outline: none;
1453         -webkit-box-shadow: none;
1454         box-shadow: none;
1455 }
1456
1457 .theme-install-overlay .close-full-overlay:before {
1458         font: normal 22px/1 dashicons;
1459         content: "\f335";
1460         position: relative;
1461         top: 7px;
1462         right: 13px;
1463 }
1464
1465 .theme-install-overlay .previous-theme:before {
1466         font: normal 20px/1 dashicons;
1467         content: "\f345";
1468         position: relative;
1469         top: 6px;
1470         right: 14px;
1471 }
1472
1473 .theme-install-overlay .next-theme:before {
1474         font: normal 20px/1 dashicons;
1475         content: "\f341";
1476         position: relative;
1477         top: 6px;
1478         right: 13px;
1479 }
1480
1481 .theme-install-overlay .previous-theme.disabled,
1482 .theme-install-overlay .next-theme.disabled,
1483 .theme-install-overlay .previous-theme.disabled:hover,
1484 .theme-install-overlay .previous-theme.disabled:focus,
1485 .theme-install-overlay .next-theme.disabled:hover,
1486 .theme-install-overlay .next-theme.disabled:focus {
1487         color: #b4b9be;
1488         background: #eee;
1489         cursor: default;
1490         pointer-events: none;
1491 }
1492
1493 .theme-install-overlay .close-full-overlay,
1494 .theme-install-overlay .previous-theme,
1495 .theme-install-overlay .next-theme {
1496         border-right: 0;
1497         border-top: 0;
1498         border-bottom: 0;
1499 }
1500
1501 .theme-install-overlay .close-full-overlay:before,
1502 .theme-install-overlay .previous-theme:before,
1503 .theme-install-overlay .next-theme:before {
1504         top: 2px;
1505         right: 0;
1506 }
1507
1508 /* Collapse Button */
1509 .wp-core-ui .wp-full-overlay .collapse-sidebar {
1510         position: fixed;
1511         bottom: 0;
1512         right: 0;
1513         padding: 9px 10px 9px 0;
1514         height: 45px;
1515         color: #656a6f;
1516         outline: 0;
1517         line-height: 1;
1518         background-color: transparent !important;
1519         border: none !important;
1520         -webkit-box-shadow: none !important;
1521         box-shadow: none !important;
1522         -webkit-border-radius: 0 !important;
1523         border-radius: 0 !important;
1524         z-index: -1; /* Below device buttons */
1525 }
1526
1527 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
1528 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
1529         color: #0073aa;
1530 }
1531
1532 .wp-full-overlay .collapse-sidebar-arrow,
1533 .wp-full-overlay .collapse-sidebar-label {
1534         display: inline-block;
1535         vertical-align: middle;
1536         line-height: 20px;
1537 }
1538
1539 .wp-full-overlay .collapse-sidebar-arrow {
1540         width: 20px;
1541         height: 20px;
1542         margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
1543         -webkit-border-radius: 50%;
1544         border-radius: 50%;
1545         overflow: hidden;
1546 }
1547
1548 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
1549 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
1550     -webkit-box-shadow:
1551         0 0 0 1px #5b9dd9,
1552                 0 0 2px 1px rgba(30, 140, 190, .8);
1553     box-shadow:
1554         0 0 0 1px #5b9dd9,
1555                 0 0 2px 1px rgba(30, 140, 190, .8);
1556 }
1557
1558 .wp-full-overlay .collapse-sidebar-label {
1559         margin-right: 3px;
1560 }
1561
1562 .wp-full-overlay.collapsed .collapse-sidebar-label {
1563         display: none;
1564 }
1565
1566 .wp-full-overlay .collapse-sidebar-arrow:before {
1567         display: block;
1568         content: "\f148";
1569         background: #eee;
1570         font: normal 20px/1 dashicons;
1571         speak: none;
1572         padding: 0;
1573         -webkit-font-smoothing: antialiased;
1574         -moz-osx-font-smoothing: grayscale;
1575 }
1576
1577 .wp-core-ui .wp-full-overlay.collapsed .collapse-sidebar {
1578         padding: 9px 10px;
1579 }
1580
1581 /* rtl:ignore */
1582 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
1583 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
1584         -webkit-transform: rotate(180.001deg);
1585         -ms-transform: rotate(180.001deg);
1586         transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing  */
1587 }
1588
1589 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
1590         -webkit-transform: none;
1591         -ms-transform: none;
1592         transform: none;
1593 }
1594
1595 /* Animations */
1596 .wp-full-overlay,
1597 .wp-full-overlay-sidebar,
1598 .wp-full-overlay .collapse-sidebar,
1599 .wp-full-overlay-main {
1600         -webkit-transition-property: right, left, top, bottom, width, margin;
1601         transition-property: right, left, top, bottom, width, margin;
1602         -webkit-transition-duration: 0.2s;
1603         transition-duration: 0.2s;
1604 }
1605
1606 /* Device/preview size toggles */
1607
1608 .wp-full-overlay {
1609         background: #191e23;
1610 }
1611
1612 .wp-full-overlay-main {
1613         background-color: #f1f1f1;
1614 }
1615
1616 .expanded .wp-full-overlay-footer {
1617         position: fixed;
1618         bottom: 0;
1619         right: 0;
1620         width: 299px;
1621         height: 45px;
1622         border-top: 1px solid #ddd;
1623         background: #eee;
1624 }
1625
1626 .wp-full-overlay-footer .devices {
1627         float: left;
1628         background: #eee;
1629         -webkit-box-shadow: 20px 0 10px -5px #eee;
1630         box-shadow: 20px 0 10px -5px #eee;
1631 }
1632
1633 .wp-full-overlay-footer .devices button {
1634         cursor: pointer;
1635         background: transparent;
1636         border: none;
1637         height: 45px;
1638         padding: 0 3px;
1639         margin: 0 -4px 0 0;
1640         -webkit-box-shadow: none;
1641         box-shadow: none;
1642         border-top: 1px solid transparent;
1643         border-bottom: 4px solid transparent;
1644         -webkit-transition: .15s color ease-in-out,
1645                     .15s background-color ease-in-out,
1646                     .15s border-color ease-in-out;
1647         transition: .15s color ease-in-out,
1648                     .15s background-color ease-in-out,
1649                     .15s border-color ease-in-out;
1650 }
1651
1652 .wp-full-overlay-footer .devices button:focus {
1653         -webkit-box-shadow: none;
1654         box-shadow: none;
1655         outline: none;
1656 }
1657
1658 .wp-full-overlay-footer .devices button:before {
1659         display: inline-block;
1660         -webkit-font-smoothing: antialiased;
1661         font: normal 20px/30px "dashicons";
1662         vertical-align: top;
1663         margin: 3px 0;
1664         padding: 4px 8px;
1665         color: #656a6f;
1666 }
1667
1668 .wp-full-overlay-footer .devices button.active {
1669         border-bottom-color: #191e23;
1670 }
1671
1672 .wp-full-overlay-footer .devices button:hover,
1673 .wp-full-overlay-footer .devices button:focus {
1674         background-color: #fff;
1675 }
1676
1677 .wp-full-overlay-footer .devices button:focus,
1678 .wp-full-overlay-footer .devices button.active:hover {
1679         border-bottom-color: #0073aa;
1680 }
1681
1682 .wp-full-overlay-footer .devices button.active:before {
1683         color: #191e23;
1684 }
1685
1686 .wp-full-overlay-footer .devices button:hover:before,
1687 .wp-full-overlay-footer .devices button:focus:before {
1688         color: #0073aa;
1689 }
1690
1691 .wp-full-overlay-footer .devices .preview-desktop:before {
1692         content: "\f472";
1693 }
1694
1695 .wp-full-overlay-footer .devices .preview-tablet:before {
1696         content: "\f471";
1697 }
1698
1699 .wp-full-overlay-footer .devices .preview-mobile:before {
1700         content: "\f470";
1701 }
1702
1703 @media screen and (max-width:1024px) {
1704         .wp-full-overlay-footer .devices {
1705                 display: none;
1706         }
1707 }
1708
1709 .collapsed .wp-full-overlay-footer .devices button:before {
1710         display: none;
1711 }
1712
1713 .preview-mobile .wp-full-overlay-main {
1714         margin: auto -160px auto 0;
1715         width: 320px;
1716         height: 480px;
1717         max-height: 100%;
1718         max-width: 100%;
1719         right: 50%;
1720 }
1721
1722 .preview-tablet .wp-full-overlay-main {
1723         margin: auto -360px auto 0;
1724         width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
1725         height: 1080px;
1726         max-height: 100%;
1727         max-width: 100%;
1728         right: 50%;
1729 }
1730
1731
1732 /*------------------------------------------------------------------------------
1733   24.0 - Customize Loader
1734 ------------------------------------------------------------------------------*/
1735
1736 .no-customize-support .hide-if-no-customize,
1737 .customize-support .hide-if-customize,
1738 .no-customize-support.wp-core-ui .hide-if-no-customize,
1739 .no-customize-support .wp-core-ui .hide-if-no-customize,
1740 .customize-support.wp-core-ui .hide-if-customize,
1741 .customize-support .wp-core-ui .hide-if-customize {
1742         display: none;
1743 }
1744
1745 #customize-container {
1746         display: none;
1747         background: #fff;
1748         z-index: 500000;
1749         position: fixed;
1750         overflow: visible;
1751         top: 0;
1752         bottom: 0;
1753         right: 0;
1754         left: 0;
1755         height: 100%;
1756 }
1757
1758 /* Make the Customizer and Theme installer overlays the only available content. */
1759 #customize-container,
1760 .theme-install-overlay {
1761         visibility: visible;
1762 }
1763
1764 .customize-loading #customize-container iframe {
1765         opacity: 0;
1766 }
1767
1768 #customize-container iframe,
1769 .theme-install-overlay iframe {
1770         height: 100%;
1771         width: 100%;
1772         z-index: 20;
1773         -webkit-transition: opacity 0.3s;
1774         transition: opacity 0.3s;
1775 }
1776
1777 #customize-controls {
1778         margin-top: 0;
1779 }
1780
1781 .theme-install-overlay {
1782         display: none;
1783 }
1784
1785 .theme-install-overlay.single-theme {
1786         display: block;
1787 }
1788
1789 .install-theme-info {
1790         display: none;
1791         padding: 10px 20px 60px;
1792 }
1793
1794 .single-theme .install-theme-info {
1795         padding-top: 15px;
1796 }
1797
1798 .theme-install-overlay .install-theme-info {
1799         display: block;
1800 }
1801
1802 .install-theme-info .theme-install {
1803         float: left;
1804         margin-top: 18px;
1805 }
1806
1807 .install-theme-info .theme-name {
1808         font-size: 16px;
1809         line-height: 24px;
1810         margin-bottom: 0;
1811         margin-top: 0;
1812 }
1813
1814 .install-theme-info .theme-screenshot {
1815         margin: 15px 0;
1816         width: 258px;
1817         border: 1px solid #ccc;
1818 }
1819
1820 .install-theme-info .theme-details {
1821         overflow: hidden;
1822 }
1823
1824 .theme-details .theme-version {
1825         margin: 15px 0;
1826 }
1827
1828 .theme-details .theme-description {
1829         float: right;
1830         color: #72777c;
1831         line-height: 20px;
1832         max-width: 100%;
1833 }
1834
1835 .theme-install-overlay .wp-full-overlay-header .button {
1836         float: left;
1837         margin: 8px 0 0 10px;
1838         /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
1839         line-height: 26px;
1840 }
1841
1842 .theme-install-overlay .wp-full-overlay-sidebar {
1843         background: #eee;
1844         border-left: 1px solid #ddd;
1845 }
1846
1847 .theme-install-overlay .wp-full-overlay-sidebar-content {
1848         background: #fff;
1849         border-top: 1px solid #ddd;
1850         border-bottom: 1px solid #ddd;
1851 }
1852
1853 .theme-install-overlay .wp-full-overlay-main {
1854         position: absolute;
1855         z-index: 0;
1856         background-color: #f1f1f1;
1857 }
1858
1859 .customize-loading #customize-container {
1860         background-color: #f1f1f1;
1861 }
1862
1863 #customize-preview.wp-full-overlay-main:before,
1864 .customize-loading #customize-container:before,
1865 .theme-install-overlay .wp-full-overlay-main:before {
1866         content: "";
1867         display: block;
1868         width: 20px;
1869         height: 20px;
1870         position: absolute;
1871         right: 50%;
1872         top: 50%;
1873         z-index: -1;
1874         margin: -10px -10px 0 0;
1875         -webkit-transform: translateZ(0);
1876         transform: translateZ(0);
1877         background: transparent url(../images/spinner.gif) no-repeat center center;
1878         -webkit-background-size: 20px 20px;
1879         background-size: 20px 20px;
1880 }
1881
1882 #customize-preview.wp-full-overlay-main.iframe-ready:before,
1883 .theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
1884         background-image: none;
1885 }
1886
1887 /* =Media Queries
1888 -------------------------------------------------------------- */
1889
1890 /**
1891  * HiDPI Displays
1892  */
1893 @media print,
1894   (-webkit-min-device-pixel-ratio: 1.25),
1895   (min-resolution: 120dpi) {
1896         .wp-full-overlay .collapse-sidebar-arrow {
1897                 background-image: url(../images/arrows-2x.png);
1898                 -webkit-background-size: 15px 123px;
1899                 background-size: 15px 123px;
1900         }
1901
1902         #customize-preview.wp-full-overlay-main:before,
1903         .customize-loading #customize-container:before,
1904         .theme-install-overlay .wp-full-overlay-main:before {
1905                 background-image: url(../images/spinner-2x.gif);
1906         }
1907 }
1908
1909 @media screen and ( max-width: 782px ) {
1910         .available-theme .action-links .delete-theme {
1911                 float: none;
1912                 margin: 0;
1913                 padding: 0;
1914                 clear: both;
1915         }
1916
1917         .available-theme .action-links .delete-theme a {
1918                 padding: 0;
1919         }
1920
1921         .broken-themes table {
1922                 width: 100%;
1923         }
1924
1925         .theme-install-overlay .wp-full-overlay-header .theme-install {
1926                 margin-top: 6px;
1927                 line-height: normal;
1928         }
1929 }
1930
1931 @media aural {
1932         .theme .notice:before,
1933         .theme-info .updating-message:before,
1934         .theme-info .updated-message:before,
1935         .theme-install.updating-message:before {
1936                 speak: none;
1937         }
1938 }