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