[Summary view] [Print] [Text view]

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