[Summary view] [Print] [Text view]

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