[Summary view] [Print] [Text view]

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