wp-admin/css/themes-rtl.css

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