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